md`# Assignment 2 [GEOG 3540]
Children with Elevated blood lead level in Chicago, 1999`
d3 = require("d3@5")
import {legend} from "@d3/color-legend"
simple = require("simple-statistics@7.0.7/dist/simple-statistics.min.js")
format = d => `${d}%`
topojson = require("topojson-client@3")
neighborhood = FileAttachment("contour.json").json()
neighborhood_features = topojson.feature(neighborhood, neighborhood.objects.contour)
BLLL = d3.csvParse(await FileAttachment("Elevated Blood Lead Level Rate-1@1.csv").text(),({FIPS, Screened, Elevated}) => [FIPS, Elevated/Screened*100])
data = Object.assign(new Map(BLLL), {title: "Percent Children Screened with Elevated Blood Lead Level in Chicago, 1999"})
rate1999 = Array.from(BLLL.values(), d => d[1])
Redcolor = [d3.color('#fef0d9'), d3.color('#fdcc8a'), d3.color('#fc8d59'), d3.color('#e34a33'),d3.color('#b30000')]
naturalbreaks = simple.ckmeans(rate1999, Redcolor.length).map(v => v.pop())
//more information on sequential scales: https://observablehq.com/@d3/sequential-scales
// color = d3.scaleSequentialQuantile([...data.values()], d3.interpolateBlues)
// color = d3.scaleQuantile()
// .domain(med_age)
// .range()
//color = d3.scaleQuantile()
//.domain(rate1999) // pass the whole dataset to a scaleQuantile’s domain
//.range([d3.color("#a1dab4"), d3.color("#41b6c4"), d3.color("#2c7fb8"),d3.color("#253494")])
color = d3.scaleThreshold()
.domain(naturalbreaks)
.range(Redcolor)
width = 975
height = 800
margin = 100
//Rotate the map sets the longitude of origin for our Albers projection.
//projection = d3.geoTransverseMercator().rotate([94,0]).fitExtent([[80, 80], [width, height]], counties);
//d3 reference for projections: https://github.com/d3/d3-geo/blob/master/README.md
//use the following url for specific projection settings: https://github.com/veltman/d3-stateplane
//Use this code to set up the map projection (if different than geographic projection)
//margin = 100
projection = d3.geoMercator().fitExtent([[margin, margin], [width - margin, height - margin]], neighborhood_features)
//IMPORTANT import your data as WGS84 and use d3 function to convert that to whatever projection you want.
//projection = d3.geoAlbers().fitExtent([[margin, margin], [width - margin, height - margin]], counties)
//Using a path generator to project geometry onto the map
path = d3.geoPath().projection(projection);
choropleth = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.attr("transform", "translate(360,20)")
.append(() =>
legend({
color: color,
title: data.title,
width: 300,
tickFormat: ".1f"
})
);
svg.append("g")
.selectAll("path")
.data(neighborhood_features.features)
.join("path")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("stroke-width",1)
.attr("fill",function(d){
console.log(color(data.get(d.properties.community)))
return color(data.get(d.properties.community));
})
//.attr("fill", d => [color(data.get(d.properties.FIPS))])
.attr("d", path)
.append("title")
.text(d => "Percent Elevated Blood Lead Level: " + data.get(d.properties.community));
//.attr("fill", d=> color(data.get(d.properties.FIPS)[0]))
return svg.node();
}
//Interpretation of patterns
//There seem to be two clustered areas of high rate of children with elevated blood lead level. One is in the middle western area, the other one is in middle southern area. Besides that, the northeastern part of Chicago seems to have low rate of elevated blood lead level.
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.
