Published
Edited
Mar 29, 2021
1 fork
md`# Final Project Porposal`
md`## Project Idea`
md`## Team Members`
md`I will be working on this final project alone. `
md`## Goals and Objectives`
md`## Data`
md`## Related Literature`
md`## Planning Representation Techniques`
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")
iowa = FileAttachment("ia_covid19 (2).json").json()
counties = topojson.feature(iowa, iowa.objects.ia_covid19)
Covid_data = d3.csvParse(await FileAttachment("ia_covid19_county.csv").text(),({FIPS, Confirmed, Deaths, pop_est_20}) => [+FIPS, +Deaths/+pop_est_20 * 100])
Census_data = d3.csvParse(await FileAttachment("Census_Ia_Data-1 (1).csv").text(),({FIPS, POPESTIMATE, AGE85PLUS_TOT}) => [+FIPS, +AGE85PLUS_TOT/+POPESTIMATE * 100])
data2 = Object.assign(new Map(Covid_data), {title: "Percent of Population that Died from Coivd"})
data = Object.assign(new Map(Census_data), {title: "Percent Over 85"})
Percent_Over_85 = Array.from(Census_data.values(), d => d[1])
Percent_Deaths = Array.from(Covid_data.values(), d => d[1])
YlGnBu = [d3.color("#fee5d9"), d3.color("#fcae91"), d3.color("#fb6a4a"), d3.color("#cb181d")]
quantile = d3.scaleQuantile()
.domain(Percent_Deaths)
.range(YlGnBu)
quantile2 = d3.scaleQuantile()
.domain(Percent_Over_85)
.range(YlGnBu)
width = 975
height = 610
margin = 100
projection = d3.geoTransverseMercator().rotate([94,0]).fitExtent([[80, 80], [width, height]], counties);
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: quantile,
title: data2.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", 1)
.attr("fill", d => quantile(data2.get(+d.properties.FIPS)))
.attr("d", path)
.append("title")
.text(d => " Pecent of Population over 85: " + data2.get(+d.properties.FIPS));
return svg.node();
}
choropleth2 = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.attr("transform", "translate(360,20)")
.append(() =>
legend({
color: quantile2,
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", 1)
.attr("fill", d => quantile2(data.get(+d.properties.FIPS)))
.attr("d", path)
.append("title")
.text(d => " Pecent of Population over 85: " + 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.
