UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
data = d3.csv(
"https://raw.githubusercontent.com/info474-s17/m14-layouts/master/exercise-1/data/prepped_data.csv",
d3.autoType
)
render_data_table(data.slice(0, 10))
// Nest by region
nested = d3
.nest()
.key(d => d.region)
.entries(data)
// Transform into a hierarchy (but don't yet specify the sum() function)
hierarchy = d3.hierarchy({ values: nested }, d => d.values)
// 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 for the regions
color = d3
.scaleOrdinal()
.domain(nested.map(d => d.key))
.range(d3.schemeCategory10)
chart.update(metric)
basic_data = _.cloneDeep(hierarchy)
// Draw the visualization
basic_chart = {
make_treemap_layout(basic_data);
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", "red");
return svg.node();
}
appendix = md`## Appendix`
_ = require("lodash")
d3 = require("d3")
import { select } from "@jashkenas/inputs"
height = 500
import {
displayCaution,
render_data_table,
table_styles
} from "@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.
