primary = JSON.parse(await FileAttachment('primary.simplified.topojson').text())
canvas = {
const context = DOM.context2d(width, height * 1.1);
const path = d3.geoPath(null, context);
context.canvas.style.maxWidth = "100%";
context.lineJoin = "round";
context.lineCap = "round";
context.fillStyle = "#FFF8E7";
context.fillRect(0, 0, width, height * 1.1);
var geoGenerator = d3
.geoPath()
.pointRadius(5)
.projection(projection)
.context(context);
// context.strokeStyle = "red";
context.beginPath();
context.lineWidth = 3;
context.strokeStyle = "purple";
geoGenerator({ type: 'FeatureCollection', features: data.features });
// geoGenerator(data);
context.stroke();
context.beginPath();
// context.strokeStyle = "red";
context.strokeStyle = "purple";
context.lineWidth = 0.5;
geoGenerator({
type: 'FeatureCollection',
features: topojson.feature(secondary, secondary.objects.secondary).features
});
// geoGenerator(data);
context.stroke();
context.beginPath();
context.strokeStyle = "red";
context.lineWidth = 1.5;
geoGenerator({
type: 'FeatureCollection',
features: topojson.feature(primary, primary.objects.primary).features
});
// geoGenerator(data);
context.stroke();
return context.canvas;
}
topojson.feature(secondary, secondary.objects.secondary)
path = d3.geoPath().projection(projection)
height = 600
projection = d3
.geoMercator()
.fitExtent(
[[0, 50], [width, height]],
topojson.feature(secondary, secondary.objects.secondary)
)
// topoData = topojson.feature(data)
//data = JSON.parse(await FileAttachment('motorway.geojson').text())
data = JSON.parse(await FileAttachment('motorways.qgis.geo.json').text())
secondary = JSON.parse(
await FileAttachment('secondary.simplified.topojson').text()
)
topojson = require("topojson-client@3")
d3 = require('d3@6')
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.
