Built with blockbuilder.org
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.hist-chart {
display: flex;
flex-direction: row;
align-items: flex-end;
}
.group {
display: flex;
flex-direction: column;
margin: 0.05rem;
/* background-color: teal; */
}
.block {
width: 20px;
height: 5px;
/* background-color: #fe4a49; */
}
</style>
</head>
<body>
<figure class='hist-chart'></figure>
<script>
// include data (this could be imported)
const bins = [
{bin: 0, value: 2},
{bin: 7, value: 15},
{bin: 0, value: 23},
{bin: 7, value: 25},
{bin: 0, value: 12},
{bin: 7, value: 3},
{bin: 0, value: 16},
{bin: 7, value: 5},
];
const bins2 = [
{bin: 0, value: 12},
{bin: 7, value: 55},
{bin: 0, value: 3},
{bin: 7, value: 15},
{bin: 0, value: 22},
{bin: 7, value: 30},
{bin: 0, value: 16},
{bin: 7, value: 5},
];
const histogram = (data, color) => {
// nest the data by state
const nest = d3
.nest()
.key(d => d.state)
.entries(data);
console.log(nest)
// select the figure element
const hist = d3.select('.hist-chart');
// Add 3 groups
// one for each state
const group = hist
.selectAll('.group')
.data(data)
.enter()
.append('div')
.attr('class', 'group');
// in each group add the appropriate number of blocks
group
.selectAll('.block')
.data(d => Array(d.value).fill())
.enter()
.append('div')
.attr('class', 'block')
.style('background-color', color)
// group.append('text').text(d => d.bin);
}
histogram(bins, 'coral');
histogram(bins2, 'teal');
// add a state label to each group
</script>
</body>