UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
map = {
const svg = d3.create("svg").attr("viewBox", [0, 0, 975, 710]);
const g = svg.append("g");
const statesvg = svg
.append("g")
.selectAll("path")
.data(topojson.feature(shapefile, shapefile.objects.states).features)
.join("path")
.attr("stroke", "black")
.attr("fill", d => color(getStateNumber(d.properties.name)))
.attr("d", path)
.append("title")
.on("mouseover", function() {
d3.select(this)
.attr("stroke", "#000")
.raise();
})
.on("mouseout", function() {
d3.select(this)
.attr("stroke", null)
.lower();
})
.text(d => `${d.properties.name}: ${getStateNumber(d.properties.name)}`);
svg
.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", path);
const labels = svg
.selectAll("text")
.data(topojson.feature(us, us.objects.states).features)
.join("text")
.text(d => getStateNumber(d.properties.name))
.style("font-size", "12px")
.attr("y", d => path.centroid(d)[1])
.attr("x", d => path.centroid(d)[0]);
svg
.append("g")
.attr("transform", "translate(610,10)")
.append(() => legend({ color, title: "Supporters", width: 260 }));
return svg.node();
}
import { shapefile } from '@uw-info474/election-map-complete'
margin = ({top: 20, right: 30, bottom: 30, left: 40})
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.
