Published
Edited
Dec 11, 2021
1 star
network()
color = d3.piecewise(d3.interpolateRgb.gamma(0.8), ["red", "white", "blue"])
path = d3.geoPath(projection)
nodes = features.map((d) => path.centroid(d))
//.filter((d, i) => i % 3 == 0)
ramp(d3.piecewise(d3.interpolateRgb.gamma(4.2), ["red", "white", "blue"]))
d3.piecewise(d3.interpolateRgb.gamma(2.2), ["red", "green", "blue"])(0.5)
import { ramp } from "@d3/working-with-color"
delaunay = d3.Delaunay.from(nodes)
opacityRand = () => Math.random() * 0.7 + 0.3
network = () => {
// const delaunay = d3.Delaunay.from(nodes);
const svg = d3.select(DOM.svg(width, height)).style("background", "#121212");
const g = svg.append("g").attr("transform", "translate(100,50)");
const colorInter = d3.interpolateCubehelix("#000", "#EDF5EE");
// const delaunay = d3.Delaunay.from(nodes);
const diagram = delaunay.voronoi([0, 0, width, width / 1.6]);
const links = [];
const { halfedges, triangles, hull } = delaunay;
// internal edges
for (let i = 0, n = halfedges.length; i < n; ++i) {
const j = halfedges[i];
if (j < i) continue;
const ti = triangles[i] * 2;
const tj = triangles[j] * 2;
links.push({ source: nodes[ti / 2], target: nodes[tj / 2] });
}
// hull edges
let node = hull;
links.push({ source: nodes[node.i], target: nodes[node.next.i] });
while (((node = node.next), node !== hull))
links.push({ source: nodes[node.i], target: nodes[node.next.i] });
links.forEach((link) => {
link.defaultColor = "#333";
const dx = link.source[0] - link.target[0];
const dy = link.source[1] - link.target[1];
link.distance = Math.sqrt(dx * dx + dy * dy);
});
nodes.forEach((pt) => {
pt.edges = links.filter((link) => pt === link.source || pt === link.target);
});
const edges = g
.selectAll("path.link")
.data(links)
.enter()
.append("path")
.attr("stroke-width", "1")
.style("shape-rendering", "crisp-edges")
// .attr("stroke-opacity", (d) => opacityRand())
.attr("stroke-opacity", (d) => {
return (
1 -
Math.sqrt(
Math.pow(d.source[0] - d.target[0], 2) +
Math.pow(d.source[1] - d.target[1], 2)
) /
200
);
})
// .attr("stroke", (d, i) => d3.interpolatePRGn(i / links.length)) //d3.interpolatePRGn
// .attr("stroke", "#333")
.attr("stroke", (d) => {
var mid = (d.source[1] + d.target[1]) / 2;
console.log("mid je", mid, height);
return color(mid / height);
})
.attr("d", (d) => `M${d.source} L${d.target}`);
const circles = g
.selectAll("circle")
.data(nodes)
.enter()
.append("circle")
// .attr("r", 2)
.attr("r", (d) => Math.random() * 3.5)
.attr("opacity", (d) => opacityRand())
// .attr("fill", "black")
.attr("fill", (d, i) => {
return color(d[1] / height);
}) //d3.interpolatePRGn
.attr("cx", (d) => d[0])
.attr("cy", (d) => d[1]);
return svg.node();
}
features = topojson.feature(jls, jls.objects["JLS"]).features
height = 800
vaxDataWrangled = vaxData.map((d) => {
return { ...d, diff: d.prop_P2 - averageVaxRate };
})
vaxDataWrangled.filter((d) => d.gisco_id == "HR_05908")
totalPopulation = d3.sum(vaxData, (d) => d.population)
averageVaxRate = {
let retval = 0;
vaxData.forEach((item) => {
retval += (item.prop_P2 * item.population) / totalPopulation;
});
return retval;
}
vaxData = FileAttachment("hr_c19_vaccination_lau2_2021-11-22.csv").csv({
typed: true
})
d3 = require("d3@5", "d3-delaunay@4")
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.
