tmcw/index.html

## index.html
<!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="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script>
        var stops = d3.select('body').append('div');
        d3.json('http://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>
	<!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="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
	var stops = d3.select('body').append('div');
	d3.json('http://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>