Published
Edited
Apr 12, 2020
/* Spatial pattern
Although there is an overall decrease in the rate of children with elevated blood lead level (identified from the original data), it is obvious that there are areas where the serious situation persists. One is the middle western part of Chicago, the other one is in middle southern part. However, there is no community but only one that had high rate of lead poisoning in 1999 turning low in 2013, indicating insufficient effort on the children lead poisoning situation
*/
labels = ["low", "middle", "high"]
n = Math.floor(Math.sqrt(colors.length))
x = d3.scaleQuantile(Array.from(data.values(), d => d[0]), d3.range(n))
y = d3.scaleQuantile(Array.from(data.values(), d => d[1]), d3.range(n))
path = d3.geoPath().projection(projection)
neighborhood = FileAttachment("contour.json").json()
neighborhood_features = topojson.feature(neighborhood, neighborhood.objects.contour)
//Rotate the map sets the longitude of origin for our UTM projection.
projection = d3.geoTransverseMercator().rotate([87,0]).fitExtent([[10, 10], [width, height]], neighborhood_features);
BLLL = d3.csvParse(await FileAttachment("Elevated Blood Lead Level Rate.csv").text(),({FIPS, R1999, R2013}) => [FIPS,R1999,R2013])
data = Object.assign(new Map(d3.csvParse(await FileAttachment("Elevated Blood Lead Level Rate.csv").text(), ({FIPS, R1999,R2013}) => [FIPS, [R1999,R2013]])), {title: ["1999", "2013"]})
//data = Object.assign(new Map(BLLL), {title: "Percent Children Screened with Elevated Blood Lead Level in Chicago, 1999 and 2013","2013"})
idAttribute = "FIPS"
height = 610
width = 875
legend = () => {
const k = 24;
const arrow = DOM.uid();
return svg`<g font-family=sans-serif font-size=10>
<g transform="translate(-${k * n / 2},-${k * n / 2}) rotate(-45 ${k * n / 2},${k * n / 2})">
<marker id="${arrow.id}" markerHeight=10 markerWidth=10 refX=6 refY=3 orient=auto>
<path d="M0,0L9,3L0,6Z" />
</marker>
${d3.cross(d3.range(n), d3.range(n)).map(([i, j]) => svg`<rect width=${k} height=${k} x=${i * k} y=${(n - 1 - j) * k} fill=${colors[j * n + i]}>
<title>${data.title[0]}${labels[j] && ` (${labels[j]})`}
${data.title[1]}${labels[i] && ` (${labels[i]})`}</title>
</rect>`)}
<line marker-end="${arrow}" x1=0 x2=${n * k} y1=${n * k} y2=${n * k} stroke=black stroke-width=1.5 />
<line marker-end="${arrow}" y2=0 y1=${n * k} stroke=black stroke-width=1.5 />
<text font-weight="bold" dy="0.71em" transform="rotate(90) translate(${n / 2 * k},6)" text-anchor="middle">${data.title[0]}</text>
<text font-weight="bold" dy="0.71em" transform="translate(${n / 2 * k},${n * k + 6})" text-anchor="middle">${data.title[1]}</text>
</g>
</g>`;
}
color = {
return value => {
if (!value) return "#ccc";
let [a, b] = value;
return colors[y(b) + x(a) * n];
};
}
formatNum = d3.format(".1f")
format = (value) => {
if (!value) return "N/A";
let [a, b] = value;
return `${a} ${data.title[0]}${labels[x(a)] && ` (${labels[x(a)]})`}
${formatNum(b)} ${data.title[1]}${labels[y(b)] && ` (${labels[y(b)]})`}`;
}
topojson = require("topojson-client@3")
d3 = require("d3@5")
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.
