plot = {
const t0 = performance.now();
// const projection = d3.geoAlbers().scale(scale);
const projection = d3.geoAzimuthalEqualArea()
.rotate([80, -40, 15])
.scale(scale)
const path = d3.geoPath().projection(projection).pointRadius(2);
console.log("path.proje", path.projection)
console.log("projection", projection)
const svg = d3.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto");
const newSvg = ready(svg, path, us, projection).node();
const t1 = performance.now();
console.log("Call to svg took " + (t1 - t0) + " milliseconds.");
return newSvg
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
function ready(svg, path, us, projection) {
svg.append("path")
.datum(topojson.feature(us, us.objects.land))
.attr("class", "land")
.attr("d", path);
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
.attr("class", "states")
.attr("d", path);
const Group = svg
.selectAll(".wind-barbs")
.data(station)
.enter()
.append("g")
.attr("class", "wind-barb")
.attr("transform", d => {
return `translate(${projection(d.geometry.coordinates)})
rotate(${d.properties.wdir}) scale(0.2)`;
});
addLinesToSvg(Group)
return svg;
}
addLinesToSvg = require("d3-metar@0.0.9")
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
