Basketball and data visualization enthusiast. Former engineer at @observablehq
filtered
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
width: 960,
height: 600,
projection: "albers",
color: {
scheme: "blues"
},
marks: [
Plot.dot(withPreviousCoords, {
x: "Long",
y: "Lat",
// x: "prevLong",
// y2: "prevLat",
stroke: (d, i) => (i === range ? "red" : "grey"),
r: 3
// markerEnd: "arrow"
}),
Plot.link(withPreviousCoords, {
x2: "Long",
y2: "Lat",
x1: "prevLong",
y1: "prevLat",
stroke: (d, i) => (i === range ? "red" : "silver"),
strokeWidth: (d, i) => (i === range ? 3 : 1.5),
markerEnd: "arrow"
}),
Plot.geo(statemesh, { strokeOpacity: 0.5 }),
Plot.geo(nation, { strokeOpacity: 0.7 })
]
})
import { nation } from "@observablehq/plot-mapping"
import { statemesh } from "@observablehq/plot-mapping"
import { walmarts } from "@observablehq/plot-mapping"
withPreviousCoords = mergedWithCoords.map((obj, index) => {
if (index === 0) {
return { ...obj, prevLat: null, prevLong: null };
} else {
const prevObj = mergedWithCoords[index - 1];
return { ...obj, prevLat: prevObj.Lat, prevLong: prevObj.Long };
}
})
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.
