Data graphics developer at Gapminder. Teacher at DIS Stockholm. Escaping flatland one chart at a time.
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.
mapboxgl = require('mapbox-gl@^1.5.1/dist/mapbox-gl.js');
deck = require.alias({
h3: {},
s2Geometry: {}
})('deck.gl@8.4.1/dist.min.js')
getDeckGLMap = (layers, pitch) => {
if (pitch === undefined) {
pitch = 0;
}
let container = html `<div style="height:700px"></div>`;
let deckgl = new deck.DeckGL({
container,
map: mapboxgl,
mapboxAccessToken: '',
mapboxApiAccessToken: mapboxToken,
mapStyle: 'mapbox://styles/mapbox/dark-v10',
layers: layers,
initialViewState: {
longitude: 18,
latitude: 59.3,
zoom: 12,
minZoom: 4,
maxZoom: 17,
pitch: 40.5,
bearing: 0,
},
controller: true
});
return container;
}
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]
})
])
getDeckGLMap([
new deck.HexagonLayer({
id: "heatmap",
opacity: 0.5,
data: data.filter(d => checkboxes.includes(d.property_type)),
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.
