md`# Dymaxion Projection (now make it SVG)`
AIROCEAN = map(projection)
map = (projection) => {
const height = width / 2;
// const context = DOM.context2d(width, height);
const svg = d3.select(DOM.svg(width, height));
var path = d3.geoPath(projection, svg);
let geoGenerator = d3.geoPath().projection(projection);
var angle = projection.angle();
projection.fitExtent(
[
[2, 2],
[width - 2, height - 2]
],
{ type: "Sphere" }
);
// Join the FeatureCollection's features array to path elements
let u = svg
.append("g")
.selectAll("path")
.data(countries.features)
.join("path")
.attr("d", geoGenerator)
.attr("fill", "#dedede")
.attr("stroke", "#eeeeee");
// add in country boundaries
// let z = svg
// .append("g")
// .selectAll("path")
// .data(countries.features)
// .join("path")
// .attr("d", geoGenerator)
// .attr("stroke", "#eeeeee")
// .attr("fill", "none");
// draw folds
var rotate = projection.rotate();
projection.rotate([0, 0, 0]);
// run the tree of faces to get all sites and folds
var sites = [],
folds = [],
i = 0;
function recurse(face) {
var site = d3.geoCentroid({ type: "MultiPoint", coordinates: face.face });
site.id = face.id || i++;
sites.push(site);
if (face.children) {
face.children.forEach(function (child) {
folds.push({
type: "LineString",
coordinates: child.shared.map((e) =>
d3.geoInterpolate(e, face.centroid)(1e-5)
)
});
recurse(child);
});
}
}
recurse(projection.tree());
// folding lines
folds.forEach((fold) => {
svg
.append("g")
.selectAll("path")
.data(fold)
.enter()
.append("path")
.attr("d", path)
.attr("stroke", "#cc0000")
.attr("stroke-width", "2px");
});
// restore the projection’s rotate
projection.rotate(rotate);
projection.angle(angle);
return svg.node();
}
colors = ['#e0f3db','#ccebc5','#a8ddb5','#7bccc4','#4eb3d3','#2b8cbe','#0868ac','#084081']
countries = FileAttachment("countries.geo.json").json()
projection = d3.geoAirocean()
d3 = require("d3-fetch", "d3-geo", "d3-geo-polygon", "d3-selection")
import {draw} from '@vhf/canvas-svg-export-example'
DOM.download(() => map(projection), undefined, "Save SVG")
import {createSvgSnapshot} from '@sdgandhi/embedding-a-canvas-into-an-svg'
AIROCEAN.getContext('2d').getImageData( 0, 0, 200, 200 )
createSvgSnapshot(AIROCEAN.getContext('2d').getImageData( 0, 0, 200, 200 ).data)
DOM.download(createSvgSnapshot(AIROCEAN))
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.
