Published
Edited
May 1, 2019
2 forks
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
chart = {
const width = 960;
const height = 600;
const projection = d3.geoAlbersUsa().scale(1200).translate([width/2, height/2])
const path = d3.geoPath().projection(projection)
const svg = d3.create("svg")
.attr("viewBox", `0 0 ${width} ${height}`)
.style("width", "100%")
.style("height", "auto")
const legend = svg.append("g")
.attr("transform", "translate(600,40)")
.call(legendMaker);

const counties = svg.append("g")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.join("path")
.attr("fill", d => color(data.get(d.id)) != null ? color(data.get(d.id)) : "white")
.attr("stroke", "lightgrey")
.attr("d", path)
.append("title")
.text(d => `${data.get(d.id)}%`);

const states = svg.append("path")
.datum(topojson.mesh(us, us.objects.states))
.attr("fill", "none")
.attr("stroke", "grey")
.attr("stroke-linejoin", "round")
.attr("d", path);
return svg.node();
}
Insert cell
legendMaker = 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("x", x.range()[0])
.attr("y", -6)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text("Unemployment Rate");

g.call(
d3.axisBottom(x)
.tickValues(getTickValues(color))
)
.select(".domain")
.remove();
}
Insert cell
Insert cell
schemes = [
{
name: "RdBu",
colors: [
"#e8e8e8", "#e4acac", "#c85a5a",
"#b0d5df", "#ad9ea5", "#985356",
"#64acbe", "#627f8c", "#574249"
]
},
{
name: "BuPu",
colors: [
"#e8e8e8", "#ace4e4", "#5ac8c8",
"#dfb0d6", "#a5add3", "#5698b9",
"#be64ac", "#8c62aa", "#3b4994"
]
},
{
name: "GnBu",
colors: [
"#e8e8e8", "#b5c0da", "#6c83b5",
"#b8d6be", "#90b2b3", "#567994",
"#73ae80", "#5a9178", "#2a5a5b"
]
},
{
name: "PuOr",
colors: [
"#e8e8e8", "#e4d9ac", "#c8b35a",
"#cbb8d7", "#c8ada0", "#af8e53",
"#9972af", "#976b82", "#804d36"
]
},
{
name: "W2O",
colors: [
"#2FA4DD", "#002B3F", "#F15922",
"#00C4AD", "#BFA87F", "#686060",
"#FC3C3C"
]
}
]
Insert cell
color = d3.scaleQuantize(extent, palette)

// color = d3.scaleLinear()
// .domain(extent )
// .range(['white', 'red'])
// .interpolate(d3.interpolate);
// ["red", "blue", "green"])
// d3.schemeReds[9])
// color = d3.scaleLinear(extent, d3.interpolateBrBG)
// ["red", "blue", "green"])
// d3.schemeReds[9])


Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = new Map(dataRaw.map(i => [+i.id, +i.rate]))
Insert cell
Insert cell
extent = d3.extent([...data.values()])
// extent = [0, 10]
Insert cell
Insert cell
getTickValues = color => {
const tickValues = color.range().map(d => color.invertExtent(d)[0])
const lastColor = color.range().slice(-1)[0]
const lastTick = color.invertExtent(lastColor)[1]
tickValues.push(lastTick)
return tickValues
}
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