format = d => `${d}%`
US = FileAttachment("ProjectedNRISHP.json").json()
counties = topojson.feature(US,US.objects.ProjectedNRISHP)
csv_data = d3.csvParse(await FileAttachment("data1924.csv").text(),({STCOFIPS, Anomaly}) => [+STCOFIPS, +Anomaly])
data = Object.assign(new Map(csv_data), {title: ["Percipitation Anomalies from 2019-2024"]})
data.get(1003)
percip = Array.from(csv_data.values(), d => d[1])
//YlOgRd = [d3.color("#ffffb2"), d3.color("#fecc5c"), d3.color("#fd8d3c"), d3.color("#f03b20"),d3.color("#bd0026")]
//YlOgRd = [d3.color("#543005"), d3.color("#8c510a"), d3.color("#bf812d"), d3.color("#dfc27d"),d3.color("#f5f5f5"), d3.color("#80cdc1"), d3.color("#35978f"), d3.color("#01665e"), d3.color("#003c30") ]
//threshold = d3.scaleThreshold()
//.domain([-15, -10, -5 , 0, 10, 20, 30 , 40, 50 , 60])
// .range(["#543005", "#8c510a", "#bf812d", "#f5f5f5", "#c7eae5", "#80cdc1","#35978f", "#01665e","#003c30" ])
//naturalbreaks = simple.ckmeans(percip, YlOgRd.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(YlOgRd)
color = d3.scaleThreshold()
.domain([-50, -25, -15, -10, -5, 5, 10, 20, 30, 40, 50])
.range(["#543005",
"#8c510a",
"#bf812d",
"#dfc27d",
"#f6e8c3",
"#f5f5f5",
"#ccece6",
"#99d8c9",
"#66c2a4",
"#2ca25f",
"#006d2c", "#003c30"])
width = 970
height = 615
margin = 72
//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://d3js.org/d3-geo
//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);
data.get(50)
color(data.get(40))
color(50)
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.
