Maps, Infovis, Code
function transformData(rawData) {
let lines = [];
let points = [];
for (let p1 of rawData.features) {
let coords = p1.properties.geo_coords?.split(";").map(s => s.split(",").reverse().map(s => +s)) || [];
let names = p1.properties.geo_ref?.split(";") || [];
let air = p1.properties.air_quality?.split?.(";").map(s => +s) || [p1.properties.air_quality];
for (let [i, p2] of coords.entries()) {
let props = {
name: names[i],
air: air[i]
};
lines.push({
type: "Feature",
geometry: {
type: "LineString",
coordinates: [p1.geometry.coordinates, p2],
},
properties: props
});
points.push({
type: "Feature",
geometry: {
type: "Point",
coordinates: p2,
},
properties: props
});
}
}
return [lines, points];
}
styleFeature = [
// layer 0
(f, ctx, path, layerIndex) => {
ctx.lineWidth = f.properties.air / 20;
ctx.strokeStyle = "rgba(0,0,0,0.2)";
ctx.lineCap = "round";
},
// layer 1
(f, ctx, path, layerIndex) => {
path.pointRadius(f.properties.air / 10);
ctx.lineWidth = 1;
ctx.strokeStyle = "rgba(0,0,0,0.4)";
ctx.fillStyle = "rgba(0,0,0,0.4)";
}
]
html`<style>canvas.globe { margin: 3px; }</style>`
d3 = require.alias({"d3-array": "d3@6", "d3-geo": "d3@6"})("d3@6", "d3-geo-polygon@1")
import { zoom as vzoom } from "@d3/versor-zooming"
land = {
const topo = await d3.json(
"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m.json"
),
simpler = topojson.simplify(topojson.presimplify(topo), 0.5); // try 0 for slower maps
return topojson.feature(simpler, simpler.objects.land);
}
topojson = require("topojson@3")
// outside of Observable, replace by or import from
// https://github.com/observablehq/stdlib/blob/master/src/dom/context2d.js
context2d = DOM.context2d
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.
