Skip to content

Instantly share code, notes, and snippets.

@unclebconnor
Created February 17, 2018 20:47
Show Gist options
  • Save unclebconnor/ce0dee5f1c25fd87ff12c3776612d936 to your computer and use it in GitHub Desktop.
Save unclebconnor/ce0dee5f1c25fd87ff12c3776612d936 to your computer and use it in GitHub Desktop.
Div Bar Chart
license: mit
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
div.bar {
height: 20px;
background-color: crimson;
margin:5px;
}
</style>
</head>
<body>
<script>
const milesRun = [5,3,6,8,4]
d3.selectAll("div.bar") // our placeholder selection
.data(milesRun) // data binding
.enter() // newly bound data
.append("div") // new div's
.attr("class", "bar") // add a class name
.style("width", d => d*50 + "px") // callback
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment