Skip to content

Instantly share code, notes, and snippets.

@jeffreymorganio

jeffreymorganio/.block

Last active June 12, 2016 14:47
Show Gist options
  • Save jeffreymorganio/abc8ad469e4159193c1d5f7af169e392 to your computer and use it in GitHub Desktop.
Save jeffreymorganio/abc8ad469e4159193c1d5f7af169e392 to your computer and use it in GitHub Desktop.
Download ZIP
A D3 Bar Chart of DIV Elements.
Raw
.block
license: mit
Raw
README.md

A D3 bar chart created with DIV elements.

Raw
bar-chart.css
div.bar {
width: 50px;
margin-right: 4px;
display: inline-block;
background-color: #C70039;
}
Raw
bar-chart.js
function drawBarChart() {
var dataSet = randomDataSet(10, 5, 25);
d3.select("body").selectAll("div")
.data(dataSet)
.enter()
.append("div")
.attr("class", "bar")
.style("height", function(d) {
var barHeight = d * 10;
return barHeight + "px";
});
}
function randomDataSet(dataSetSize, minValue, maxValue) {
return new Array(dataSetSize).fill(0).map(function(n) {
return Math.random() * (maxValue - minValue) + minValue;
});
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A D3 Bar Chart of DIV Elements</title>
<link rel="stylesheet" href="bar-chart.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
<script src="bar-chart.js"></script>
</head>
<body onload="drawBarChart()">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment