md`# How to understand D3's paddingInner`
d3 = require("d3@6")
viewof numBars = Range([1, 20], {value: 5, step: 1, label: "number of bars:"})
viewof paddingInner = Range([0, 1], {value: 0.6, step: 0.1, label: "paddingInner value:"})
barchart = {
const w = 900;
const h = 400;
const margin = ({top: 100, right: 15, bottom: 20, left: 25})
let dataset = [];
for (let i = 0; i < numBars; ++i) {
let randomNum = Math.random() * h;
dataset.push(randomNum)
};
let svg = d3.create("svg")
.attr("width", w)
.attr("height", h)
.style("background-color", "pink");
let xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.range([0, w])
.paddingInner(paddingInner);
let yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, h - margin.top]);
let bw = xScale.bandwidth()
let b = w / (numBars - paddingInner)
svg.append("text")
.attr("x", 10)
.attr("y", 20)
.text("w: "+ w +" px")
svg.append("text")
.attr("x", 10)
.attr("y", 44)
.text("p: "+ paddingInner +" ")
svg.append("text")
.attr("x", 200)
.attr("y", 20)
.text("bw (bandwidth): "+ xScale.bandwidth()+" px")
svg.append("text")
.attr("x", 200)
.attr("y", 44)
.text("wip (width of inner padding): "+ (b - bw) +" px")
svg.append("text")
.attr("x", 600)
.attr("y", 20)
.text("b (wip + bw): "+ w / (numBars - paddingInner) +" px")
svg.selectAll("rect")
.data(dataset)
.join("rect")
.attr("x", (d, i) => xScale(i))
.attr("y", d => h - yScale(d))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d))
.style("fill", "steelblue");
return svg.node()
}
tex.block`
b = wip + bw = \frac{w}{n - p}
`
import {Button, Checkbox, Toggle, Radio, Range, Select, Text, Textarea, Search, Table} from "@observablehq/inputs"
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.
