Public
Edited
Feb 25, 2024
1 fork
data = FileAttachment("stockholm.csv").csv(
{typed: true})
data
X
price
Y
—
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
getDeckGLMap([
new deck.ScatterplotLayer({
id: 'scatterplot-layer',
data: data,
pickable: true,
opacity: 1,
filled: true,
radiusScale: 1,
radiusMinPixels: 1,
radiusMaxPixels: 1,
getPosition: d => [d.longitude, d.latitude],
getRadius: d => 1,
getFillColor: d => [255, 140, 0]
})
])
viewof radius = Inputs.range([1, 1000], {label: "radius", step: 1, value:30})
getDeckGLMap([
new deck.HexagonLayer({
id: "heatmap",
opacity: 0.5,
data: data,
radius: radius,
elevationRange: [0, radius],
elevationScale: 50,
getColorWeight: (point) => point["price"], // can be price, living_area, fee etc
colorAggregation: "MEAN",
getElevationWeight: () => 1,
elevationAggregation: "SUM",
extruded: true,
getPosition: (d) => [d.longitude, d.latitude],
pickable: true,
upperPercentile: 99.9,
lowerPercentile: 100 - 99.9,
})
])
mapboxToken="pk.eyJ1IjoiYm9zdGFkc2J1c3NlbiIsImEiOiJjbHN1a2JsZzYyODA0Mm1uc285N25hdDR5In0.xpGMqGPiskiRgb4wCyBoTg"
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.
