Public
Edited
Feb 29, 2024
chart = {
let svgHeight = 100;
let svgWidth = 150;
const svg = d3.create('svg')
.attr("viewBox", [0, 0, svgWidth, svgHeight])
const projection = d3.geoIdentity().reflectY(true).fitHeight(svgHeight, cook_county_illinois_flows);
const pathGenerator = d3.geoPath(projection);
svg.append("g").selectAll("path")
.data(us_counties.features.filter(d => d.properties['STATEFP']=='17'))
.enter()
.append("path")
.attr("opacity", 0.5)
.attr("d", pathGenerator)
.attr("fill", "#d1ae54")
.attr("stroke", "black")
.attr("stroke-width", 0.5);
svg.append("g").selectAll("path")
.data(cook_county_illinois_flows.features)
.enter()
.append("path")
.attr("opacity", 1)
.attr("d", pathGenerator)
.attr("fill", (d) => d.properties["Total"] > 0 ? "blue":"orange")
return svg.node()
}
cook_county_illinois_flows = FileAttachment("cook_county_illinois_flows@5.geojson").json()
us_counties = FileAttachment("us_counties.geojson").json()
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.
