Published
Edited
May 13, 2022
Insert cell
Insert cell
Insert cell
choropleth = {
const svg = d3.create("svg")
.attr("viewBox", [50, 75, width, height-75]);

svg.append("g")
.selectAll("path")
.data(features.features)
.join("path")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("stroke-width", .2)
.attr("fill", d => color(data.get(d.properties.OBJECTID)))
.attr("d", path)
.append("title")
.text(d => " Land Class: " + data.get(d.properties.OBJECTID));
// svg.selectAll(".subunit-label")
// .data(features.features)
// .enter().append("text")
// .attr("class", function(d) { return "subunit-label " + d.id; })
// .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
// .attr("fill", function(d){
// if(data.get(d.properties.Class_Type) == "Urban")
// return "black";
// else
// return "white";
// })
// .attr("fill-opacity", "1")
// .attr("font-size", "8")
// .attr("font-weight", "200")
// .attr("text-anchor", "middle")
// .text(function(d) { return d.properties.OBJECTID; })

return svg.node();
}
Insert cell
d3 = require("d3@5", "d3-scale@3", "d3-scale-chromatic@2", "d3-shape@2", "d3-array@2")
Insert cell
topojson = require("topojson-client@3")
Insert cell
features = FileAttachment("MC2004WGS.json").json()
Insert cell
//features = topojson.feature(Reclass2004, Reclass2004.objects.MC2004WGS)
Insert cell
csv_data = d3.csvParse(await FileAttachment("MC2004ReclassPoly_data.csv").text(),({OBJECTID, Class_Type}) => [+OBJECTID, Class_Type])
Insert cell
data = Object.assign(new Map(csv_data), {title: ["NLCD Reclassification"]})
Insert cell
import {legend} from "@d3/color-legend"
Insert cell
Insert cell
Insert cell
projection = d3.geoTransverseMercator().rotate([94,0]).fitExtent([[80, 80], [width, height]], features);
Insert cell
path = d3.geoPath().projection(projection)
Insert cell
color = d3.scaleOrdinal(classes,colors)
//https://observablehq.com/@d3/d3-scaleordinal
Insert cell
classes = ["Water, barren land, forest & scrub, wetland","Urban","Hay/pasture, cultivated crop"]
Insert cell
colors = ["#377eb8", "#e41a1c", "#4daf4a"]
Insert cell

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.
Learn more