UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
// Keep track of the section so that updates only happen when the section changes
mutable currentSection = 0
chart = {
// Overall container
const container = d3.create("div").attr("class", "scroll-container");
// Container for the narrative section
const narrativeContainer = container
.append("div")
.attr("class", "narrative-container");
// Narrative section (holds the text on the left)
const narrative = narrativeContainer.append("div").attr("class", "narrative");
// Add text
narrative
.selectAll(".section")
.data(descriptions)
.join("div")
.attr("class", "section")
.append("h1")
.text(d => d);
// Visualization container
const vis = container.append("div").attr("class", "vis-container");
const svg = vis
.append("svg")
.attr("width", chartWidth)
.attr("height", fullHeight);
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
// Update function (just switches the colors)
const update = section => {
// If the section hasn't changed, don't do anything!
if (section === mutable currentSection) return;
mutable currentSection = section; // If this line of code is here, the cell re-renders
// Filter down based on month
const min_date = x.domain()[0];
const max_date = new Date(min_date.setMonth(min_date.getMonth() + section));
const curr_data = ny_data.filter(d => d.x < max_date);
const points = svg
.selectAll("circle")
.data(curr_data)
.join("circle")
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("r", 3);
};
// Add the scrolling listener
narrativeContainer.on("scroll", () => {
// Compute section
const totalHeight = narrativeContainer.node().getBoundingClientRect().top;
const offset = narrative.node().getBoundingClientRect().y;
const section = Math.floor((totalHeight - offset + 10) / sectionHeight);
update(section);
});
return container.node();
}
md`## Scales and axes`
x = d3
.scaleTime()
.range([margin.left, chartWidth - margin.right])
.domain(d3.extent(ny_data, d => d.x))
y = d3
.scaleLinear()
.range([fullHeight - margin.bottom, margin.top])
.domain(d3.extent(ny_data, d => d.y))
xAxis = g =>
g
.attr("transform", `translate(0,${fullHeight - margin.bottom})`)
.call(d3.axisBottom(x))
yAxis = g =>
g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y))
settings = md`## Settings`
// Descriptions for each section
descriptions = [
"COVID in New York",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November"
]
fullHeight = 400
sectionHeight = 200
narrativeWidth = 200
margin = ({ top: 100, left: 100, bottom: 50, right: 50 })
chartWidth = width - narrativeWidth - 20
import { formatted_data } from "@mkfreeman/recreating-nyt-u-s-cases-map"
ny_data = formatted_data
.filter(d => d.state_full == "New York")[0]
.data.map(d => ({ x: new Date(d.key), y: d.value }))
styles = html`<style>
.scroll-container {
width:${width}px;
height:${fullHeight}px;
}
.narrative-container {
height:${fullHeight}px;
overflow-y:scroll;
float:left;
}
.narrative {
width:${narrativeWidth}px;
}
.vis-container {
height:${fullHeight}px;
width:${width - narrativeWidth - 20}px;
float:right;
}
.section {
height: ${sectionHeight}px;
}
.section:last-of-type {
height:${fullHeight}px;
}
</style>`
d3 = require("d3")
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.
