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}
]
fruits.map(d => d.count) // the count dimension (quantitative)
fruits.map(d => d.name) // the name dimension (nominal)
x = d3.scaleLinear()
.domain([0, d3.max(fruits, d => d.count)])
.range([margin.left, width - margin.right])
y = d3.scaleBand()
.domain(fruits.map(d => d.name))
.range([margin.top, height - margin.bottom])
.padding(0.2)
x.domain()
x.range()
y("🍊") // the y-coordinate for name = grapes
x(13) // the x-coordinate corresponding to count = 21
x(0) // the x-coordinate corresponding to count = 0
x(21) - x(0) // the width of the bar corresponding to count = 21
y.bandwidth() // the height of each bar
html`<svg viewBox="0 0 ${width} 33" style="max-width: ${width}px; font: 10px sans-serif; display: block;">
<rect fill="steelblue" x="${x(0)}" width="${x(count) - x(0)}" height="33"></rect>
<text fill="white" text-anchor="end" x="${x(count)}" dx="-6" dy="21">${count}</text>
</svg>`
html`<svg viewBox="0 ${margin.top} ${width} ${height - margin.top}" style="max-width: ${width}px; font: 10px sans-serif;">
${fruits.map(d => svg`<rect y="${y(d.name)}" x="${x(0)}" width="${x(d.count) - x(0)}" height="${y.bandwidth()}"></rect>`)}
</svg>`
fruits
md `
---
<h3 style="text-align: right">
[Axes →](https://observablehq.com/@parshwamehta13/axes)
</h3>
`
width = 640
height = 202
margin = ({top: 20, right: 20, bottom: 20, left: 20})
import {legend} from "@d3/color-legend"
d3 = require("d3@6")
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.
