md`# HexBin Map`
md`Hexagonal binning on a map projection. Map topography from @fil`
{
const width = 950
const height = 500
const svg = d3.create('svg')
.attr("width",width)
.attr("height",height);
const group = svg.append("g")
const projection = d3.geoNaturalEarth1()
.center([0, 0])
.scale(160)
.rotate([70,0,0]);
const path = d3.geoPath()
.projection(projection);
const hexbin = d3.hexbin()
.radius(8)
.x(d => projection([d.lon, d.lat])[0])
.y(d => projection([d.lon, d.lat])[1]);
const theregion = function(d) {
let sumi = 0;
for(let i = 0; i < d.length; i++)
{
sumi = +d[i].o2;
}
return sumi;
}
group.append("g")
.attr("class", "hexagons")
.selectAll("path")
.data(hexbin(mapData)).enter()
.append("path")
.attr("d", hexbin.hexagon())
.attr("transform", d => "translate(" + d.x + "," + d.y + ")")
.style("fill", function(d) {
if (theregion(d)=="999.0") return ("#eee");
else return d3.rgb(10,225-theregion(d)*400,255-theregion(d)*400);})
.style("stroke", "white");
return svg.node();
}
mapData = FileAttachment("bia_o2.json").json()
world = fetch("https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m.json").then(d => d.json())
topojson = require("topojson-client@3")
d3 = require("d3@6", "d3-hexbin@0.2")
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.
