Skip to content

Instantly share code, notes, and snippets.

@jfost00

jfost00/README.md

Last active March 6, 2016 05:31
Show Gist options
  • Save jfost00/f2fe4a4e1bacafe04186 to your computer and use it in GitHub Desktop.
Save jfost00/f2fe4a4e1bacafe04186 to your computer and use it in GitHub Desktop.
Download ZIP
Turnstile 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%; margin-left:20px; margin-top:50px;}
.axis{
font-family: arial;
font-size:0.6em;
}
path{
fill:none;
stroke:black;
stroke-width:2px;
}
.tick{
fill:none;
stroke:black;
}
circle{
stroke:black;
stroke-width:0.5px;
}
circle.times_square{
fill:DeepPink;
}
circle.grand_central{
fill:MediumSeaGreen;
}
path.times_square{
stroke:DeepPink;
}
path.grand_central{
stroke:MediumSeaGreen;
}
</style>
</head>
<body>
<script>
d3.json("turnstile_traffic.json", draw);
function draw(data) {
"use strict";
var margin = 40,
width = 700 - margin,
height = 300 - margin;
var count_extent = d3.extent(
data.times_square.concat(data.grand_central),
function(d) { return d.count}
);
var count_scale = d3.scale.linear()
.domain(count_extent)
.range([height, margin]);
var time_extent = d3.extent(
data.times_square.concat(data.grand_central),
function(d) { return d.time}
);
var time_scale = d3.time.scale()
.domain(time_extent)
.range([margin, width]);
var time_axis = d3.svg.axis()
.scale(time_scale);
var count_axis = d3.svg.axis()
.scale(count_scale)
.orient("left");
var line = d3.svg.line()
.x(function(d){return time_scale(d.time)})
.y(function(d){return count_scale(d.count)});
d3.select("body")
.append("svg")
.attr("width", width+margin)
.attr("height", height+margin)
.attr("class", "chart");
d3.select("svg")
.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0,"+height+")")
.call(time_axis);
d3.select("svg")
.append("g")
.attr("class", "y axis")
.attr("transform", "translate("+margin+",0)")
.call(count_axis);
d3.select("svg")
.selectAll("circle.times_square")
.data(data.times_square)
.enter()
.append("circle")
.attr("class", "times_square");
d3.select("svg")
.selectAll("circle.grand_central")
.data(data.grand_central)
.enter()
.append("circle")
.attr("class", "grand_central")
d3.selectAll("circle")
.attr("cy", function(d) {return count_scale(d.count);})
.attr("cx", function(d) {return time_scale(d.time);})
.attr("r", 3);
d3.select("svg")
.append("path")
.attr("d", line(data.times_square))
.attr("class", "times_square");
d3.select("svg")
.append("path")
.attr("d", line(data.grand_central))
.attr("class", "grand_central");
d3.select(".y.axis")
.append("text")
.text("Mean Number of Turnstile Revolutions")
.attr("transform", "rotate (90, "+ -margin + ", 0)")
.attr("x", 20)
.attr("y", 0);
d3.select(".x.axis")
.append("text")
.text("Time")
.attr("x", function(){return (width/1.6)-margin})
.attr("y", margin/1.5);
}
</script>
</body>
Raw
turnstile_traffic.json
{
"times_square": [
{
"count": 36.333333333333336,
"time": 1328356800000
},
{
"count": 87.36111111111111,
"time": 1328371200000
},
{
"count": 216.22222222222223,
"time": 1328385600000
},
{
"count": 418.80555555555554,
"time": 1328400000000
},
{
"count": 351.1111111111111,
"time": 1328414400000
},
{
"count": 213.94444444444446,
"time": 1328428800000
},
{
"count": 29.36111111111111,
"time": 1328443200000
},
{
"count": 69.44444444444444,
"time": 1328457600000
},
{
"count": 152.41666666666666,
"time": 1328472000000
},
{
"count": 291.80555555555554,
"time": 1328486400000
},
{
"count": 205.44444444444446,
"time": 1328500800000
},
{
"count": 98.38888888888889,
"time": 1328515200000
},
{
"count": 34.77777777777778,
"time": 1328529600000
},
{
"count": 245.33333333333334,
"time": 1328544000000
},
{
"count": 274.6111111111111,
"time": 1328558400000
},
{
"count": 758.4722222222222,
"time": 1328572800000
},
{
"count": 391.97222222222223,
"time": 1328587200000
},
{
"count": 88.66666666666667,
"time": 1328601600000
},
{
"count": 39.833333333333336,
"time": 1328616000000
},
{
"count": 20,
"time": 1328618993000
},
{
"count": 140,
"time": 1328630400000
},
{
"count": 328.94444444444446,
"time": 1328644800000
},
{
"count": 788.8611111111111,
"time": 1328659200000
},
{
"count": 441.77777777777777,
"time": 1328673600000
},
{
"count": 101.33333333333333,
"time": 1328688000000
},
{
"count": 37.388888888888886,
"time": 1328702400000
},
{
"count": 264.27777777777777,
"time": 1328716800000
},
{
"count": 293.75,
"time": 1328731200000
},
{
"count": 794.3333333333334,
"time": 1328745600000
},
{
"count": 434.3888888888889,
"time": 1328760000000
},
{
"count": 104.02777777777777,
"time": 1328774400000
},
{
"count": 36.69444444444444,
"time": 1328788800000
},
{
"count": 253.97222222222223,
"time": 1328803200000
},
{
"count": 329.5625,
"time": 1328817600000
},
{
"count": 70,
"time": 1328832000000
},
{
"count": 467.3333333333333,
"time": 1328846400000
},
{
"count": 120.86111111111111,
"time": 1328860800000
},
{
"count": 39.138888888888886,
"time": 1328875200000
},
{
"count": 249.66666666666666,
"time": 1328889600000
},
{
"count": 334.30555555555554,
"time": 1328904000000
},
{
"count": 815.8611111111111,
"time": 1328918400000
},
{
"count": 475.05555555555554,
"time": 1328932800000
}
],
"grand_central": [
{
"count": 22.842105263157894,
"time": 1328356800000
},
{
"count": 143.57894736842104,
"time": 1328371200000
},
{
"count": 329.94736842105266,
"time": 1328385600000
},
{
"count": 411.57894736842104,
"time": 1328400000000
},
{
"count": 255.42105263157896,
"time": 1328414400000
},
{
"count": 89.57894736842105,
"time": 1328428800000
},
{
"count": 14.368421052631579,
"time": 1328443200000
},
{
"count": 99.84210526315789,
"time": 1328457600000
},
{
"count": 220.31578947368422,
"time": 1328472000000
},
{
"count": 301.7368421052632,
"time": 1328486400000
},
{
"count": 141.89473684210526,
"time": 1328500800000
},
{
"count": 75,
"time": 1328515200000
},
{
"count": 56.31578947368421,
"time": 1328529600000
},
{
"count": 606.6666666666666,
"time": 1328538796000
},
{
"count": 196.58333333333334,
"time": 1328544000000
},
{
"count": 405.2105263157895,
"time": 1328558400000
},
{
"count": 27.857142857142858,
"time": 1328560024000
},
{
"count": 683.7142857142857,
"time": 1328572800000
},
{
"count": 492.2105263157895,
"time": 1328587200000
},
{
"count": 73,
"time": 1328601600000
},
{
"count": 72.57894736842105,
"time": 1328616000000
},
{
"count": 767.6842105263158,
"time": 1328630400000
},
{
"count": 467.2105263157895,
"time": 1328644800000
},
{
"count": 1003.578947368421,
"time": 1328659200000
},
{
"count": 501.63157894736844,
"time": 1328673600000
},
{
"count": 73.42105263157895,
"time": 1328688000000
},
{
"count": 62.1578947368421,
"time": 1328702400000
},
{
"count": 531,
"time": 1328716800000
},
{
"count": 405.6842105263158,
"time": 1328731200000
},
{
"count": 1038.3157894736842,
"time": 1328745600000
},
{
"count": 511.3157894736842,
"time": 1328760000000
},
{
"count": 79.15789473684211,
"time": 1328774400000
},
{
"count": 63.05263157894737,
"time": 1328788800000
},
{
"count": 536.6842105263158,
"time": 1328803200000
},
{
"count": 458.2105263157895,
"time": 1328817600000
},
{
"count": 1025.2105263157894,
"time": 1328832000000
},
{
"count": 561.8421052631579,
"time": 1328846400000
},
{
"count": 101.89473684210526,
"time": 1328860800000
},
{
"count": 58.78947368421053,
"time": 1328875200000
},
{
"count": 481.3157894736842,
"time": 1328889600000
},
{
"count": 479.89473684210526,
"time": 1328904000000
},
{
"count": 1072.421052631579,
"time": 1328918400000
},
{
"count": 508.8421052631579,
"time": 1328932800000
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment