Skip to content

Instantly share code, notes, and snippets.

@nadinagray

nadinagray/.block

Last active June 26, 2018 16:31
Show Gist options
  • Save nadinagray/a496e620b77b61d8979478421f81d3db to your computer and use it in GitHub Desktop.
Save nadinagray/a496e620b77b61d8979478421f81d3db to your computer and use it in GitHub Desktop.
Download ZIP
Subway Wait Assessment
Raw
.block
license: mit
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>
<link rel="stylesheet" type="text/css" href="styles.css">
<script>
var time_scale;
var percent_scale;
//todo
function show_all_timeseries(d,i){
//toggle all filters on (fb, ig, youtube twitter)
// get the id of the current element
var id = d.line_id
// see if we have an associated category of time series
var ts = d3.select('#'+id)
// toggle
if (ts.empty()){
d3.json('subway_wait.json', function(data){
filtered_data = data.filter(function(d){return d.line_id === id})
draw_timeseries(filtered_data, id)
})
} else {
ts.remove()
}
}
function get_timeseries_data(d,i){
// get the id of the current element
var id = d.line_id
// see if we have an associated time series
var ts = d3.select('#'+id)
// toggle
if (ts.empty()){
d3.json('subway_wait.json', function(data){
filtered_data = data.filter(function(d){return d.line_id === id})
draw_timeseries(filtered_data, id)
})
} else {
ts.remove()
}
}
function add_label(circle, d, i){
d3.select(circle)
.transition()
.attr('r', 9)
d3.select('#' + d.line_id).append('text')
.text(d.line_id.split('_')[1])
.attr('text-anchor','middle')
.style("dominant-baseline","central")
.attr('x', time_scale(d.time))
.attr('y', percent_scale(d.late_percent))
.attr('class','linelabel')
.style('opacity',0)
.style('fill','white')
.transition()
.style('opacity',1)
}
function draw_timeseries(data, id){
var line = d3.svg.line()
.x(function(d){return time_scale(d.time)})
.y(function(d){return percent_scale(d.late_percent)})
.interpolate("linear")
var g = d3.select('#chart')
.append('g')
.attr('id', id)
.attr('class', 'timeseries ' + id)
g.append('path')
.attr('d', line(data))
g.selectAll('circle')
.data(data)
.enter()
.append("circle")
.attr('cx', function(d) {return time_scale(d.time)})
.attr('cy', function(d) {return percent_scale(d.late_percent)})
.attr('r',0)
var enter_duration = 1000;
g.selectAll('circle')
.transition()
.delay(function(d, i) { return i / data.length * enter_duration; })
.attr('r', 5)
.each('end',function(d,i){
if (i === data.length-1){
add_label(this,d)
}
})
g.selectAll('circle')
.on('mouseover', function(d){
d3.select(this)
.transition().attr('r', 9)
})
.on('mouseout', function(d,i){
if (i !== data.length-1) {
d3.select(this).transition().attr('r', 5)
}
})
g.selectAll('circle')
.on('mouseover.tooltip', function(d){
d3.select("text." + d.line_id).remove()
d3.select('#chart')
.append('text')
.text(d.late_percent + "%")
.attr('x', time_scale(d.time) + 10)
.attr('y', percent_scale(d.late_percent) - 10)
.attr('class', d.line_id)
})
.on('mouseout.tooltip', function(d){
d3.select("text." + d.line_id)
.transition()
.duration(500)
.style('opacity',0)
.attr('transform','translate(10, -10)')
.remove()
})
}
function draw(data) {
"use strict";
// set up the viewport, the scales, and axis generators
var container_dimensions = {width: 700, height: 500},
margins = {top: 10, right: 20, bottom: 30, left: 60},
chart_dimensions = {
width: container_dimensions.width - margins.left - margins.right,
height: container_dimensions.height - margins.top - margins.bottom
};
time_scale = d3.time.scale()
.range([0, chart_dimensions.width])
.domain([1230789600000, 1301634000000]);
percent_scale = d3.scale.linear()
.range([chart_dimensions.height, 0])
.domain([65, 90]);
var time_axis = d3.svg.axis()
.scale(time_scale)
var count_axis = d3.svg.axis()
.scale(percent_scale)
.orient("left");
// draw axes
var g = d3.select('#timeseries')
.append('svg')
.attr("width", container_dimensions.width)
.attr("height", container_dimensions.height)
.append("g")
.attr("transform", "translate(" + margins.left + "," + margins.top + ")")
.attr("id","chart");
g.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + chart_dimensions.height + ")")
.call(time_axis);
g.append("g")
.attr("class", "y axis")
.call(count_axis);
// draw the y-axis label
d3.select('.y.axis')
.append('text')
.text('EMV ($)')
.attr('transform', "rotate (-270, 0, 0)")
.attr('x', 100)
.attr('y', 50);
// draw the key
var key_items = d3.select('#key')
.selectAll('div')
.data(data)
.enter()
.append('div')
.attr('class','key_line')
.attr('id',function(d){return d.line_id+"_key"})
key_items.append('div')
.attr('id', function(d){return 'key_square_' + d.line_id})
.attr('class', function(d){return 'key_square ' + d.line_id})
key_items.append('div')
.attr('class','key_label')
.text(function(d){return d.line_name})
d3.selectAll('.key_line')
.on('click', get_timeseries_data)
}
</script>
</head>
<body>
<div id = "timeseries"></div>
<div id = "key"></div>
<script>
d3.json("subway_wait_mean.json", draw);
</script>
</body>
Raw
styles.css
body{
font-family:sans-serif;
}
.axis path, line{
stroke:black;
}
.timeseries path{
stroke-width:3px;
}
.timeseries circle{
stroke: white;
}
.timeseries text{
fill: white;
stroke: none;
font-size:12px;
font-weight: bold;
}
.line {
float:left;
}
.line_container{
width: 150px;
height: 20px;
}
path{
fill: none;
}
.key{
float:right;
}
.key_line{
font-size:17px;
width:100%;
}
.key_square{
height:10px;
width:10px;
outline:solid 1px black;
float:left;
margin-right:10px;
margin-top:6px;
margin-left:10px;
}
#timeseries{
float:left;
}
.Line_A, .Line_C, .Line_E{
stroke:#2850AD;
fill:#2850AD;
background-color:#2850AD;
}
.Line_B, .Line_D, .Line_F, .Line_M {
stroke:#FF6319;
fill:#FF6319;
background-color:#FF6319;
}
.Line_G {
stroke:#6CBE45;
fill:#6CBE45;
background-color:#6CBE45;
}
.Line_Z_J {
stroke:#996633;
fill:#996633;
background-color:#996633;
}
.Line_L {
stroke:#A7A9AC;
fill:#A7A9AC;
background-color:#A7A9AC;
}
.Line_N, .Line_Q, .Line_R {
stroke:#FCCC0A;
fill:#FCCC0A;
background-color:#FCCC0A;
}
.Line_S {
stroke:#808183;
fill:#808183;
background-color:#808183;
}
.Line_1, .Line_2, .Line_3{
stroke:#EE352E;
fill:#EE352E;
background-color:#EE352E;
}
.Line_4, .Line_5, .Line_6{
stroke:#00933C;
fill:#00933C;
background-color:#00933C;
}
.Line_7 {
stroke:#B933AD;
fill:#B933AD;
background-color:#B933AD;
}
Raw
subway_wait.json
[
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 79.5,
time: 1230786000000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 79.2,
time: 1233464400000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 79.8,
time: 1235883600000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 80.2,
time: 1238558400000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 79.9,
time: 1241150400000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 79.9,
time: 1243828800000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 79.7,
time: 1246420800000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 79.3,
time: 1249099200000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 79.8,
time: 1251777600000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 80,
time: 1254369600000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 80.2,
time: 1257048000000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 80,
time: 1259643600000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 80.7,
time: 1262322000000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 81,
time: 1265000400000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 81.4,
time: 1267419600000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 81.4,
time: 1270094400000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 82,
time: 1272686400000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 82.5,
time: 1275364800000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 83,
time: 1277956800000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 83.5,
time: 1280635200000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 83.2,
time: 1283313600000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 83.9,
time: 1288584000000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 84.1,
time: 1293858000000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 84.3,
time: 1296536400000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 83.5,
time: 1298955600000
},
{
line_id: "Line_G",
line_name: "G Line",
late_percent: 83,
time: 1301630400000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 82.9,
time: 1230786000000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 83.5,
time: 1233464400000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 83.8,
time: 1235883600000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 84.1,
time: 1238558400000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 84.8,
time: 1241150400000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 84.8,
time: 1243828800000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 84.8,
time: 1246420800000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 85,
time: 1249099200000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 85.1,
time: 1251777600000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 85.6,
time: 1254369600000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 86.1,
time: 1257048000000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 86,
time: 1259643600000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 86.3,
time: 1262322000000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 86.1,
time: 1265000400000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 86.5,
time: 1267419600000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 86.1,
time: 1270094400000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 85.4,
time: 1272686400000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 85.5,
time: 1275364800000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 85.9,
time: 1277956800000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 85.7,
time: 1280635200000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 85.9,
time: 1283313600000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 85.4,
time: 1288584000000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 84.9,
time: 1293858000000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 84.1,
time: 1296536400000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 83.5,
time: 1298955600000
},
{
line_id: "Line_Z_J",
line_name: "J Z Line",
late_percent: 83.6,
time: 1301630400000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 75.1,
time: 1230786000000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 75.5,
time: 1233464400000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 75.8,
time: 1235883600000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 76.3,
time: 1238558400000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 76.6,
time: 1241150400000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 76.6,
time: 1243828800000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 77.1,
time: 1246420800000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 77.7,
time: 1249099200000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 78,
time: 1251777600000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 77.7,
time: 1254369600000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 78.4,
time: 1257048000000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 77.8,
time: 1259643600000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 77.9,
time: 1262322000000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 77.3,
time: 1265000400000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 76.9,
time: 1267419600000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 76.8,
time: 1270094400000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 76.6,
time: 1272686400000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 76.4,
time: 1275364800000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 76.5,
time: 1277956800000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 76.3,
time: 1280635200000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 75.8,
time: 1283313600000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 75.8,
time: 1288584000000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 77,
time: 1293858000000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 77.6,
time: 1296536400000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 78.8,
time: 1298955600000
},
{
line_id: "Line_L",
line_name: "L Line",
late_percent: 79.1,
time: 1301630400000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 85.2,
time: 1230786000000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 85.7,
time: 1233464400000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 85.7,
time: 1235883600000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 85.8,
time: 1238558400000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 85.9,
time: 1241150400000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 86.1,
time: 1243828800000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 87.1,
time: 1246420800000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 87.9,
time: 1249099200000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 87.9,
time: 1251777600000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 87.2,
time: 1254369600000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 87.6,
time: 1257048000000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 87.7,
time: 1259643600000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 88,
time: 1262322000000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 87.8,
time: 1265000400000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 88,
time: 1267419600000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 87.5,
time: 1270094400000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 87.3,
time: 1272686400000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 87.8,
time: 1275364800000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 87.3,
time: 1277956800000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 86.6,
time: 1280635200000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 84.8,
time: 1283313600000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 83.1,
time: 1288584000000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 82.3,
time: 1293858000000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 82.1,
time: 1296536400000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 81.4,
time: 1298955600000
},
{
line_id: "Line_M",
line_name: "M Line",
late_percent: 80.9,
time: 1301630400000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 78.8,
time: 1230786000000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 79,
time: 1233464400000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 79.3,
time: 1235883600000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 79.4,
time: 1238558400000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 80,
time: 1241150400000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 80.4,
time: 1243828800000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 80.6,
time: 1246420800000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 81.4,
time: 1249099200000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 82.1,
time: 1251777600000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 81.8,
time: 1254369600000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 82.2,
time: 1257048000000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 82,
time: 1259643600000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 82.2,
time: 1262322000000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 82.4,
time: 1265000400000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 82.6,
time: 1267419600000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 82.7,
time: 1270094400000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 81.9,
time: 1272686400000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 81.4,
time: 1275364800000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 81.2,
time: 1277956800000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 80.4,
time: 1280635200000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 79.3,
time: 1283313600000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 78.8,
time: 1288584000000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 77.5,
time: 1293858000000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 77,
time: 1296536400000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 76.3,
time: 1298955600000
},
{
line_id: "Line_N",
line_name: "N Line",
late_percent: 76.1,
time: 1301630400000
}
]
Raw
subway_wait_mean.json
[
{
"line_id": "Line_G",
"line_name": "Adidas",
"mean": 81.34615384615384
},
{
"line_id": "Line_Z_J",
"line_name": "Toms",
"mean": 85.05384615384615
},
{
"line_id": "Line_L",
"line_name": "Puma",
"mean": 76.97692307692306
},
{
"line_id": "Line_M",
"line_name": "Converse",
"mean": 85.94999999999999
},
{
"line_id": "Line_N",
"line_name": "New Balance",
"mean": 80.26153846153846
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment