Skip to content

Instantly share code, notes, and snippets.

@billybonks
Last active August 29, 2015 14:21
Show Gist options
  • Save billybonks/3f32a007f36c96ed4437 to your computer and use it in GitHub Desktop.
Save billybonks/3f32a007f36c96ed4437 to your computer and use it in GitHub Desktop.
Bar chart
<!DOCTYPE html>
<style>
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<div class="chart">
<div style="width: 40px;">4</div>
<div style="width: 80px;">8</div>
<div style="width: 150px;">15</div>
<div style="width: 160px;">16</div>
<div style="width: 230px;">23</div>
<div style="width: 420px;">42</div>
</div>
<script>
var data = [4, 8, 15, 16, 23, 42];
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return d * 10 + "px"; })
.text(function(d) { return d; });
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment