Public
Edited
Feb 23, 2023
pollingData = d3.csv("https://raw.githubusercontent.com/uwdata/vsup/master/examples/polling.csv")
pollingDataIndex = pollingData.reduce((a,r) => { a[r.State] = r; return a }, {})
pollingDataIndex['Alabama']['Hillary Clinton']
parsedPollingData = pollingData.map(function(d) {
const lead = d["Lead"]=="Tied" ? 0 : +d["Lead"];
return {
State: d["State"],
Hillary: parseFloat(d["Hillary Clinton"]),
Margin: parseFloat(d["Margin of error"]),
HillaryAhead: Math.sign(parseFloat(d["Hillary Clinton"]) - parseFloat(d["Donald Trump"])),
Lead: lead,
LeadRatio: lead / (d["Margin of error"]=="Tied" ? 0 : parseFloat(d["Margin of error"]))
};
})
parsedDataIndex = parsedPollingData.reduce((a,r) => { a[r.State] = r; return a }, {})
vl.markBar().data(parsedPollingData)
.encode(
vl.x().fieldN('State'),
vl.y().sum('Lead'),
vl.color().fieldN('State'),
vl.tooltip(['State','Hillary'])
).render()
vl.markBar().data(parsedPollingData)
.transform(
vl.calculate("datum.Lead-datum.Margin").as("Total")
)
.encode(
vl.x().fieldN('State'),
vl.y().sum('Total'),
vl.color().fieldN('State'),
vl.tooltip(['State','Total'])
).render()
width = 500
height = 500
chart = {
// create the SVG container
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
// draw the states
svg
.selectAll(".state")
.data(geojson.features.filter(state => state.properties.name !== "District of Columbia"))
.join("path")
.attr("class", "state")
.style("stroke", "white")
.attr("stateName", d => d.properties.name) // shows state name when HTML is inspected
.style("fill", "grey") // Update this line to use a color scale to make a choropleth map
.attr("d", path);
return svg.node();
}
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.
