md`# Isarithmic Mapping: GEOG 3540
Isarithmic Mapping of Yearly Total Precipitation, Source: [The Iowa Environmental Mesonet (IEM)] https://mesonet.agron.iastate.edu/climodat`
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
yield svg.node();
svg.append("g").call(legend);
// svg.append("g")
// .attr("transform", "translate(360,20)")
// .append(() => legend({color, title: "Yearly Avg Precipitation in 2018", width: 260}));
svg.append("g")
.selectAll("path")
.data(isarithmicPolygons.features)
.join("path")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("fill", d => color(d.properties.range))
.attr("d", path)
.append("title")
.text(d => " Avg yearly precipitation: " + d.properties.range);
svg.append("g")
.selectAll("path")
.data(isarithmicPolygons.features)
.join("path")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("fill", d => color(d.properties.range))
.attr("d", path)
.append("title")
.text(d => " Avg yearly precipitation: " + d.properties.range);
svg.append("g")
.selectAll("path")
.data(counties.features)
.join("path")
.attr("stroke", "gray")
.attr("stroke-linejoin", "round")
.attr("fill", d => "none")
.attr("d", path);
return svg.node();
}
d3 = require("d3@5", "d3-svg-legend@2")
function unique(array) {
return array.filter((v, i) => array.indexOf(v) === i);
}
format = d => `${d}%`
topojson = require("topojson-client@3")
featureCollection = FileAttachment("prec2018_wgs84.json").json()
isarithmicPolygons = topojson.feature(featureCollection, featureCollection.objects.prec2018_wgs84)
polygonValues = {
const values = []
for (let i = 0; i < isarithmicPolygons.features.length; i++) {
let d = isarithmicPolygons.features[i];
values[i] = d.properties.range;
}
return values;
}
uniqueValues = unique(polygonValues.sort())
//load iowa counties reference dataset
iowa = FileAttachment("iowa_counties_topo@1.json").json()
counties = topojson.feature(iowa, iowa.objects.iowa_counties)
projection_counties = d3.geoTransverseMercator().rotate([94,0]).fitExtent([[80, 80], [width, height]], counties);
path = d3.geoPath().projection(projection_counties);
colors = d3.quantize(d3.interpolateHcl("#fafa6e", "#2A4858"), uniqueValues.length)
color = d3.scaleOrdinal(polygonValues.sort(), colors)
margin = 20
width = 975
height = 610
legend = d3.legendColor()
.shapeWidth(110)
.orient("horizontal")
.scale(x)
// .title("Avg yearly precipitation in 2018")
x = d3.scaleOrdinal(legendValues, colors)
legendValues = {
const values = []
for (let i = 0; i < uniqueValues.length; i++) {
let d = uniqueValues[i];
let d2 = d.split(" - ")
let startVal = Math.round(d2[0] * 100) / 100
let endVal = Math.round(d2[1] * 100) / 100
if(i > 0)
startVal += 0.01
startVal = Math.round(startVal * 100) / 100
values[i] = startVal + " - " + endVal
}
return values;
}
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.
