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.
