UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
chart = {
// Define variables for this cell (one for each visual element you'll create)
let svg, xAxis, yAxis, title;
// If this is the first time rendering the cell, create and position the svg, axes, and title
if (!this) {
//Create the svg
svg = d3
.create("svg")
.attr("width", width)
.attr("height", height);
// Append the x axis
xAxis = svg
.append("g")
.attr("class", "xaxis")
.attr("transform", `translate(0,${height - margin.bottom})`);
// Append the y axis
yAxis = svg
.append("g")
.attr("class", "yaxis")
.attr("transform", `translate(${margin.left},0)`);
// Append the title
title = svg
.append("text")
.attr("class", "chart_title")
.attr("transform", `translate(${width / 2},15)`)
.style("text-anchor", "middle");
}
// Otherwise, define the svg as the cell's value and select the axes and title
else {
svg = d3.select(this);
xAxis = svg.select(".xaxis");
yAxis = svg.select(".yaxis");
title = svg.select(".chart_title");
}
// Update the axes
xAxis
.transition()
.duration(500)
.call(d3.axisBottom(xScale).tickFormat(d3.format(".0%")));
yAxis.call(d3.axisLeft(yScale).tickFormat(customTickFormatter));
// Update the title
title.text(`Percentage of people in ${state} living in each income bracket`);
// Join the data to a selection of rectangles and transition their attributes
const rects = svg.selectAll("rect").data(data, d => d.group);
// Enter // update // exit as necessary
// See: https://observablehq.com/@d3/selection-join
rects.join(
enter =>
enter
.append("rect")
.attr("x", xScale.range()[0])
.attr("y", d => yScale(d.group))
.attr("height", d => yScale.bandwidth())
.attr("width", d => {
return xScale(d.pct) - xScale.range()[0];
}),
update =>
update
.transition()
.duration(500)
.delay((d, i) => i * 200)
.attr("width", d => xScale(d.pct) - xScale.range()[0]),
exit => exit.remove()
);
return svg.node();
}
xScale = d3
.scaleLinear()
.range([margin.left, width - margin.right])
.domain([0, d3.max(data.map(d => d.pct))])
yScale = {
// Sort the income groups by increasing value for the y scale
let domain = d3
.map(all_data, d => d.group)
.keys()
.sort((a, b) => {
let valA = a.split(' ')[0].replace(/\+|</gi, () => "");
let valB = b.split(' ')[0].replace(/\+|</gi, () => "");
return +valA - +valB;
});
return d3
.scaleBand()
.paddingInner(0.25)
.paddingOuter(0.5)
.rangeRound([height - margin.bottom, margin.top])
.domain(domain);
}
// Filter down your data using the `state` variable
data = all_data.filter(d => d.name == state)
all_data = vega_datasets['income.json']() // load and parse cars data
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.
