[[Bar Chart]] is a close cousin of the [[Line Plot]]. Both show [[Functions|functional]] values as they change over a given [[Dimensions|dimension]] or set of [[Categorization|categories]]. Both are incredibly common [[Plot (diagram)]]s.
# Types
- **Regular** - just a [[Line Plot]] that is made of bars.
- **Stacked** - showing the total amount of a series of [[Categorical Data]] and displaying the raw contribution from each category.
- **Stacked 100%** - these are only useful for showing proportions, like [[Pie Chart]]s - but easier to parse multiple of them side-by-side.
- **Combo** - this name is from Excel. It's not strictly a bar chart, instead just multiple charts in one, but often a bar chart is part of it.
# D3 Bar Chart Example
```html
<style>
.bar:hover {
fill: brown;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - 3 * d)
.attr("width", 25)
.attr("height", (d, i) => d * 3)
.attr("fill", "navy")
.attr("class", "bar")
// Add your code below this line
// Add your code above this line
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text((d) => d)
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - (d * 3 + 3))
</script>
</body>
```
****
# More
## Source
- [[freeCodeCamp]]
## Related
- [[Diagram Types (index)]]