I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Published
Edited
Oct 13, 2020
1 fork
Importers
5 stars
Also listed in…
Visualizing GEO / Maps
geoJSON = {
// If the file looks like TopoJSON convert it to geoJSON
if (loadedJSON.type === "Topology") {
return topojson.feature(loadedJSON, loadedJSON.objects[property]);
}
return loadedJSON;
}
function rewind(geo) {
{
const fixedGeoJSON = { ...geo };
fixedGeoJSON.features = fixedGeoJSON.features.map(f =>
turf.rewind(f, { reverse: true })
);
return fixedGeoJSON;
}
}
fixedGeoJSON = rewind(geoJSON)
map = geoJSON => {
const ctx = DOM.context2d(width, height);
const path = d3
.geoPath()
.projection(d3.geoMercator().fitSize([width, height], geoJSON))
.context(ctx);
ctx.beginPath();
path(geoJSON);
ctx.lineWidth = 1;
ctx.strokeStyle = "#000";
ctx.stroke();
return ctx.canvas;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg
.selectAll("path")
.data(geoJSON.features)
.join("path")
.style("stroke", "black")
.style("fill", "none")
.attr("d", path);
return svg.node();
}
height = 300
turf = require("@turf/turf")
d3 = require("d3@6")
topojson = require("topojson-server@3")
import { select } from "@jashkenas/inputs"
import { dataInput } from "@john-guerra/file-input-with-default-value"
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.
