Media artist, web developer & designer.
Public
Edited
Jun 25, 2024
1 fork
data = [{
"name": "fabian",
"age": 38,
"city": "Bogotá"
},
{
"name": "Xiyu",
"age": 22,
"city": "Guangzhou",
"coord": [23.1252538,112.8975091]
},
{
"name": "Zongru",
"age": 22,
"city": "Guangzhou",
"coord": [23.1252538,112.8975091]
},
{
"name": "Lin",
"age": 23,
"city": "Shanghai",
"coord": [31.2228401,120.852228],
},
{
"name": "Xubaihe",
"age": 21,
"city": "Shenzhen",
"coord": [22.555076,113.888726]
},
{
"name": "Yixuan",
"age": 23,
"city": "Hangzhou",
"coord": [30.2612869,120.0067384]
}];
data
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
Plot.dot(data, {x: "city", y: "age"})
]
})
Plot.plot({
marks: [
Plot.barY(filteAgeData, {x: "name", y: "age", sort: {x: "y", reverse: true}}),
Plot.ruleY([0])
]
})
filteAgeData = data.filter(d => d.age < 23);
cityCoord = data.find(d => d.city === "Guangzhou");
filterByCoord = data.filter(d => d.coord);
map = {
const container = yield htl.html`<div style="height: 500px;">`;
const map = L.map(container).setView(cityCoord.coord,4);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
filterByCoord.forEach(e => {
L.marker(e.coord, {riseOnHover: true}).addTo(map);
})
}
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.
