Public
Edited
Feb 24
fruits = [
{ name: "🍊", count: 21 },
{ name: "🍇", count: 13 },
{ name: "🍏", count: 8 },
{ name: "🍌", count: 5 },
{ name: "🍐", count: 3 },
{ name: "🍋", count: 2 },
{ name: "🍎", count: 1 },
{ name: "🍉", count: 1 }
]
counts = Array.from(fruits, (d) => d.count)
margin = ({ top: 20, right: 20, bottom: 20, left: 30 })
x = d3
.scaleBand()
.domain(fruits.map((d) => d.name))
.range([margin.left, width - margin.right])
.padding(0.1)
.round(true)
height = 200
y = d3
.scaleLinear()
.domain([0, d3.max(fruits, (d) => d.count)])
.range([height - margin.bottom, margin.top])
.nice()
color = d3
.scaleSequential()
.domain([0, d3.max(fruits, (d) => d.count)])
.interpolator(d3.interpolateReds)
fruits
X
name
Y
—
count
Color
name
Size
—
Facet X
—
Facet Y
—
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.
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.
