The avatar for @info474
Spring 2020 Info Vis
UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
Published
Edited
Oct 28, 2020
Fork of Lab 5 - Importing Notebooks With Custom Data (Answers)
•
1 fork
1 star
3
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// what D3 function could we use to make our data look like the data above? Answer: d3.rollup
Insert cell
Insert cell
Insert cell
import { nest } from "@bayre/unrolling-a-d3-rollup"
Insert cell
md`Then, we can count the number of observations by type by using \`d3.rollup()\`.`
Insert cell
// Count the number of observations by type 1 and type 2
nested_map = d3.rollup(
data,
v => v.length, // reducer function -- this is essentially a count() function
d => d['Type 1'], // first key to group by
d => d['Type 2'] || "none" // second key to group by
)
Insert cell
Insert cell
formatted_data = ({ name: "Test", children: nest(nested_map) })
Insert cell
Insert cell
import { chart } with { formatted_data as data } from '@d3/sunburst'
Insert cell
chart // the "null" just means that pokemon only has 1 type
Insert cell
Insert cell
d3 = require('d3@6')
Insert cell
import {
displayCaution,
code_styles,
renderDataTable
} from '@info474/utilities'
Insert cell
code_styles
Insert cell
data = d3.csv(
'https://gist.githubusercontent.com/armgilles/194bcff35001e7eb53a2a8b441e8b2c6/raw/92200bc0a673d5ce2110aaad4544ed6c4010f687/pokemon.csv',
d3.autoType
)
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more