Published
Edited
May 4, 2020
1 star
md`# Assingment 2-Choropleth Mapping [GEOG 3540]
Population Density in New York Counties, Source: [Census 2010]`
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")
NYstate = FileAttachment("NYCountiesWGS1984 (1).json").json()
counties = topojson.feature(NYstate, NYstate.objects.NYCountiesWGS1984)
csv_data = d3.csvParse(await FileAttachment("NYPOP-1@2.csv").text(),({FIPS_CODE, Population, Area}) => [FIPS_CODE, [+Population/+Area]])
data = Object.assign(new Map(csv_data), {title: "Population Density"})
pop_density = Array.from(csv_data.values(), d => d[1][0])
RdPu = [d3.color("#feebe2"), d3.color("#fbb4b9"), d3.color("#f768a1"), d3.color("#c51b8a"), d3.color("#7a0177")]
naturalbreaks = simple.ckmeans(pop_density, RdPu.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.scaleThreshold()
.domain(naturalbreaks)
.range(RdPu)
width = 800
height = 610
margin=100
//Rotate the map sets the longitude of origin for our UTM projection.
projection = d3.geoTransverseMercator().rotate([94,0]).fitExtent([[80, 80], [width, height]], counties);
//Using a path generator to project geometry onto the map
path = d3.geoPath().projection(projection);
//Spatial Interpretation of Patterns
//There is a positive correlation of population density between counties. There is also clustering in the area around NYC. The counties with high population density smoothly change to counties with lower population density. It would be interestig to see how a different classificaiton changes any patterns.
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.attr("transform", "translate(320,20)")
.append(() =>
legend({
color: color,
title: data.title,
width: 260,
tickFormat: ".1f"
})
);
svg.append("g")
.selectAll("path")
.data(counties.features)
.join("path")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 2)
.attr("fill", d => color(data.get(d.properties.FIPS_CODE)[0]))
.attr("d", path)
.append("title")
.text(d => " Population Density: " + data.get(d.properties.FIPS_CODE));
return svg.node();
}
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.
