Week 13 - A few more Idyll+d3 things, Starting SciViz

A few more things in Idyll and d3.js.

Downloads & Links

Idyll Files & Example pages

1. We’ll be building toward a webpage like this today using Idyll’s built-in components.
2. Last week, we got to this index.idyll file right here and this custom histogram component and we’ll start from there this week.
3. Full Markdown code for this week available right here.
4. We’ll also build a few histogram components like:
   • starting with this one
   • then this one
   • and finally this one

Further examples include:

• Website from Spring 2020 which focuses on using d3.js to do many plots since vega-lite was not working well at that time. The index.idyll file, along with example d3 components and a styles.css file for the final map are in this subdirectory from that course page here.

Data

Corgis

1. Corgis per country over time (corgs_per_country_over_time_columns_2020.csv)
2. Subset of full Corgi database (corgiData_countries_subset_2020.json)
   • Full dataset available here

This dataset is from the Cardigan Archives and scraped using Beautiful Soup in Python and further processed in Python into this form.

Optional reading list

1. d3.js docs

d3.js examples (v4)

1. Simple time-bar chart (we used this one to start with)
2. Grouped bar chart
3. Animated side-bar chart
4. Histogram, binning of data

Also, here is a slightly more in-depth explanation of path/ray tracing which we’ll talk about more in Week 15:

Materials

• Lecture 13: (view, source, present)