sara-maria · October 31, 2017 11:35
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
         <!-- Declare the character set of the document -->
        <meta charset="UTF-8">
         <!-- Support IE9-IE10 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <!-- Set the viewport -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <!-- Javascripts -->
        <script src="http://d3js.org/d3.v3.min.js"></script>
    
    
    <style>
        body {
                overflow:visible;
                background: #454545;
                position: relative;
                }
        
        svg {
                position: absolute;
                left: 0;
                top: 0;
            }

        .city {
                fill: rgb(255, 255, 193);
                stroke: rgb(142, 142, 21);
                stroke-width: 0.4;
            }
            
        .highlight {
                fill: rgb(205, 39, 235);
                stroke: rgb(226, 47, 211);
            }
    
    </style>
    
    <script type="text/javascript">  
        var margin = 0,
            width = 800 - margin,
            height = 500 - margin;
    
    function draw(geo_data) {
          
        var svg = d3.select("body").select("#content").select("svg")
            .attr("width", width + margin)
            .attr("height", height + margin);
        
        
        /////////////////////////////////////////////////////////////////////////////////////////////
        /////////////////////////////////////////////////////////////////////////////////////////////
        // DRAW GLOBE
        // Based on: http://bl.ocks.org/PatrickStotz/1f19b3e4cb848100ffd7
        /////////////////////////////////////////////////////////////////////////////////////////////
        /////////////////////////////////////////////////////////////////////////////////////////////
        
       var earthcolor = d3.rgb("rgb(105, 113, 142)");
       var countryfillcolor = d3.rgb("rgb(84, 139, 84)"); 
       var countrystrokecolor = d3.rgb("rgb(25, 64, 224)"); 

          var projection = d3.geo.orthographic()
                            .scale(200)
                            .translate([width / 2, height / 2])
                            .clipAngle(90) 
                          //.precision(0.2); 
          
         var pathproj = d3.geo.path().projection(projection);

        // drawing a sphere as landmass
        var g = svg.append("g");
            g.append("path")
               .datum({type: "Sphere"})
               .attr("class", "sphere")
               .attr("d", pathproj)
               .attr("fill", earthcolor);

        // drawing the worldmap
        var map = svg.append('g').selectAll('path')
                     .attr("class", "fill")
                     .data(geo_data.features)
                     .enter()
                     .append('path')
                     .attr('d', pathproj)
                     .style('fill', countryfillcolor) //country fill
                     .style('stroke', countrystrokecolor)
                     .style('stroke-width', .5)
                     .style('opacity',.8);
        
                /////////////////////////////////////////////////////////////////////////////////
                //draw, spin, and highlight the cities on the world
                function plot_points(data) {  
        
                    // Add city points to map!
                    // JSON object (instead of circles) for points allowed to be clipped at "backside" of earth:
                    svg.append('g')
                    .selectAll("path")
                        .data(data,function(d,i){ return d.id })    
                        .enter()
                        .append("path")
                        .datum(function(d) {
                                return {
                                    type: "Point",
                                    coordinates: [d.lon, d.lat],
                                    class: "nohighlight" //My attempt at changing style through class..... not working....
                                }; })
                        .attr("class","city") //this class is assigned to the "correct" paths. Can I access them individually??
                        .attr("d", pathproj);

                // Control the radius of ALL circles!
                pathproj.pointRadius(function(d,i) { 
                    if (d.type =="Point") {
                        return d.class==="nohighlight" ? 4 : 20;
                    }
                });
      
               
                ////////////////////////////////////////////////////////////////////////////////////////////////////                         
                //        Spinning the globe:
                ////////////////////////////////////////////////////////////////////////////////////////////////////                         

                function spinning_globe(){

                        var time = Date.now();
                        var rotate = [0, 0];
                        var velocity = [.015, -0];


                        d3.timer(t => {

                            // get current time
                            var dt = Date.now() - time;
                                  //Define new projection over a rotating path
                                  projection.rotate([rotate[0] + velocity[0] * dt, rotate[1] + velocity[1] * dt]);

                                  //Add new projection to the map
                                  map.attr('d', pathproj)

                                  // Spin city locations: Method with JSON path element - only requires this line:
                                  svg.selectAll("path.city").attr("d", pathproj);

                                   }); // end timer spinning globe

                    }; // end spinning globe

                    spinning_globe();
                ////////////////////////////////////////////////////////////////////////////////////////////////////

            
            
                    ////////////////////////////////////////////////////////////////////////////////////////////////////                         
                    ////        HIGHLIGHTING the cities one by one:
                      var city_idx = 0; //data.id starts at 1        
  
                      //Every 300 msec: highlight a new city:
                      var city_play = setInterval(function() {
                        
                          city_idx++;
                        
                          var filtered = data.filter(function(d) {
                                              return d.id === city_idx;
                                            });  

                          // CHANGE CLASS? 
                          // CHANGE RADIUS?
                          
                          
                          
                      //Stop when all cities are highlighted
                                if(city_idx>=geo_data.length){
                                                clearInterval(city_play) //terminates calls to update function within setInterval function.
                                        };
                      }, 300); // end timer city play setInterval


                
                
                }; // end plot_points function
        
        ////////////////////////////////////////////////////////////////////////////////////////////////////
        // loading igem data 
      d3.csv("team_gps.csv", function(d) {
          d['id'] = +d['id'];
          d['lat'] = +d['lat'];
          d['lon'] = +d['lon'];
          return d;
        }, plot_points);
          
    }; // end of draw function
    ////////////////////////////////////////////////////////////////////////////////////////////////////
        
      </script>
  </head>
    
    
 <body>
    <div id="content">
        <svg></svg>
    </div>
    
  <script type="text/javascript">
      d3.json("world_countries.json", function(error, geo_data) {
            draw(geo_data)
            });
  </script>
    
 </body>
 </html>
diff --git a/team_gps.csv b/team_gps.csv
diff --git a/world_countries.json b/world_countries.json
	<!DOCTYPE html>
	<html>
	<head>
	<!-- Declare the character set of the document -->
	<meta charset="UTF-8">
	<!-- Support IE9-IE10 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- Set the viewport -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- Javascripts -->
	<script src="http://d3js.org/d3.v3.min.js"></script>


	<style>
	body {
	overflow:visible;
	background: #454545;
	position: relative;
	}

	svg {
	position: absolute;
	left: 0;
	top: 0;
	}

	.city {
	fill: rgb(255, 255, 193);
	stroke: rgb(142, 142, 21);
	stroke-width: 0.4;
	}

	.highlight {
	fill: rgb(205, 39, 235);
	stroke: rgb(226, 47, 211);
	}

	</style>

	<script type="text/javascript">
	var margin = 0,
	width = 800 - margin,
	height = 500 - margin;

	function draw(geo_data) {

	var svg = d3.select("body").select("#content").select("svg")
	.attr("width", width + margin)
	.attr("height", height + margin);


	/////////////////////////////////////////////////////////////////////////////////////////////
	/////////////////////////////////////////////////////////////////////////////////////////////
	// DRAW GLOBE
	// Based on: http://bl.ocks.org/PatrickStotz/1f19b3e4cb848100ffd7
	/////////////////////////////////////////////////////////////////////////////////////////////
	/////////////////////////////////////////////////////////////////////////////////////////////

	var earthcolor = d3.rgb("rgb(105, 113, 142)");
	var countryfillcolor = d3.rgb("rgb(84, 139, 84)");
	var countrystrokecolor = d3.rgb("rgb(25, 64, 224)");

	var projection = d3.geo.orthographic()
	.scale(200)
	.translate([width / 2, height / 2])
	.clipAngle(90)
	//.precision(0.2);

	var pathproj = d3.geo.path().projection(projection);

	// drawing a sphere as landmass
	var g = svg.append("g");
	g.append("path")
	.datum({type: "Sphere"})
	.attr("class", "sphere")
	.attr("d", pathproj)
	.attr("fill", earthcolor);

	// drawing the worldmap
	var map = svg.append('g').selectAll('path')
	.attr("class", "fill")
	.data(geo_data.features)
	.enter()
	.append('path')
	.attr('d', pathproj)
	.style('fill', countryfillcolor) //country fill
	.style('stroke', countrystrokecolor)
	.style('stroke-width', .5)
	.style('opacity',.8);

	/////////////////////////////////////////////////////////////////////////////////
	//draw, spin, and highlight the cities on the world
	function plot_points(data) {

	// Add city points to map!
	// JSON object (instead of circles) for points allowed to be clipped at "backside" of earth:
	svg.append('g')
	.selectAll("path")
	.data(data,function(d,i){ return d.id })
	.enter()
	.append("path")
	.datum(function(d) {
	return {
	type: "Point",
	coordinates: [d.lon, d.lat],
	class: "nohighlight" //My attempt at changing style through class..... not working....
	}; })
	.attr("class","city") //this class is assigned to the "correct" paths. Can I access them individually??
	.attr("d", pathproj);

	// Control the radius of ALL circles!
	pathproj.pointRadius(function(d,i) {
	if (d.type =="Point") {
	return d.class==="nohighlight" ? 4 : 20;
	}
	});


	////////////////////////////////////////////////////////////////////////////////////////////////////
	// Spinning the globe:
	////////////////////////////////////////////////////////////////////////////////////////////////////

	function spinning_globe(){

	var time = Date.now();
	var rotate = [0, 0];
	var velocity = [.015, -0];


	d3.timer(t => {

	// get current time
	var dt = Date.now() - time;
	//Define new projection over a rotating path
	projection.rotate([rotate[0] + velocity[0] * dt, rotate[1] + velocity[1] * dt]);

	//Add new projection to the map
	map.attr('d', pathproj)

	// Spin city locations: Method with JSON path element - only requires this line:
	svg.selectAll("path.city").attr("d", pathproj);

	}); // end timer spinning globe

	}; // end spinning globe

	spinning_globe();
	////////////////////////////////////////////////////////////////////////////////////////////////////



	////////////////////////////////////////////////////////////////////////////////////////////////////
	//// HIGHLIGHTING the cities one by one:
	var city_idx = 0; //data.id starts at 1

	//Every 300 msec: highlight a new city:
	var city_play = setInterval(function() {

	city_idx++;

	var filtered = data.filter(function(d) {
	return d.id === city_idx;
	});

	// CHANGE CLASS?
	// CHANGE RADIUS?



	//Stop when all cities are highlighted
	if(city_idx>=geo_data.length){
	clearInterval(city_play) //terminates calls to update function within setInterval function.
	};
	}, 300); // end timer city play setInterval




	}; // end plot_points function

	////////////////////////////////////////////////////////////////////////////////////////////////////
	// loading igem data
	d3.csv("team_gps.csv", function(d) {
	d['id'] = +d['id'];
	d['lat'] = +d['lat'];
	d['lon'] = +d['lon'];
	return d;
	}, plot_points);

	}; // end of draw function
	////////////////////////////////////////////////////////////////////////////////////////////////////

	</script>
	</head>


	<body>
	<div id="content">
	<svg></svg>
	</div>

	<script type="text/javascript">
	d3.json("world_countries.json", function(error, geo_data) {
	draw(geo_data)
	});
	</script>

	</body>
	</html>
id	lon	lat
1	6.0838868	50.7753455
2	24.6559	60.2054911
3	31.2357116	30.0444196
4	118.507011	31.67044
5	5.36978	43.296482
6	-60.0217314	-3.1190275
7	4.8951679	52.3702157
8	-48.1786486	-21.7848272
9	-111.9400054	33.4255104
10	-0.1869644	5.6037168
11	139.6917064	35.6894875
12	120.15507	30.274084
13	-97.7430608	30.267153
14	-97.7430608	30.267153
15	-76.6121893	39.2903848
16	13.404954	52.5200066
17	114.057865	22.543096
18	8.5324708	52.0302285
19	32.8597419	39.9333635
20	116.4073963	39.9041999
21	116.4073963	39.9041999
22	116.4073963	39.9041999
23	116.4073963	39.9041999
24	16.3738189	48.2081743
25	-0.630386	44.80583
26	-71.0588801	42.3600825
27	-71.0588801	42.3600825
28	139.8747636	35.9551921
29	-2.58791	51.454513
30	-123.1207375	49.2827291
31	23.3218675	42.6977082
32	-122.4442906	47.2528768
33	-114.0708459	51.0486151
34	-94.6707917	38.9822282
35	-3.17909	51.481581
36	-117.1610838	32.715738
37	120.4233654	23.5436443
38	121.237221	25.069656
39	11.97456	57.70887
40	116.4073963	39.9041999
41	116.4073963	39.9041999
42	-0.1277583	51.5073509
43	51.5310398	25.2854473
44	-77.042754	-12.0463731
45	6.7734556	51.2277411
46	-74.0059728	40.7127753
47	-76.5018807	42.4439614
48	118.796877	32.060255
49	120.6736482	24.1477358
50	-105.084423	40.5852602
51	-105.2705456	40.0149856
52	-70.861985	41.991213
53	-83.0103409	40.119413
54	78.0080745	27.1766701
55	-74.1744624	40.6895314
56	12.4949429	55.763516
57	-78.898619	35.9940329
58	-79.0558445	35.9131996
59	121.4737021	31.2303904
60	-3.188267	55.953252
61	-3.188267	55.953252
62	-84.3879824	33.7489954
63	6.6322734	46.5196535
64	-74.0059728	40.7127753
65	7.5885761	47.5595986
66	2.441782	48.629828
67	-70.9477546	42.9814292
68	119.296482	26.074478
69	-80.1289321	26.3683064
70	11.0119611	49.5896744
71	7.8421043	47.9990077
72	-84.2807329	30.4382559
73	121.4737021	31.2303904
74	121.4737021	31.2303904
75	-81.1873005	35.262082
76	-84.3879824	33.7489954
77	136.7606537	35.4232984
78	-4.251806	55.864237
79	22.9444191	40.6400629
80	5.737805	45.205168
81	6.5665017	53.2193835
82	113.264385	23.12911
83	9.9936819	53.5510846
84	-71.0588801	42.3600825
85	114.305539	30.592849
86	8.6724335	49.3987524
87	120.15507	30.274084
88	117.227219	31.820591
89	114.109497	22.396428
90	141.3543763	43.0620958
91	114.1290719	22.2679201
92	114.1796057	22.3185673
93	114.109497	22.396428
94	114.1974398	22.3771304
95	114.305539	30.592849
96	114.305539	30.592849
97	72.8776559	19.0759837
98	77.5945627	12.9715987
99	76.7178726	30.7046486
100	73.8567437	18.5204303
101	77.2090212	28.6139391
102	80.2707184	13.0826802
103	1.444209	43.604652
104	2.359279	48.792716
105	107.6191228	-6.9174639
106	-122.3320708	47.6062095
107	125.323544	43.817071
108	117.120095	36.6512
109	0.27568	51.195043
110	139.343138	35.486426
111	1.0789089	51.280233
112	-73.9441579	40.6781784
113	135.1955112	34.690083
114	4.7005176	50.8798438
115	126.9779692	37.566535
116	135.7680294	35.0116363
117	-84.0712997	34.0514898
118	103.834303	36.061089
119	-112.84184	49.69349
120	-112.84184	49.69349
121	15.6213728	58.410807
122	-101.8551665	33.5778631
123	13.1910073	55.7046601
124	151.1126498	-33.7738237
125	-2.2426305	53.4807593
126	-73.8648268	40.8447819
127	-84.5613355	39.3995008
128	-84.5613355	39.3995008
129	-83.7430378	42.2808256
130	-83.7430378	42.2808256
131	120.6736482	24.1477358
132	-71.5734197	43.1948092
133	-91.7715303	37.948544
134	0.1149085	52.2042666
135	37.6172999	55.755826
136	-84.4838654	42.7369792
137	11.6532477	48.2488721
138	-73.658945	40.5889551
139	118.796877	32.060255
140	118.796877	32.060255
141	118.796877	32.060255
142	15.439504	47.070714
143	120.2270277	22.9997281
144	120.9674798	24.8138287
145	126.534967	45.803775
146	123.431472	41.805699
147	-1.61778	54.978252
148	91.7362365	26.1445169
149	118.796877	32.060255
150	117.3616476	39.3433574
151	-71.0588801	42.3600825
152	-87.6876969	42.0450722
153	108.93977	34.341574
154	120.9674798	24.8138287
155	10.3950528	63.4305149
156	103.819836	1.352083
157	71.4703558	51.1605227
158	112.938814	28.228209
159	103.819836	1.352083
160	108.93977	34.341574
161	121.5654177	25.0329694
162	54.3773438	24.453884
163	121.544379	31.221517
164	120.382609	36.067108
165	-1.2577263	51.7520209
166	2.3522219	48.856614
167	-70.6692655	-33.4488897
168	2.3522219	48.856614
169	116.4073963	39.9041999
170	-75.1652215	39.9525839
171	71.5804899	34.0149748
172	-79.9958864	40.4406248
173	12.9573975	52.4038381
174	-74.6514481	40.3439888
175	-86.9080655	40.4258686
176	-73.9973608	41.9270367
177	116.4073963	39.9041999
178	80.2707184	13.0826802
179	-87.4139092	39.4667034
180	-95.3698028	29.7604267
181	-83.1497751	42.6064095
182	104.066801	30.572815
183	104.066801	30.572815
184	113.264385	23.12911
185	113.264385	23.12911
186	116.4073963	39.9041999
187	117.120095	36.6512
188	10.4033399	55.3790617
189	174.7633315	-36.8484597
190	121.4737021	31.2303904
191	-1.470085	53.381129
192	114.057865	22.543096
193	116.298326	39.959953
194	114.057865	22.543096
195	104.195397	35.86166
196	121.4737021	31.2303904
197	121.4737021	31.2303904
198	114.057865	22.543096
199	114.057865	22.543096
200	-122.0540996	37.4112691
201	18.0685808	59.3293235
202	-73.1233889	40.9123761
203	9.1829321	48.7758459
204	121.4737021	31.2303904
205	114.057865	22.543096
206	79.9465841	12.9666662
207	-79.8761741	34.2998762
208	113.264385	23.12911
209	113.264385	23.12911
210	20.1414253	46.2530102
211	114.057865	22.543096
212	26.7290062	58.3776252
213	121.5654177	25.0329694
214	120.9674798	24.8138287
215	-106.0691004	28.6329957
216	-99.2653128	19.5679989
217	34.989571	32.7940463
218	-103.416501	20.6719563
219	35.570246	33.207933
220	117.3616476	39.3433574
221	117.3616476	39.3433574
222	106.456877	29.541144
223	127.1479532	35.8242238
224	139.6380256	35.4437078
225	121.4737021	31.2303904
226	-79.3831843	43.653226
227	-117.2712717	32.8328112
228	116.298326	39.959953
229	116.4073963	39.9041999
230	8.6511929	49.8728253
231	13.7372621	51.0504088
232	5.4697225	51.441642
233	4.3570677	52.0115769
234	9.0576448	48.5216364
235	117.3616476	39.3433574
236	-80.2481666	43.5448048
237	-113.4909267	53.544389
238	-117.2712717	32.8328112
239	116.4073963	39.9041999
240	-8.4863157	51.8968917
241	-87.6297982	41.8781136
242	-70.6692655	-33.4488897
243	-70.6692655	-33.4488897
244	-0.1277583	51.5073509
245	4.6118324	50.668081
246	-72.2495231	41.8084314
247	12.513321	55.677069
248	-122.0307963	36.9741171
249	104.066801	30.572815
250	-82.3248262	29.6516344
251	23.7275388	37.9838096
252	10.7522454	59.9138688
253	-91.5301683	41.6611277
254	-88.2072697	40.1105875
255	-117.773235	34.100854
256	-76.93776	38.9896967
257	-77.2856305	37.2220383
258	-82.5514869	35.5950581
259	-96.6851982	40.8257625
260	11.2183781	43.8374367
261	-1.1581086	52.9547832
262	-75.6971931	45.4215296
263	2.3522219	48.856614
264	17.6389267	59.8585638
265	-113.4909267	53.544389
266	-84.1916069	39.7589478
267	-73.9625033	41.3918372
268	-120.7401385	47.7510741
269	-46.6333094	-23.5505199
270	116.4073963	39.9041999
271	117.227219	31.820591
272	117.227219	31.820591
273	-83.9207392	35.9606384
274	5.1214201	52.0907374
275	-0.3762881	39.4699075
276	25.2796514	54.6871555
277	-78.4766781	38.0293059
278	5.6653948	51.9691868
279	-71.5642076	41.6885978
280	-122.3320708	47.6062095
281	-90.1994042	38.6270025
282	-92.3425775	42.492786
283	-0.1277583	51.5073509
284	114.305539	30.592849
285	-76.7074571	37.2707022
286	-87.9064736	43.0389025
287	120.15507	30.274084
288	120.15507	30.274084
289	120.15507	30.274084
290	-71.8022934	42.2625932
291	120.585289	31.298974
292	118.089425	24.479833
293	-76.727745	39.9625984
294	120.15507	30.274084
295	120.15507	30.274084