sales = [
{ units: 10, fruit: "fig" },
{ units: 20, fruit: "date" },
{ units: 40, fruit: "plum" },
{ units: 30, fruit: "Siberian apricot" }
]
Plot.dot(sales, { x: "units", y: "fruit" }).plot()
length = measureText(string, fontSize)
d3.max(sales, (d) => measureText(d.fruit, 10))
Plot.dot(sales, { x: "units", y: "fruit" }).plot({
marginLeft: d3.max(sales, (d) => measureText(d.fruit, 10))
})
tickLabelPadding = 9 + 10
Plot.dot(sales, { x: "units", y: "fruit" }).plot({
marginLeft: d3.max(sales, (d) => measureText(d.fruit, 10)) + tickLabelPadding
})
autoMargin = (data, accessor) =>
d3.max(Plot.valueof(data, accessor), (d) => measureText(d, 10)) + tickLabelPadding
Plot.dot(sales, { x: "units", y: "fruit" }).plot({
marginLeft: autoMargin(sales, "fruit")
})
measureText = (str, fontSize = 10) =>
d3.sum(str, (cur) => characterWidths[cur.charCodeAt(0)] ?? avg) * fontSize
avg = d3.mean(characterWidths.filter((d) => d))
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.
