Unlisted
Edited
Nov 29, 2023
import {DuckDBClient} from "@cmudig/duckdb"
data = fetch('https://data.cityofnewyork.us/resource/vfnx-vebw.json').then(res => res.json()).then(data => data.map(item => ({
...item,
x: Number(item.x),
y: Number(item.y)
})))
db = DuckDBClient.of({ data })
db
Type Table, then Shift-Enter. Ctrl-space for more options.
colors = []
{
const _colors = new Set();
data.forEach(item => item.primary_fur_color && _colors.add(item.primary_fur_color))
_colors.forEach(c => colors.push(c))
}
Plot.plot({
marks: [
Plot.barY(data, {x: "primary_fur_color", y: "foraging", sort: {x: "y", reverse: true}}),
Plot.ruleY([0])
]
})
voronoi = Plot.plot({
marks: [
Plot.voronoi(data, {
x: "x",
y: "y",
fill: (d) => {
switch (d.primary_fur_color) {
case "Gray": {
return "#9aa0a3";
}
case "Cinnamon": {
return "#D2691E";
}
case "Black": {
return "black";
}
default: {
return "blue";
}
}
},
stroke: "white",
title: "color",
fillOpacity: .75
}),
Plot.dot(data, {
x: "x",
y: "y",
fill: "black",
pointerEvents: "none",
r: 1
})
]
})
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.
