Subway Wait Assessment

Working through the book Getting Started with D3

forked from jfost00's block: Subway Wait Assessment

<!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;
    
    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: 400},
            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('percent on time')
            .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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js