Skip to content

Instantly share code, notes, and snippets.

@jfost00

jfost00/README.md

Last active March 6, 2016 05:33
Show Gist options
  • Save jfost00/f46d4f04a7bbe747b595 to your computer and use it in GitHub Desktop.
Save jfost00/f46d4f04a7bbe747b595 to your computer and use it in GitHub Desktop.
Download ZIP
Mean Daily Plaza Traffic
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
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:2px;
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>
<h1>Mean Daily Plaza Traffic</h1>
<script>
d3.json("plaza_traffic.json", draw);
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)});
}
</script>
</body>
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