Engineering @huggingface 🤗. Data visualization enthusiast. Creative technologist. Open for collaborations.
Plot.plot({
width: width,
inset: 12,
x: {
label: "Width (cm)",
domain: [0, 200]
},
y: {
label: "Height (cm)",
domain: [0, 200]
},
facet: {
data: data,
y: (d) => Math.floor(categories.indexOf(d.category) / cols),
x: (d) => categories.indexOf(d.category) % cols
},
fy: {
tickFormat: null
},
fx: {
tickFormat: null
},
marks: [
Plot.rect(data, {
filter: (d) => d.width < 200 && d.height < 200, //note: the data goes beyond 200cm x 200cm just reproducing the original chart limit(0,200)
opacity: 0.1,
x1: 0,
x2: "width",
y1: 0,
y2: "height",
strokeWidth: 4,
fill: "#FFDA1A",
stroke: "#0051BA"
}),
Plot.text(
data,
Plot.selectLast({
text: "category",
textAnchor: "start",
fontWeight: "bold",
x: () => 0,
y: () => 0,
dy: 10
})
)
]
})
categories = [...d3.group(data, (d) => d.category).keys()]
cols = width > 700 ? 4 : 2
data = FileAttachment("IKEA_SA_Furniture_Web_Scrapings_sss.csv").csv({
typed: true
})
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.
