wwymak · August 26, 2017 16:57
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body { margin:0; padding:0; }
            #map { position:absolute; top:0; bottom:0; width:100%; }
            .relative-div {
                position: relative;
            }
            .legend {
                background-color: #fff;
                border-radius: 3px;
                bottom: 30px;
                box-shadow: 0 1px 2px rgba(0,0,0,0.10);
                font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
                padding: 10px;
                position: absolute;
                right: 10px;
                z-index: 1;
            }

            .legend h4 {
                margin: 0 0 10px;
            }

            .legend div span {
                border-radius: 50%;
                display: inline-block;
                height: 10px;
                margin-right: 5px;
                width: 10px;
            }

            .mapboxgl-popup {
                max-width: 400px;
                font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
            }

        </style>
        <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>-->
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
        <title>Eclipse</title>
    </head>
    <body>

        <!--<div class="container">-->
            <div id="map"></div>
        <!--</div>-->

        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script>
        <script src="https://d3js.org/d3.v4.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
        <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
        <script src="main.js"></script>
    </body>
 </html>
diff --git a/latlngs.csv b/latlngs.csv
diff --git a/main.js b/main.js
 (function () {
    let mapData;

    // the map needs geojson input so turn the lnglat data into geojson
    let convertLngLatToGeojson = function (latlngs) {
        let geojson = {
            "type": "FeatureCollection",
            "features": []
        };
        latlngs.forEach(d => geojson.features.push({
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [+d.lng, +d.lat]
            },
            "properties": {
                source: d.source
            }
        }));
        return geojson;
    };

    let animateMarker = function (tick, data) {
        mapDisplay.getSource('locationData').setData(data[tick % data.length].geojson);
        tick +=1;

        if(tick < data.length) {
        // Request the next frame of the animation.
            requestAnimationFrame((timestep) => {animateMarker(tick, data)});
        }
        else {
            let combinedgeojson = convertLngLatToGeojson(mapData)
            mapDisplay.getSource('locationData').setData(combinedgeojson)
        }
        // d3.interval((timestep) => {animateMarker(tick, data)},1000);
    };

    mapboxgl.accessToken = 'pk.eyJ1Ijoid3d5bWFrIiwiYSI6IkxEbENMZzgifQ.pxk3bdzd7n8h4pKzc9zozw';
    
    let mapDisplay = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/dark-v9',
        zoom: 3,
        center: [-98.5, 39.8]
    });
    mapDisplay.addControl(new mapboxgl.NavigationControl());

    mapDisplay.on('load', () => {
        d3.csv('latlngs.csv', d => {
            return {
                lat : +d.lat,
                lng : +d.long,
                timeParsed: moment(d.created_at).startOf('minute'),
                time : new Date(d.created_at),
                source : d.source
            }
        },(err, data) => {

            data.sort((a,b) => a.time.getTime() - b.time.getTime());
            let mintime = d3.min(data, d=> d.time.getTime());
            let maxtime = d3.max(data, d=> d.time.getTime());
            let distinctSources = Array.from(new Set(data.map(d => d.source)));

            data.forEach(d => {
                d.timeElapsed = (d.timeParsed.unix() - moment(mintime).startOf('minute').unix())/60;
            });
            mapData = data;
            let timeLapseArr= d3.nest().key(d => d.timeElapsed).entries(data);
            timeLapseArr.forEach(d => {
                d.key = +d.key;
                d.geojson = convertLngLatToGeojson(d.values)
            });


            if(mapDisplay.getSource('locationData')){
                mapDisplay.getSource('locationData').setData(timeLapseArr);
                return;
            }
            mapDisplay.addSource("locationData", {
                type: "geojson",
                data: timeLapseArr[0].geojson,
            });

            mapDisplay.addLayer({
                id: 'tweets',
                type: 'circle',
                source: 'locationData',
                paint: {
                    'circle-radius': {
                        'base': 2,
                        'stops': [[2, 4], [12, 8], [15, 20], [20, 80]]
                    },

                    // color circles 
                    'circle-color': '#3bb2d0'
                    // 'circle-color': {
                    //     property: 'network_name',
                    //     type: 'categorical',
                    //     stops: [
                    //         ['EE', '#fbb03b'],
                    //         ['3', '#223b53'],
                    //         ['O2', '#e55e5e'],
                    //         ['Vodafone', '#3bb2d0'],
                    //         ['Other', '#ccc']]
                    // }
                }
            });
            animateMarker(0, timeLapseArr)
        });
    });

 })();
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	.relative-div {
	position: relative;
	}
	.legend {
	background-color: #fff;
	border-radius: 3px;
	bottom: 30px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.10);
	font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
	padding: 10px;
	position: absolute;
	right: 10px;
	z-index: 1;
	}

	.legend h4 {
	margin: 0 0 10px;
	}

	.legend div span {
	border-radius: 50%;
	display: inline-block;
	height: 10px;
	margin-right: 5px;
	width: 10px;
	}

	.mapboxgl-popup {
	max-width: 400px;
	font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
	}

	</style>
	<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>-->
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
	<title>Eclipse</title>
	</head>
	<body>

	<!--<div class="container">-->
	<div id="map"></div>
	<!--</div>-->

	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
	<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
	<script src="main.js"></script>
	</body>
	</html>
	(function () {
	let mapData;

	// the map needs geojson input so turn the lnglat data into geojson
	let convertLngLatToGeojson = function (latlngs) {
	let geojson = {
	"type": "FeatureCollection",
	"features": []
	};
	latlngs.forEach(d => geojson.features.push({
	"type": "Feature",
	"geometry": {
	"type": "Point",
	"coordinates": [+d.lng, +d.lat]
	},
	"properties": {
	source: d.source
	}
	}));
	return geojson;
	};

	let animateMarker = function (tick, data) {
	mapDisplay.getSource('locationData').setData(data[tick % data.length].geojson);
	tick +=1;

	if(tick < data.length) {
	// Request the next frame of the animation.
	requestAnimationFrame((timestep) => {animateMarker(tick, data)});
	}
	else {
	let combinedgeojson = convertLngLatToGeojson(mapData)
	mapDisplay.getSource('locationData').setData(combinedgeojson)
	}
	// d3.interval((timestep) => {animateMarker(tick, data)},1000);
	};

	mapboxgl.accessToken = 'pk.eyJ1Ijoid3d5bWFrIiwiYSI6IkxEbENMZzgifQ.pxk3bdzd7n8h4pKzc9zozw';

	let mapDisplay = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/dark-v9',
	zoom: 3,
	center: [-98.5, 39.8]
	});
	mapDisplay.addControl(new mapboxgl.NavigationControl());

	mapDisplay.on('load', () => {
	d3.csv('latlngs.csv', d => {
	return {
	lat : +d.lat,
	lng : +d.long,
	timeParsed: moment(d.created_at).startOf('minute'),
	time : new Date(d.created_at),
	source : d.source
	}
	},(err, data) => {

	data.sort((a,b) => a.time.getTime() - b.time.getTime());
	let mintime = d3.min(data, d=> d.time.getTime());
	let maxtime = d3.max(data, d=> d.time.getTime());
	let distinctSources = Array.from(new Set(data.map(d => d.source)));

	data.forEach(d => {
	d.timeElapsed = (d.timeParsed.unix() - moment(mintime).startOf('minute').unix())/60;
	});
	mapData = data;
	let timeLapseArr= d3.nest().key(d => d.timeElapsed).entries(data);
	timeLapseArr.forEach(d => {
	d.key = +d.key;
	d.geojson = convertLngLatToGeojson(d.values)
	});


	if(mapDisplay.getSource('locationData')){
	mapDisplay.getSource('locationData').setData(timeLapseArr);
	return;
	}
	mapDisplay.addSource("locationData", {
	type: "geojson",
	data: timeLapseArr[0].geojson,
	});

	mapDisplay.addLayer({
	id: 'tweets',
	type: 'circle',
	source: 'locationData',
	paint: {
	'circle-radius': {
	'base': 2,
	'stops': [[2, 4], [12, 8], [15, 20], [20, 80]]
	},

	// color circles
	'circle-color': '#3bb2d0'
	// 'circle-color': {
	// property: 'network_name',
	// type: 'categorical',
	// stops: [
	// ['EE', '#fbb03b'],
	// ['3', '#223b53'],
	// ['O2', '#e55e5e'],
	// ['Vodafone', '#3bb2d0'],
	// ['Other', '#ccc']]
	// }
	}
	});
	animateMarker(0, timeLapseArr)
	});
	});

	})();