All Trains All Predictions

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel='stylesheet' type='text/css' href='css/style.css' />
        <meta http-equiv='content-type' content='text/html; charset=utf-8' />
        <meta name='viewport' content='initial-scale=1.0 maximum-scale=1.0'>
        <style>
        body {
            font:normal 14px/20px monospace;
        }
        </style>
    </head>
    <body>
        <h1>all trains all city</h1>
        <p>using the <a href='https://github.com/tmcw/wmataapiapi'>wmata api api</a> to pull all predictions for all stops in DC</p>
        <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script>
        var stops = d3.select('body').append('div');
        d3.json('https://secret-wildwood-1777.herokuapp.com/rail/station/all/prediction', function(err, data) {
            var s = stops.selectAll('div.stop')
                .data(d3.entries(data), function(d) {
                    return d.key;
                });

s.exit().remove();

s.enter()
                .append('div')
                .attr('class', 'stop')
                .append('h3')
                .text(function(d) {
                    return d.value[0].LocationName;
                });

var prediction = s.selectAll('div.prediction')
                .data(function(d) {
                    return d.value.filter(function(_) {
                        return _.Line && _.DestinationName && _.Min
                    });
                });

prediction.exit().remove();

var predictionEnter = prediction.enter().append('div')
                .attr('class', 'prediction');

predictionEnter.append('span')
                .text('● ')
                .style('color', function(d) {
                    return d.Line
                        .replace('RD', 'red')
                        .replace('YL', 'yellow')
                        .replace('OR', 'orange')
                        .replace('BL', 'blue');
                });

predictionEnter.append('span')
                .text(function(d) {
                    return '→ ' + d.DestinationName + ' in ' + d.Min + ' minutes';
                })
                .attr('title', function(d) {
                    return 'retrieved ' + Math.ceil(((+new Date()) - d.retrieved) / (1000 * 60)) + ' minutes ago';
                });
        });
        </script>
    </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js