Published
Edited
Oct 8, 2020
3 forks
2 stars
{
const width = 920;
const height = 560;
const projection = d3.geoAlbersUsa().fitSize([width, height], states);
const path = d3.geoPath().projection(projection);
const svg = d3.create("svg").attr("viewBox", [0, 0, 975, 610]);
svg
.selectAll(".state")
.data(states.features)
.join("path")
.attr("d", path)
.attr("class", "state")
.style("fill", function(d) {
//Get data value
const value = stateHouseholdIncome.get(d.properties.NAME);
if (value) {
//If value exists…
return colorScale(value);
} else {
//If value is undefined…
return "#ccc";
}
})
//.attr("fill", d => colorScale(d => +d.count.split(",").join("")))
.attr("fill-opacity", 1)
.attr("stroke", "black");
svg.append("g")
.attr("transform", "translate(520,-5)")
.append(() => legend({color, title: "Houshold Income, 2017, thousands, $", width: 340}));
// const tooltip = svg.append("g");
// svg
// .selectAll(".state")
// .on("touchmove mousemove", function(event, d) {
// tooltip.call(
// callout,
// `${stateHouseholdIncome.get(d.properties.NAME)}
// ${d.properties.NAME}, ${data.get(d.value)}`
// );
// tooltip.attr("transform", `translate(${d3.pointer(event, this)})`);
// d3.select(this)
// .attr("stroke", "gray")
// .raise();
// })
// .on("touchend mouseleave", function() {
// tooltip.call(callout, null);
// d3.select(this)
// .attr("stroke", null)
// .lower();
// });
return svg.node();
}
states = await FileAttachment("usState.json").json()
data = d3
.csvParse(await FileAttachment("household_2017.csv").text(), d3.autoType)
.map(d => ({
...d,
value: +d.value.split(",").join("")
}))
stateHouseholdIncome = new Map(data.map(d => [d.state, d.value]))
min = d3.min(data, d => d.value)
//max = d3.format(",.2f")(d3.max(data, d => d.value))
max = d3.max(data, d => d.value)
color = d3.scaleQuantize([43434, 83385], d3.schemePurples[9])
d3 = require('d3@6')
import {legend} from "@d3/color-legend"
import { callout } from "@d3/line-chart-with-tooltip"
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.
