md`# Dymaxion Projection (now make it SVG)`
AIROCEAN = map(projection)
svg_chart = {
// https://stackoverflow.com/questions/10273516/get-svg-from-canvas-element-and-save-it
// Add the test SVG el:
// const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
const svg = d3.select(DOM.svg(600, 400));
// svg
// .setAttribute("width", "600")
// .setAttribute("height", "400")
// .setAttributeNS(
// "http://www.w3.org/2000/xmlns/",
// "xmlns:xlink",
// "http://www.w3.org/1999/xlink"
// );
// Function: Add data to SVG
function importCanvas(sourceCanvas, targetSVG) {
// get base64 encoded png data url from Canvas
var img_dataurl = sourceCanvas.toDataURL("image/png");
var svg_img = document.createElementNS(
"http://www.w3.org/2000/svg",
"image"
);
svg_img.setAttributeNS(
"http://www.w3.org/1999/xlink",
"xlink:href",
img_dataurl
);
// jQuery( targetSVG.appendChild( svg_img ) )
// .appendTo( '#graph-container' );
console.log("done"); // Log & confirm
}
// Call
importCanvas(AIROCEAN, svg);
}
map = (projection) => {
const height = width / 2;
const context = DOM.context2d(width, height);
var path = d3.geoPath(projection, context);
var angle = projection.angle();
projection.fitExtent(
[
[2, 2],
[width - 2, height - 2]
],
{ type: "Sphere" }
);
context.clearRect(0, 0, width, width / 2);
// draw land masses
countries.features.forEach((c, i) => {
context.beginPath();
path(c);
context.fillStyle = colors[i % colors.length];
context.fill();
(context.strokeStyle = "#FFF"), context.stroke();
});
// draw border
context.beginPath(), path({ type: "Sphere" });
context.lineWidth = 0.5;
context.setLineDash([3, 4]);
context.strokeStyle = "#888";
context.stroke();
// 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 => {
// context.beginPath();
// context.lineWidth = 0.5;
// context.setLineDash([3,4]);
// context.strokeStyle = "#888";
// path(fold);
// context.stroke();
// context.setLineDash([]);
// });
// // restore the projection’s rotate
// projection.rotate(rotate);
// projection.angle(angle);
return context.canvas;
};
colors = ['#e0f3db','#ccebc5','#a8ddb5','#7bccc4','#4eb3d3','#2b8cbe','#0868ac','#084081']
countries = d3.json(
"https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json"
)
projection = d3.geoAirocean()
md`## Imports`
d3 = require("d3-fetch", "d3-geo", "d3-geo-polygon")
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.
