Published
Edited
Nov 26, 2019
hoverStyle = html`<style>
.ZCTA:hover {
opacity: 0.6;
}
</style>`
{
d3.select(chart)
.selectAll(".ZCTA")
.transition()
.attr(
"fill",
d => prevScale(prev_by_ZCTA.get(d.properties.ZCTA5CE10)) || "white"
)
.duration(750)
.select("title")
.text(
d =>
`${d.properties.ZCTA5CE10}: ${prev_by_ZCTA.get(
d.properties.ZCTA5CE10
) || '-'}\%`
);
d3.select(chart)
.select(".legend")
.selectAll("rect")
.transition(750)
.attr("fill", (d, i) => colorSchemeMap.get(colorScheme)[i]);
// d3.select(chart)
// .select(".legend")
// .selectAll("text")
// .last()
// .transition()
// .text(`${ageGroup} Prevalence of ${classification} (%)`);
}
{
d3.selection.prototype.first = function() {
return d3.select(this.nodes()[0]);
};
d3.selection.prototype.last = function() {
return d3.select(this.nodes()[this.size() - 1]);
};
}
function ZCTA_title(d) {
return `${d.properties.ZCTA5CE10}: ${
prev_by_ZCTA.get(d.properties.ZCTA5CE10)
? `${prev_by_ZCTA.get(d.properties.ZCTA5CE10)}%`
: "Not available"
}`;
}
projection = d3
.geoMercator()
.center([1.6, 37.95])
.rotate([80, 0])
.scale(21000)
.translate([900 / 2, 610 / 2])
path = d3.geoPath().projection(projection)
TJHD_ZCTAs = d3.json("https://api.myjson.com/bins/jidjj")
adult_data = d3.csv(
"https://gist.githubusercontent.com/bjl2n/fe28782b53917eb9aabe7f279d5e0eea/raw"
)
child_data = d3.csv(
"https://gist.githubusercontent.com/bjl2n/6ef632a91a68feebe95155c4ee819c42/raw"
)
prev_by_ZCTA = {
if (ageGroup === "Child") {
return new Map(
child_data.map(d => [d.ZCTA, d3.format(".0f")(d[classification] * 100)])
);
} else {
return new Map(
adult_data.map(d => [d.ZCTA, d3.format(".0f")(d[classification] * 100)])
);
}
}
prevScale = d3.scaleThreshold([15, 25, 35, 45], colorSchemeMap.get(colorScheme))
colorSchemeMap = new Map([
['BuGn', ['#edf8fb', '#b2e2e2', '#66c2a4', '#2ca25f', '#006d2c']],
['BuPu', ['#edf8fb', '#b3cde3', '#8c96c6', '#8856a7', '#810f7c']],
['GnBu', ['#f0f9e8', '#bae4bc', '#7bccc4', '#43a2ca', '#0868ac']],
['OrRd', ['#fef0d9', '#fdcc8a', '#fc8d59', '#e34a33', '#b30000']],
['PuBu', ['#f1eef6', '#bdc9e1', '#74a9cf', '#2b8cbe', '#045a8d']],
['PuBuGn', ['#f6eff7', '#bdc9e1', '#67a9cf', '#1c9099', '#016c59']],
['RdPu', ['#feebe2', '#fbb4b9', '#f768a1', '#c51b8a', '#7a0177']],
['YlOrRd', ['#ffffb2', '#fecc5c', '#fd8d3c', '#f03b20', '#bd0026']],
['YlGnBu', ['#ffffcc', '#a1dab4', '#41b6c4', '#2c7fb8', '#253494']]
])
topojson = require("topojson-client@3")
d3 = require("d3@5")
import { legend } from "@d3/color-legend"
import { select, radio } from "@jashkenas/inputs"
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.
