viewof phase = Inputs.range([0, 100], {label: "Phase"})
canvas = {
const ctx = DOM.context2d(width, height);
ctx.fillStyle = "hsl(216deg 100% 13%)";
ctx.fillRect(0, 0, width, height);
ctx.save()
ctx.strokeStyle = 'rgba(80, 255, 255, 0.6)'
ctx.lineWidth = 0.1
path2ds.map(
path2d => {
ctx.stroke(path2d)
}
)
ctx.restore()
ctx.save()
ctx.globalCompositeOperation = "screen"
ctx.lineJoin = 'round'
ctx.setLineDash([0, 100 + phase, 5, 100 - phase])
ctx.strokeStyle = 'rgba(80, 255, 255, 0.6)'
ctx.lineWidth = 5
path2ds.map(
path2d => {
ctx.stroke(path2d)
}
)
ctx.restore()
return ctx.canvas;
}
center = [4.75, 51.82]
// prerender path
path2ds = {
let path2ds = geojson.features.map(
// Create path2d instances
(feature) => {
let tmpCtx = new Path2D()
// render on this context
path.context(tmpCtx)
// render
path(feature)
return tmpCtx
}
)
return path2ds
}
height = 600
geojson = {
let geojson = FileAttachment("trips.geojson")
return geojson.json()
}
width
d3 = require("d3")
path = {
const projection = d3.geoMercator()
.center(center)
.scale(30000)
// .scale(350000)
// .rotate([-180,0])
const path = d3.geoPath(projection)
return path
}
path(geojson.features[0])
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.
