Published
Edited
May 4, 2020
md`# Assignment 3
Proportional Symbol Mapping
\nCOVID-19 Cases in New York Counties
\nGEOG 3540 - Geographic Visualization, Claire Fienup, University of Iowa`
proportionalSymbols = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]); //pass margins, width, height
svg.append("path")
.datum(topojson.feature(basepolygons, basepolygons.objects.NYCountiesWGS1984))
.attr("fill", "#ccc")
.attr("d", path_basemap);
svg.append("path")
.datum(topojson.mesh(basepolygons, basepolygons.objects.NYCountiesWGS1984, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", path_basemap);
const legend = svg.append("g")
.attr("fill", "#777")
.attr("transform", "translate(700,450)")
.attr("text-anchor", "middle")
.style("font", "9px sans-serif")
.selectAll("g")
.data([d3.max([...data.values()])/9, d3.max([...data.values()])])
.join("g");
legend.append("circle")
.attr("fill", "none")
.attr("stroke", "#ccc")
.attr("cy", d => -radius(d))
.attr("r", radius);
legend.append("text")
.attr("y", d => -2 * radius(d))
.attr("dy", "1.3em")
.text(format);
svg.append("g")
.attr("fill", "#8856a7")
.attr("fill-opacity", 0.7)
.attr("stroke", "#e0ecf4")
.attr("stroke-width", 0.5)
.selectAll("circle")
.data(points.features
.map(d => (d.value = data.get(d.properties.FIPS_CODE), d))
.sort((a, b) => b.value - a.value))
.join("circle")
.attr("transform", d => `translate(${path_points.centroid(d)})`)
.attr("r", d => radius(data.get(d.properties.FIPS_CODE)))
.append("title")
.text(d => " COVID-19 Cases: " + data.get(d.properties.FIPS_CODE));
return svg.node();
}
//Interpretation of Spatial Patterns
//There appears to be a strong spatial correlation with where COVID cases are seen. There is lots of clustering going on around the state. Counties with high COVID cases are surrounded by other counties that also have high COVID cases. The area around NYC is known to have lots of people and from the news we know they have high rates of COVID cases. The cases are smoothly changing from county to county.
height = 610
width = 800
path_points = d3.geoPath().projection(projection)
path_basemap = d3.geoPath().projection(projection)
projection = d3.geoTransverseMercator().rotate([94,0]).fitExtent([[80, 80], [width, height]], basemap_features);
basemap_features = topojson.feature(basepolygons, basepolygons.objects.NYCountiesWGS1984)
format = d3.format(".2s")
d3.max([...data.values()])
//proportional symbols, normalize by square root
radius = d3.scaleSqrt([0, d3.max([...data.values()])], [0,20])
data = Object.assign(new Map(csv_data))
csv_data = d3.csvParse(await FileAttachment("NYPOP.csv").text(),({FIPS_CODE, CaronavirusCases}) => [FIPS_CODE, +CaronavirusCases])
//import the point data (geojson)
points = FileAttachment("NYCentroids.geojson").json()
//import the polygon base map data
basepolygons = FileAttachment("NYCountiesWGS1984 (1).json").json()
simple = require("simple-statistics@7.0.7/dist/simple-statistics.min.js")
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.
