Skip to content

Instantly share code, notes, and snippets.

@flunky

flunky/index.html

Last active April 8, 2017 19:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save flunky/074d81036b8a72b4e4bf5eff77f5507a to your computer and use it in GitHub Desktop.
Save flunky/074d81036b8a72b4e4bf5eff77f5507a to your computer and use it in GitHub Desktop.
Download ZIP
D3 SVG Bar Chart Creating Rect Per Datum
Raw
index.html
<!DOCTYPE html>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style> .chart rect { fill: steelblue } </style>
<html><body>
<p>Here are the magic numbers from Lost: <span id="data"></span></p>
<svg class="chart" width="120" height="500">
</svg>
<script>
var data = [4,8,15,16,23,42];
document.getElementById("data").innerHTML = data;
d3.select(".chart")
.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("width",19)
.attr("height",function(d) { return 10*d; })
.attr("x",function(d,i) { return 20*i; })
.attr("y",function(d) { return 420 - 10*d; });
</script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment