Skip to content

Instantly share code, notes, and snippets.

@jshumakerpruitt

jshumakerpruitt/bar_chart.js

Last active August 29, 2015 14:01
Show Gist options
  • Save jshumakerpruitt/c71aa9e0b5168d215f5f to your computer and use it in GitHub Desktop.
Save jshumakerpruitt/c71aa9e0b5168d215f5f to your computer and use it in GitHub Desktop.
Download ZIP
Bar Chart from Getting started with D3
Raw
bar_chart.js
function draw(data){
d3.select("body")
.append("div").attr("class", "chart")
.selectAll("div.line")
.data(data.cash)
.enter()
.append("div")
.attr("class", "line");
d3.selectAll("div.line")
.append("div")
.attr("class", "label")
.text(function(d){ return d.name });
d3.selectAll("div.line")
.append("div")
.attr("class", "bar")
.style("width", function(d){ return d.count/100 + "px"})
.text(function(d){ return Math.round(d.count) });
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="bar_chart.js"></script>
<style type="text/css" media="screen">
div.chart{
font-family: sans-serif;
font-size: 0.7em;
}
div.bar {
background-color: DarkRed;
color: white;
height: 3em;
line-height 3em;
padding-right: 1em;
margin-bottom: .3em;
text-align:right;
margin-left:22em;
}
div.label {
height:3em;
line-height: 3em;
padding-right: 1em;
margin-bottom:2px;
float: left;
width: 20em;
text-align:right;
}
</style>
</head>
<body>
<script>
d3.json("plaza_traffic.json", draw);
</script>
</body>
</html>
Raw
plaza_traffic.json
{
"cash": [
{
"count": 26774.09756097561,
"id": 1,
"name": "Robert F. Kennedy Bridge Bronx Plaza"
},
{
"count": 18612.77618364419,
"id": 2,
"name": "Robert F. Kennedy Bridge Manhattan Plaza"
},
{
"count": 31343.0631276901,
"id": 3,
"name": "Bronx-Whitestone Bridge"
},
{
"count": 9863.7658045977,
"id": 4,
"name": "Henry Hudson Bridge"
},
{
"count": 3805.8350071736013,
"id": 5,
"name": "Marine Parkway-Gil Hodges Memorial Bridge"
},
{
"count": 4577.186513629842,
"id": 6,
"name": "Cross Bay Veterans Memorial Bridge"
},
{
"count": 13830.994261119082,
"id": 7,
"name": "Queens Midtown Tunnel"
},
{
"count": 6900.047345767575,
"id": 8,
"name": "Brooklyn-Battery Tunnel"
},
{
"count": 25262.48493543759,
"id": 9,
"name": "Throgs Neck Bridge"
},
{
"count": 18275.3543758967,
"id": 11,
"name": "Verrazano-Narrows Bridge"
}
],
"electronic": [
{
"count": 51316.53802008608,
"id": 1,
"name": "Robert F. Kennedy Bridge Bronx Plaza"
},
{
"count": 67502.12482065997,
"id": 2,
"name": "Robert F. Kennedy Bridge Manhattan Plaza"
},
{
"count": 76906.89383070302,
"id": 3,
"name": "Bronx-Whitestone Bridge"
},
{
"count": 51861.5933908046,
"id": 4,
"name": "Henry Hudson Bridge"
},
{
"count": 17488.73888091822,
"id": 5,
"name": "Marine Parkway-Gil Hodges Memorial Bridge"
},
{
"count": 16056.855093256814,
"id": 6,
"name": "Cross Bay Veterans Memorial Bridge"
},
{
"count": 65148.13916786227,
"id": 7,
"name": "Queens Midtown Tunnel"
},
{
"count": 38908.203730272595,
"id": 8,
"name": "Brooklyn-Battery Tunnel"
},
{
"count": 84575.18794835007,
"id": 9,
"name": "Throgs Neck Bridge"
},
{
"count": 74291.31420373028,
"id": 11,
"name": "Verrazano-Narrows Bridge"
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment