A minimal demonstration of how to create an HTML bar chart with D3. Fork this template to create your own chart.
Forked from Mike Bostock's Pen D3 Bar Chart.
A Pen by Captain Anonymous on CodePen.
A minimal demonstration of how to create an HTML bar chart with D3. Fork this template to create your own chart.
Forked from Mike Bostock's Pen D3 Bar Chart.
A Pen by Captain Anonymous on CodePen.
<div class="chart"></div> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> |
var data = [4, 8, 15, 16, 23, 42]; | |
var x = d3.scale.linear() | |
.domain([0, d3.max(data)]) | |
.range([0, 420]); | |
d3.select(".chart") | |
.selectAll("div") | |
.data(data) | |
.enter().append("div") | |
.style("width", function(d) { return x(d) + "px"; }) | |
.text(function(d) { return d; }); |
.chart div { | |
font: 10px sans-serif; | |
background-color: steelblue; | |
text-align: right; | |
padding: 3px; | |
margin: 1px; | |
color: white; | |
} |