The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Unlisted
Edited
Jun 9
{/*
inputs: VALUE (color), STARTLAT, STARTLON, ENDLAT, ENDLON
can adjust parameters in the view state below to re-center the map
*/
const initialViewState = {
longitude: 0,
latitude: 10,
zoom: 1.5,
pitch: 45,
};
// create html container element
const container = document.createElement("div");
container.setAttribute(
"style",
"position: relative; height: 500px; width: 800px;",
);
// load libraries
const deck = (
await import("https://cdn.jsdelivr.net/npm/deck.gl/dist.min.js/+esm")
).default;
const maplibregl = (
await import("https://cdn.jsdelivr.net/npm/maplibre-gl@5.6.0/+esm")
).default;
// create color scale
const colorsRGB = [
[255, 255, 204],
[199, 233, 180],
[127, 205, 187],
[65, 182, 196],
[29, 145, 192],
[34, 94, 168],
[12, 44, 132],
];
// Create a quantile scale based on your data
const scale = d3
.scaleQuantile()
.domain(input.map((d) => d.VALUE))
.range(colorsRGB);
// Define color function using quantiles
const getColor = (n) => {
const baseColor = scale(n); // e.g., [29, 145, 192]
return [...baseColor, 150]; // 180 = ~70% opacity
};
const arcLayer = new deck.ArcLayer({
id: "arc-layer",
data: input,
getSourcePosition: (d) => [d.STARTLON, d.STARTLAT],
getTargetPosition: (d) => [d.ENDLON, d.ENDLAT],
getSourceColor: (d) => getColor(d.VALUE),
getTargetColor: (d) => getColor(d.VALUE),
getWidth: 1,
pickable: true,
greatCircle: false,
});
new deck.DeckGL({
map: maplibregl,
container,
mapStyle: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
initialViewState,
controller: true,
layers: [arcLayer],
});
return container;
}
sql (1).csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
