Trained as Enviornmental Economist, with interests on data visualziation with economic and environmental informaiton.
Public
Edited
Jul 1, 2024
1 fork
DOM.download(() => rasterize(map), `${networksource}_${huc8unit}.png`)
map = {
const width = 1000,
height = 750;
let huc8chosen = huc8fullnetwork.filter((d) => d.sourcehuc8 == huc8unit);
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("background-color", "white");
let g = svg.append("g").style("fill", "none").style("stroke", "#000");
var performat = d3.format(".1%");
// define zoom
const zoom = d3.zoom().scaleExtent([1, 8]).on("zoom", zoomed);
g.selectAll("path")
.data(HUC8)
.enter()
.append("path")
.style("stroke", "white")
.style("stroke-width", 0.5)
.style("fill", function (d) {
if (networksource != "SPARROW") {
return "steelblue";
} else {
//
let thishuc8 = huc8fate.filter(
(e) => e.huc8 == +d.properties.huc8int
)[0];
return thishuc8 == undefined
? "steelblue"
: +thishuc8.tn < +thishuc8.tnnew
? "gold"
: "steelblue";
}
})
.attr("class", "huc8")
.attr("d", path); //
//.on("click", function (event, d) {
// huc8chosen = huc8fullnetwork.filter(
// (e) => e.sourcehuc8 == +d.properties.huc8int
// );
// svg
// .selectAll(".huc8")
// .style("fill", "steelblue")
// .filter((d) =>
// huc8chosen.map((e) => e.targethuc8).includes(d.properties.huc8int)
// )
// .style("fill", "gold");
// color the source huc8 red
// svg
// .selectAll(".huc8")
// .filter((d) => d.properties.huc8int == huc8chosen[0].sourcehuc8)
// .style("fill", "red");
//});
let gtitle = svg.append("g");
gtitle
.append("text")
.attr("x", 500)
.attr("y", 80)
.style("font-weight", "bold")
.style("font-size", 20)
.style("text-anchor", "middle")
.text(`HUC8 in Contiguous USA`);
// add the downstream huc8s
// svg
// .selectAll(".huc8")
// .filter((d) =>
// huc8chosen.map((e) => e.targethuc8).includes(d.properties.huc8int)
// )
// .style("fill", "gold");
// color the source huc8 red
// svg
// .selectAll(".huc8")
// .filter((d) => d.properties.huc8int == huc8chosen[0].sourcehuc8)
// .style("fill", "red");
// binding zoom
// svg.call(zoom);
function zoomed(event) {
const { transform } = event;
g.attr("transform", transform);
g.attr("stroke-width", 1 / transform.k);
}
return svg.node();
}
huc8fate@3.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
thishuc8 = huc8fate.map((e) =>
huc8fullnetwork_swat@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
huc8fullnetwork@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
huc8fullnetwork = networksource == "WBD"
? huc8fullnetwork_wbd
: huc8fullnetwork_swat
HUC8 = topojson.feature(huc8_geo, huc8_geo.objects.HUC8_GEO).features
huc8_geo = FileAttachment("HUC8_GEO-2.json").json()
projection = d3.geoAlbers().scale(1300).translate([500, 400])
path = d3.geoPath().projection(projection)
huc8list = HUC8.map((d) => {
return d.properties.huc8int;
})
import { serialize } from "@mbostock/saving-svg"
function rasterize(svg) {
let resolve, reject;
const promise = new Promise((y, n) => ((resolve = y), (reject = n)));
const image = new Image();
image.onerror = reject;
image.onload = () => {
const rect = svg.getBoundingClientRect();
const context = DOM.context2d(rect.width, rect.height);
context.drawImage(image, 0, 0, rect.width, rect.height);
context.canvas.toBlob(resolve);
};
image.src = URL.createObjectURL(serialize(svg));
return promise;
}
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.
