Skip to content

Instantly share code, notes, and snippets.

@N0taN3rd
Created February 2, 2016 03:55
Show Gist options
  • Save N0taN3rd/e11863998001ca03a375 to your computer and use it in GitHub Desktop.
Save N0taN3rd/e11863998001ca03a375 to your computer and use it in GitHub Desktop.
Power of Data Redo
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
div.bar {
display: inline-block;
width: 20px;
height: 75px; /* Gets overriden by D3-assigned height below */
margin-right: 2px;
background-color: teal;
}
</style>
</head>
<body>
<script>
/*
Is this not boring?
wish I could use underscore.js
*/
var dataset = Array.apply(null, {length: 25})
.map(function(){return Math.round(Math.random() * 30);});
d3.select("body").selectAll("div")
.data(dataset) // <-- The answer is here!
.enter()
.append("div")
.attr("class", "bar")
.style("height", function(d) {
var barHeight = d * 5;
return barHeight + "px";
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment