UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
render_data_table(data)
// Group by region
grouped = d3.group(data, d => d.region)
hierarchy2 = d3.hierarchy(grouped)
// Transform into a hierarchy (but don't yet specify the sum() function)
hierarchy = d3.hierarchy(grouped)
// Write a function that can compute treemap layout
make_treemap_layout = d3
.treemap()
.round(true)
.tile(d3.treemapResquarify)
.size([width, height])
// Make a color scale, setting the regions as the colors
color = d3
.scaleOrdinal()
.domain([...grouped.keys()])
.range(d3.schemeCategory10)
make_treemap_layout(hierarchy2)
// Draw the visualization
basic_chart = {
make_treemap_layout(hierarchy.sum(d => d.life_expectancy));
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height);
svg
.selectAll("rect")
.data(hierarchy.leaves())
.join("rect")
.attr("x", d => d.x0)
.attr("width", d => d.x1 - d.x0)
.attr("y", d => d.y0)
.attr("height", d => d.y1 - d.y0)
.style("stroke", "white")
.style("fill", d => color(d.parent.data[0]))
return svg.node();
}
// Draw the visualization
chart = {
// Create or select the svg
let svg;
if (!this) {
svg = d3
.create("svg")
.attr("width", width)
.attr("height", height);
} else {
svg = d3.select(this);
}
// Compute the layout with the selected metric
make_treemap_layout(hierarchy.sum(d => d[metric]));
// Perform a data join on the `g` elements (that contain the rectangles and their labels)
svg
.selectAll("g")
.data(hierarchy.leaves())
.join(enter => {
// For entering elements, append the text and rectangle, position in the middle of the svg
const gs = enter
.append("g")
.attr("transform", d => `translate(${width / 2}, ${height / 2})`);
gs.append("text")
.text(d => d.data.country_code)
.style("font-size", "10px")
.attr("y", 10);
gs.append("rect")
.style("stroke", "white")
.style("fill", d => color(d.data.region))
.style("fill-opacity", .5);
return gs;
})
// transition the position of the g elements
.transition()
.ease(d3.easeBounceOut) //uncomment for a bouncing transition
.duration(1500)
.delay((d, i) => i * 20)
.attr("transform", d => `translate(${d.x0}, ${d.y0})`)
// and transition the size of the rectangles inside of them
.selectAll("rect")
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0);
return svg.node();
}
appendix = md`## Appendix`
_ = require("lodash")
d3 = require("d3")
import { select } from "@jashkenas/inputs"
height = 500
import {
render_data_table,
group_notebook_instructions,
table_styles
} from "@uw-info474/utilities"
table_styles
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.
