Skip to content

Latest commit

 

History

History
162 lines (140 loc) · 8.69 KB

week06.md

File metadata and controls

162 lines (140 loc) · 8.69 KB

Week 6

TODO

Logistics

  • Suggestions in Observable, Links & Questions in Piazza (pls mark things as "resolved")
  • Projects (set up teams and review proposals)
  • Looking ahead: mapping (static and slippy), animation, d3-geo, 3-D

Topics

  • (Re)Introduce D3
  • Data wrangling (D3 and vanilla JavaScript)
  • Interaction with D3 & Plot

D3

  • Learn D3 -- collection
  • Learn D3: By Example
    • This notebook demonstrates chart reuse of D3 Histogram
    • EXERCISE #1: In a new notebook, recreate the histogram (chart1) using Plot
    • EXERCISE #2: Change the height to 200 (as in chart2) using Plot
    • EXERCISE #3: Do the same thing with chart3 -- get it to run in your new notebook.
    • EXERCISE #4: Stop the axes from jiggling.
    • EXERCISE #5: Add tooltips to the chart you created in Exercise #2
      • Solution
      • As we'll see, the code that's used to add tooltips was written with D3 (and vanilla JavaScript).
    • The histogram is one of many D3 Charts (collection)
      • You'll notice that many of these D3 charts can be easily and simply recreated with Plot.
      • But D3 is about much more than charts.

Data wrangling (with D3 & Observable)

  • Why should you use D3 & Observable?
    • Because it's a natural environment for developing good habits. For example...
      • "A good rule of thumb is that a cell should either define a named value to be referenced by other cells."
      • The last few paragraphs of Learn D3: Data explain why.
      • "Implicit dependencies lead to nondeterministic behavior 😱 during development, and possible errors 💥"
      • For example, if one cell defines an array and a second cell modifies it in-place, other cells may see the array before or after the mutation.
      • Make the dependency explicit: give the second cell a name and copy the array using Array.from or array.map.
      • Or combine the two cells so that only the already-modified array is visible to other cells.
  • Learn D3: Data
    • EXERCISE #6: Fix the next line so that you add the numbers, not the strings
      • "62.7" + "59.9" // 122.6? Nope!
      • Solution
  • d3-fetch -- convenient parsing on top of the Fetch API
  • d3-dsv -- parsing & formatting text (includes d3.csvParse())
  • d3-time -- dealing with all the issues related to time
  • d3-time-format -- parsing and formatting time (includes d3.utcParse())
  • d3-array API reference (includes d3.extent()) -- github

In-class labs

Case Study: Wrangling Wikipedia

Scales

D3 scales and Plot Scales are very closely related.

  • Remember this? Introducing D3-Scale by Mike Bostock
  • Learn D3: Scales
    • Look under the hood at the bar chart in this notebook
    • Create a D3 scale from a Plot scale
      • Create a chart with Plot that has only a scale: chart = Plot.plot({x: {domain: [0, 100]}, grid: true})
      • Get the scale object: plotScale = chart.scale("x")
      • Inspect the scale object -- it has all the properties needed to create a D3 scale
        • Note: plotScale.type == "linear" evaluates to true, which means we're using a linear scale.
        • d3.scaleLinear is one of several continuous scales
        • Continuous Scales
          • Notice that there's a whole lot of SVG attribute setting under the hood to visualize the scales
          • D3 scales come with many instance methods (e.g., scale.ticks())
            • Notice what happens when you vary the argument
          • [https://observablehq.com/@d3/continuous-scales#powers)
            • Try following the directions, i.e., change the range and value for "ticks" as suggested
      • Create the consistent D3 scale...
scale = d3.scaleLinear(plotScale.domain, plotScale.range)

or

scale = d3.scaleLinear()
scale = scale.domain(plotScale.domain)
scale = scale.range(plotScale.range)

or

scale = d3.scaleLinear()
    .domain(plotScale.domain)
    .range(plotScale.range)

Plot

Tooltips with Plot

Looking under the hood at Tooltips with Plot

  • Noteworth items...
    • It works with any "Mark" in any chart created by Plot
    • Simply set a title attribute for any mark
    • Pass your chart to the addTooltips() function.
  • Under the hood...
    • There's not that much code -- about 150 lines, including spaces and comments