md`# Second Exercise on Observable: Classification and Colors`
//import d3
d3 = require("d3@5")
// import topojson
topojson = require("topojson-client@3")
//import the topojson file ia_covid19_county.json
Covid = FileAttachment("ia_covid19.json").json()
//get the features from the topojson file
county_features = topojson.feature(Covid, Covid.objects.ia_covid19)
//pull the fields that will be used for the assignment out of the csv file
csv_data = d3.csvParse(await FileAttachment("ia_covid19_county.csv").text(),({FIPS, Confirmed, pop_est_20}) => [FIPS, [+Confirmed, +Confirmed/+pop_est_20]])
//collect the case confirmed percentage with a filter that pevents looking at data where is divided by zero
CaseConfirmedpct = Array.from(csv_data.values(), d => d[1][1]).filter(d => d <= 1)
data = Object.assign(new Map(csv_data), {title: ["Percentage of Confirmed Covid Cases from total County Population"]})
md`# Linear Scale (Unclassed)`
//all of the colors used for this assignment came from colorbrewer.org. To select colors you go to the top and there is a pull down menu for the number of classes that you want to use, for this assignment I just left the number of classes at 3 but if you want to use more you use this menu to select the number of classes that you want. After you select the number of classes you choose which hue you would like to use for your map. Below that is an export section. There is a drop down menu for if you want to export HEX, RGB, or CMYK. For this assignment I used HEX. To export you copy the value next to each color that you want to where ever you want to use it.
//the code below creates a Linear Scale or Unclassified map on observable. .domain is how you select the data that will be used for the map and .rage is how you set the rage of colors to go with the data from the domain.
linear = d3.scaleLinear()
.domain([d3.min(CaseConfirmedpct),d3.max(CaseConfirmedpct)])
.range(["#fde0dd", "#c51b8a"])
chart(numericSort(CaseConfirmedpct), linear)
md`# Quantile Classification`
// The code below is used to create a quantile map. scaleQuantile() tell it to create three classes with roughly equal number of elements in them. .domain tells it which data to use and .range tells it which colors to assign to data within certain ranges.
quantile = d3.scaleQuantile()
.domain(CaseConfirmedpct)
.range(["#e5f5f9", "#99d8c9", "#2ca25f"])
chart(numericSort(CaseConfirmedpct), quantile)
md`# Jenks Natural Breaks Classification`
// this is how you create natural breaks for your data. It looks at CaseConfirmedpct for the data and the 3 after CaseConfirmedpct tells it the number of breaks to assign. Natural breaks means that it looks at the data to find naturally occuring gaps in the data distribution.
naturalbreaks = simple.ckmeans(CaseConfirmedpct, 3).map(v => v.pop())
//this maps out the natural breaks from above. .domain is naturalbreaks as that is what is being mapped and the .range assigns the colors for each of those classes
jenks = d3
.scaleThreshold()
.domain(naturalbreaks)
.range(["#deebf7", "#9ecae1", "#3182bd"])
chart(numericSort(CaseConfirmedpct), jenks)
md`# Equal Interval Classification (Quantize)`
//The code below creates a Equal Interval map. domain is set to the min and max of CaseConfirmedpct and the range assigns colors from colorbrewer to each class
quantize = d3.scaleQuantize()
.domain([d3.min(CaseConfirmedpct),d3.max(CaseConfirmedpct)])
.range(["#fee6ce", "#fdae6b", "#e6550d"])
chart(numericSort(CaseConfirmedpct), quantize)
md`# Threshold`
// below is the threshold map. the .domian has the thresold for the classes. I changed the thresolds from what they orginally were to use all of the colors from colorbrewer. I left it with three classes as that is what it orginally was, I just raised the thresold values to show all of the colors
threshold = d3.scaleThreshold()
.domain([0.09, 0.105, 0.11])
.range(["#fee0d2", "#fc9272", "#de2d26"])
chart(numericSort(CaseConfirmedpct), threshold)
showScaleGrouping(CaseConfirmedpct, {
scaleQuantile: quantile,
scaleThreshold: threshold,
scaleJenks: jenks,
scaleQuantize: quantize,
scaleQuantizeNice: quantize.copy().nice()
})
md`# Annex`
simple = require("simple-statistics@7.0.7/dist/simple-statistics.min.js")
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.
