//import d3
d3 = require("d3@5")
//import legend from the d3 library
import {legend} from "@d3/color-legend"
simple = require("simple-statistics@7.0.7/dist/simple-statistics.min.js")
format = d => `${d}%`
//import topojson
topojson = require("topojson-client@3")
//import topojson file for this assignment
iowa = FileAttachment("ia_covid19 (2).json").json()
//get the features from the topojson file
counties = topojson.feature(iowa, iowa.objects.ia_covid19)
//import the csv file file that corresponds with the topojson file and pull the fields that will be used for the assignment out of the csv file. FIPS was used taken out of the CSV file to be used to join with the FIPS code that came from the topojson to map the data.
csv_data = d3.csvParse(await FileAttachment("ia_covid19_county@2.csv").text(),({FIPS, Confirmed, Deaths, pop_est_20}) => [+FIPS, +Deaths/+Confirmed * 100])
//assign object to map the csv_data. The FIPS field is used to join this data between the topojon and CSV
data = Object.assign(new Map(csv_data), {title: "Percent of Cases Resulting in Death"})
//collect the percent of cases resulting in deathes
Percent_Deaths_Case = Array.from(csv_data.values(), d => d[1])
//set the range of colors for the map. The colors were created on colorbrewer by selecting 4 classes and then the color I wanted and copying the values into the code below.
YlGnBu = [d3.color("#edf8e9"), d3.color("#bae4b3"), d3.color("#74c476"), d3.color("#238b45")]
//set the classification method as quantile. I choose to use qunatile because I wanted there to be an equal number of objects in each class.That way I could compare which counties had a high, medium, or low precentage of cases resulting in death. The data dispersion was fairly close so I did not have to deal with many cases of extreme outliers
//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()
quantile = d3.scaleQuantile()
.domain(Percent_Deaths_Case)
.range(YlGnBu)
//color = d3.scaleThreshold()
//.domain(naturalbreaks)
//.range(YlGnBu)
//set width for canvas
width = 975
//set height for canvas
height = 610
//set margin for canvas
margin = 100
//Rotate the map sets the longitude of origin for our UTM Zone 15N 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)
//projection = d3.geoAlbers().fitExtent([[margin, margin], [width - margin, height - margin]], counties)
//projection = d3.geoMercator().fitExtent([[margin, margin], [width - margin, height - margin]], counties)
//Using a path generator to project geometry onto the map
path = d3.geoPath().projection(projection);
//There are some spatial patterns in the distribution of the data. You will notice that central Iowa has several counties that are in the lowest class. It is possible that the populations in these places are somewhat isolated from outside communities making it hard for covid to spread to these areas. Another observation that can be made is that a lot of counties that are near the state borders seem to be in the higher classes. This could be because there is more movement through these counties with people going across the borders.
//below is the code create a choropleth map. svg allows you to display an image on the observable without losing any image quality.
choropleth = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
//below is the code to create a legend for the choropleth map. color sets the colors in the legend to quantile which is the name for the colors used for the choropleth. the title line of code is where the title of the legend is set. width is the size of the the legend
svg.append("g")
.attr("transform", "translate(360,20)")
.append(() =>
legend({
color: quantile,
title: data.title,
width: 260,
tickFormat: ".1f"
})
);
//this below the .join("path") line of code is the code for the width and color for the borderlines in the map. the .attr("stroke", "black") sets the color and "stroke-width") sets the width.
svg.append("g")
.selectAll("path")
.data(counties.features)
.join("path")
.attr("stroke", "black")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 1)
// .attr("fill", function(d){
// console.log(color(data.get(d.properties.FIPS)[0]))
// return color(data.get(d.properties.FIPS)[0]);
// })
//below is how you set it to display the data when you hover your mouse over it. the .text line tells what text to have appear when you hozer over the county.
.attr("fill", d => quantile(data.get(+d.properties.FIPS)))
.attr("d", path)
.append("title")
.text(d => " Pecent of Cases that Resulted in Death: " + data.get(+d.properties.FIPS));
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.
