UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
Published
Edited
Oct 27, 2020
2 forks
1 star
// what D3 function could we use to make our data look like the data above? Answer: d3.group
// Give each object in the "data" array a field called "value." "value" should be 1 for every object
data.forEach(d => (d.value = 1)) // when we add up values it'll be the length of the array
// note: just need to run shift enter on this cell to get chart to work
nested_map = d3.rollup(
data,
v => d3.sum(v, v => v.value),
d => d['Type 1'],
d => d['Type 2'] || "none"
)
nested_array = Array.from(nested_map, ([type1, type2]) => ({
name: type1,
children: Array.from(type2, ([type2, count]) => ({
name: type2,
value: count
}))
}))
// Use d3.nest() to nest each element inside of our nested array. Use a key of "Type 2" Use .map to rename the values to match our data identified above
nested_array
// make a new variable called "formattedData." It should be an Object with two fields: "name" and "children" Assign "name" a value of "Types" For the "children" field assign it our nested data
formattedData = ({ name: 'Types', children: nested_array })
// use import to import "chart" from '@d3/subburst' and use thw "with" statement to replace the notebook's "data" variable with our "formattedData" varaible
import { chart } with { formattedData as data } from '@d3/sunburst'
chart // the "null" just means that pokemon only has 1 type
d3 = require('d3@6')
import {
displayCaution,
code_styles,
renderDataTable
} from '@info474/utilities'
code_styles
data = d3.csv(
'https://gist.githubusercontent.com/armgilles/194bcff35001e7eb53a2a8b441e8b2c6/raw/92200bc0a673d5ce2110aaad4544ed6c4010f687/pokemon.csv',
d3.autoType
)
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.
