import {chart} from "@d3/bar-chart"
chart
four = d3
.scaleBand()
.domain(["one", "two", "three", "four"])
.range([0, 100])
four.bandwidth()
bars(four) // bars is a function defined in the Annex
four.step()
four50 = four.copy().paddingInner(0.6)
bars(four50) // edit the padding value in [0,1] to see how the bands geometries change.
four50.step() // should be equal to 2/(3+4) * width
bars(
four
.copy()
.paddingInner(0) // edit the inner padding value in [0,1]
.paddingOuter(0.5) // edit the outer padding value in [0,1]
.align(0.5) // edit the align: 0 is aligned left, 0.5 centered, 1 aligned right.
)
scale = d3.scaleBand()
.domain("ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").slice(0, domainCardinality))
.range([40, 40 + rangeLength])
.paddingInner(paddingInner)
.paddingOuter(paddingOuter)
.align(align)
.round(enableRounding)
testround = d3.scaleBand()
.domain([1, 2, 3, 4, 5, 6])
.range([0, 100])
.round(true) // 👀 change to false to see the impact below
testround.bandwidth()
testround.step()
testround(1) // left pad + n * step = 100 - right pad
four.round()
testround.round()
four("nine")
four(1.5)
naiveObjectBand = d3.scaleBand()
.domain([{ name: "Bob" }, { name: "Susie" }, { name: "Alice" }])
.rangeRound([0, 100])
susie = ({ name: "Susie" })
// 🌶 this gives an unexpected value, because every object was coerced to the same string "[object Object]"
naiveObjectBand(susie)
idObjectBand = d3.scaleBand()
.domain(
[{ name: "Bob" }, { name: "Susie" }, { name: "Alice" }].map(d => d.name)
)
.rangeRound([0, 100])
idObjectBand(susie.name)
d3 = require("d3-scale@4", "d3-array@3")
function bars(scale) {
const margin = 10,
width = 100,
height = 60,
chart = svg`<svg width=${width + 2 * margin} height=${height + 2 * margin}>
<g transform="translate(${margin}, ${margin})">
<rect width=${width} height="${height}"
fill="none" stroke="black" stroke-width="0.5" />
<rect x="${scale("one")}" width=${scale.bandwidth()} height="${height}"
fill="red"/>
<rect x="${scale("two")}" width=${scale.bandwidth()} height="${height}"
fill="green"/>
<rect x="${scale("three")}" width=${scale.bandwidth()} height="${height}"
fill="blue" />
<rect x="${scale("four")}" width=${scale.bandwidth()} height="${height}"
fill="#777" />
</g></svg>`;
return chart;
}
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.
