Public
Edited
May 18
Fork of Choropleth
1 fork
1 star
Insert cell
Insert cell
chart = {
const width = 960;
const height = 600;
const projection = d3.geoConicConformal()
.scale(600)
.center([-100, 50])
.translate([-250, 240])
.rotate([110, 0, 0]);
const path = d3.geoPath().projection(projection);

const svg = d3.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto");

svg.append("g")
.attr("transform", "translate(600,40)")
.call(legend);

svg.append("g")
.selectAll("path")
.data(topojson.feature(feds, feds.objects.fed).features)
.join("path")
.attr("fill", d => color(candata.get(d.properties.FEDUID)))
.attr("d", path)
//.append("title")
// .text(d => format(data.get(d.id)));

// 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);

return svg.node();
}
Insert cell
legend = g => {
const x = d3.scaleLinear()
.domain(d3.extent(color.domain()))
.rangeRound([0, 260]);

g.selectAll("rect")
.data(color.range().map(d => color.invertExtent(d)))
.join("rect")
.attr("height", 8)
.attr("x", d => x(d[0]))
.attr("width", d => x(d[1]) - x(d[0]))
.attr("fill", d => color(d[0]));

g.append("text")
.attr("class", "caption")
.attr("x", x.range()[0])
.attr("y", -6)
.attr("fill", "#000")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(candata.title);

g.call(d3.axisBottom(x)
.tickSize(13)
.tickFormat(format)
.tickValues(color.range().slice(1).map(d => color.invertExtent(d)[0])))
.select(".domain")
.remove();
}
Insert cell
color = d3.scaleQuantize()
.domain([3, 21])
.range(d3.schemeReds[9])
Insert cell
format = d3.format("")
Insert cell
feds = d3.json("https://gist.githubusercontent.com/mbarison/f4196a276cb85a7e4ff2495911c93380/raw/f545dc5720e3c5ec907325336c6f28ee94afe472/fed_small.topojson")
Insert cell
topojson = require("topojson-client@3")
Insert cell
d3 = require("d3@^5.8")
Insert cell
candata = Object.assign(new Map(await d3.csv("https://gist.githubusercontent.com/mbarison/8ab5b4ef36ade1c6cfd05fb2a680d8f0/raw/4a54f7934ceab051a61fda996c8d58da72693fb8/canada_fed_unemp.csv", ({Geo, Unemp}) => [Geo, +Unemp])), {title: "Unemployment rate (%)"})

Insert cell

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.
Learn more