Homework Feedback

Graphics and Code display

• Be sure to include your code on your web page!

• Use code-fold: true so that the code is initially hidden and I can open it up as I need to. (That makes navigating your page much easier.)

• Choose your sizes well. Ideally graphics should

  • be large enough to be seen clearly, but not much larger
  • not require scrolling

Web pages

Quarto gives you nice options for formatting. Some things you might like to use include

• headers,
• bulleted or enumerated lists

Take advantage of these.

This is not required, but you can do all sorts of styling of web pages in quarto, and it isn’t that hard. For starters, explore quarto html themes.

For a webpage like the course webpage, I used the quarto website project type, which provides some nice features (and isn’t hard to learn).

Getting help

If you have an idea but don’t know the code for it, the Vega-Lite documentation is quite good.

There is also an example gallery that is useful if you can find an example that uses the feature you are interested in.

You can also search our course website (one of the bonus features of using the quarto website project type.)

General design notes

• Use good titles

  • titles should add something not there without them
  • use titles to tell (part of) the story

• Don’t settle for “good enough”. Keep our design principles in mind and see if you can make an improvement.

• When recreating graphics I could always tell which of two things was true:

  • You didn’t know how to do something; or
  • You weren’t observant enough to notice some of the features of the graphic you were imitating.

HW 7

Movie graphic

Details to pay attention to

• model uses millions of dollars as unit
• model trims scale at 60 (million)

Race/income

• Use labelAngle to rotate axis. Horizontal is best whenever possible.
• ideally this should be arranged in a 2x2 grid to match what was in the book and to use space efficiently.

Heat map

• grid lines

  • use stroke to turn them on
  • make sure they are not too wide
  • pros and cons of using them at all?

• x-axis labeling

  • You can use the values property of ticks to set the exact values where you want ticks.
  • Most of you used the year as ordinal type. Another option is to use quantitive and bin (and then format the axis presentation of the numbers). That gives some better defaults.
    • need to have a band scale if we want width/height of rectangle to be as expected. Otherwise we need to specify more than just an x/y position for a rectangle.

• orient can be used to position guides (legend on top, y-axis on right)

• missing data

  • there is some missing data which can look pretty bad on these graphs, depending on your color scheme.

  • some options:

    • transform missing to 0
    • set the color used for missing data to something that works
    • filter the data to avoid (not the best option here)

• sorting

  • easiest: sort by max internet use (since internet use in increasing, this will be the same as the last year, but that won’t work for all data sets.)

  • create a new version of users that is 0 except in 2016, then take the max of these. That guarantees that you are sorting by 2016 values.

  • for something like sorting by the first year internet usage was over 20%, you will want functions like argmin and argmax.

Pie chart

• Some of you didn’t use the data from the example. (It’s a super small data set, so you can just enter it manually.)Z

• Some of you (using the wrong data) ended up with multiple arcs of the same color. Do you understand why?

• It is often nicer to label the pie rather than have a legend off to the side; see odds and ends slides

• Putting the numbers on the pie graph works well when there are only a few wedges and they are large enough.

Some graphics

heatmap_url <- "https://calvin-data304.netlify.app/data/cow-internet2.csv"

vl_chart() |>
  vl_add_data(url = heatmap_url) |>
  vl_calculate(
    calculate = "datum.year == '2016' ? datum.users : 0",
    as = "sorting_users"
  ) |>
  vl_mark_rect(stroke = "white") |>
  vl_encode_x(
    field = "year",
    type = "ordinal",
    title = "",
    axis = list(
      labelAngle = 0,
      values = as.character(seq(1990, 2015, by = 5))
    )
  ) |>
  vl_encode_y(
    field = "country",
    type = "ordinal",
    sort = list(field = "users", op = "max", order = "descending"),
    title = "",
    axis = list(orient = "right")
  ) |>
  vl_encode_color(
    field = "users",
    type = "quantitative",
    title = "internet users / 100 people"
  ) |>
  vl_legend_color(orient = "top") |>
  vl_scale_color(scheme = "magma")

vl_chart() |>
  vl_add_data(url = heatmap_url) |>
  vl_calculate(
    calculate = 'datum.users === "NA" ? 0 : datum.users',
    as = "users2"
  ) |>
  vl_calculate(
    calculate = "datum.year == '2016' ? datum.users : 0",
    as = "sorting_users"
  ) |>
  vl_mark_rect(stroke = "white") |>
  vl_encode_x(
    field = "year",
    type = "quantitative",
    bin = list(step = 1),
    title = "",
    axis = list(
      # values = seq(1990, 2015, by = 5),
      format = "d",
      labelFlush = FALSE
    )
  ) |>
  vl_encode_y(
    field = "country",
    type = "ordinal",
    sort = list(field = "users", op = "max", order = "descending"),
    title = "",
    axis = list(orient = "right")
  ) |>
  vl_encode_color(
    field = "users2",
    type = "quantitative",
    title = "internet users / 100 people"
  ) |>
  vl_legend_color(orient = "top") |>
  vl_scale_color(scheme = "magma") |>
  vl_add_properties(width = 500, height = 400)