Skip to content

Instantly share code, notes, and snippets.

@jshumakerpruitt

jshumakerpruitt/_.md

Created May 18, 2014 20:03
Show Gist options
  • Save jshumakerpruitt/a4f2c3a9ccff4984026a to your computer and use it in GitHub Desktop.
Save jshumakerpruitt/a4f2c3a9ccff4984026a to your computer and use it in GitHub Desktop.
Download ZIP
trib_line_graph
Raw
_.md
Raw
config.json
{"description":"trib_line_graph","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"turnstile_traffic.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/sLb82p4.gif"}
Raw
inlet.js
//code by Mike Dewar (Getting Started with D3)
var svg = d3.select("svg")
var data = tributary.turnstile_traffic
var margin = 40, width = 700 - margin, height = 300 - margin
svg.attr({
width: width+margin,
height: height+margin
});
svg.append("g").attr("class", "chart");
svg.selectAll("circle.times_square")
.data(data.times_square)
.enter()
.append("circle")
.attr("class","times_square");
svg.selectAll("circle.grand_central")
.data(data.grand_central)
.enter()
.append("circle")
.attr("class","grand_central");
var count_extent = d3.extent(
data.times_square.concat(data.grand_central),
function(d) {return d.count})
var time_extent = d3.extent(
data.times_square.concat(data.grand_central),
function(d) {return d.time})
var count_scale = d3.scale.linear()
.domain(count_extent)
.range([height, margin]);
var time_scale = d3.time.scale()
.domain(time_extent)
.range([margin, width]);
svg.selectAll("circle")
.attr({
cy: function(d){return count_scale(d.count)},
cx: function(d){return time_scale(d.time)},
r: 3,
fill: "black"
});
var time_axis = d3.svg.axis()
.scale(time_scale);
var count_axis = d3.svg.axis()
.scale(count_scale).orient("left");
svg.append("g")
.attr({
"class": "x axis",
transform: "translate(0," +height + ")"
}).call(time_axis);
svg.append("g")
.attr({
"class": "y axis",
transform: "translate(" + margin + ",0)"
}).call(count_axis);
var line = d3.svg.line()
.x(function(d){return time_scale(d.time)})
.y(function(d){return count_scale(d.count)})
svg.append("path")
.attr({
"d": line(data.times_square),
"class": "times_square"
})
svg.append("path")
.attr({
"d": line(data.grand_central),
"class": "grand_central"
})
svg.select(".y.axis")
.append("text")
.text("mean number of turnstile revolutions")
.attr({
transform: "rotate(90," + (-margin) +",0)",
x: 20,
y: 0
})
svg.select(".x.axis")
.append("text")
.text("time")
.attr({
x: function(){return (width/1.6) - margin},
y: margin/1.5
})
Raw
style.css
.axis{
font-family: arial;
font-size: 8pt;
}
path{
fill: none;
stroke: black;
stroke-width: 2px;
}
.tick{
fill: none;
stroke: black
}
circle{
stroke-width: 0.5px;
stroke: black;
}
circle.times_square {
fill: pink;
}
circle.grand_central{
fill: MediumSeaGreen;
}
path.grand_central{
stroke: MediumSeaGreen
}
path.times_square{
stroke: pink
}
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