Published
Edited
Nov 13, 2020
chart = {
const context = DOM.context2d(800, 600);
const path = d3.geoPath(projection, context);
let contours = makeContoursData();
for(let i = 0; i < contours.length; i++){
// when i == 7, some polygon is counterclockwise
// if(i == 7){
// continue;
// }
let one = contours[i];
context.beginPath();
path(one);
context.fillStyle = colorScale(thresholds[i]);
context.fill();
}
return d3.select(context.canvas).node();
}
function makeContoursData(){
let minX = data.x[0];
let maxX = data.x[data.x.length-1];
let minY = data.y[0];
let maxY = data.y[data.y.length-1];
let transform = ({type, value, coordinates}) => {
return {type, value, coordinates: coordinates.map(rings => {
return rings.map(points => {
return points.map(([x, y]) => ([
x / data.width * (maxX - minX) + minX,
y / data.height * (maxY - minY) + minY
]));
});
})};
}
let contours = d3.contours()
.size([data.width, data.height])
.thresholds(thresholds)(varData.values)
.map(transform);
return contours;
}
colorScale = d3.scaleSequential(d3.interpolateTurbo)
.domain([thresholds[0], thresholds[thresholds.length-1]]);
thresholds = d3.range(varData.minVal, varData.maxVal,
(varData.maxVal - varData.minVal) / contourLevel);
contourLevel = 20;
varData = data["anompb"];
projection = d3.geoEquirectangular()
data = FileAttachment("contours.json").json()
d3 = require("d3@6")
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.
