VeloViz-V8-20180110-Lyon-journeys-only-once

This is a simple setup of Leaflet (via Mapbox) with d3 to show dots on a map. This can serve as a base for many interesting geographically based visualizations

Nice overview of using d3 + Leaflet. I found this slightly simpler to use than Mike's classic post.

Built with blockbuilder.org

forked from enjalot's block: dots on a map: setup

forked from arimocro's block: dots on a map: setup

forked from abelande's block: dots on a map - Velo'v

forked from abelande's block: dots on a map - Velo'v - v2

forked from anonymous's block: dots on a map - Velo'v - v2

forked from anonymous's block: dots on a map - Velo'v - v3

forked from abelande's block: dots on a map - Velo'v - v3

forked from abelande's block: dots on a map - Velo'v - v4

forked from abelande's block: dots on a map - Velo'v - v5

forked from abelande's block: dots on a map - Velo'v - v6

forked from abelande's block: VeloViz-V6-20180110-stable

forked from keikhcheung's block: VeloViz-V7-20180110-unstable

forked from keikhcheung's block: VeloViz-V8-20180111-Lyon-journeys-only-once

<!doctype html>
<html>

<head>
	<title>Many many many Points with D3 and leaflet</title>
	<meta charset="utf-8">

<body>
	<div id="map"></div>
	<div id="rightbox" class="box right-box"><div class="box-title">Informations</div></br><span style="font-style:italic;">Survolez une station</span></div> 
		<svg xmlns="https://www.w3.org/2000/svg" width="100px" height="100px" />
	</div>

// Array containing coordinates of all journeys: station_out, station_in, station_out, station_in…
		var journey_data = [];

//loading file with journeys
		d3.json("journeys.json", function(error, journeys){
			// console.log(journeys[1002]); // station d'origine
			// console.log(journeys[1001][0].station_in); // station de destination
			// console.log(journeys[1001][0].nb_journeys_vectorised); //nbre de trajets   
			
			// Adjust colour range related to shown vairation scale
			color.domain([0, 200]); // TO-BE-ADJUSTED!!!!!

//loading GeoJson file using D3
			d3.json("stations.json", function(error, stations) {
			// console.log(stations.features[1].properties.idstation); //id de station
				if (error) throw error;
				 
				var coordonnees = {}; //création d'un objet
				//correspondance idstation et coordonnées 
				stations.features.forEach( function(station) {
					coordonnees[station.properties.idstation] = {X: station.properties.X, Y: station.properties.Y}
					// console.log(coordonnees) -- OK
				}); // temporary variable station; stations is still callable though

// console.log(stations) -- OK
				// console.log(coordonnees) -- OK
				//pour chaque station (stationOrig), regarde ds journeys les correspondantes

//1 MOVED BELOW in mouseover
				//1 stations.features.forEach( function(stationOrig) {
					// console.log(stationOrig) -- OK
					//1 journeys[stationOrig.properties.idstation].forEach( function(stationDest) {
						// console.log(stationDest) -- OK
						/*
						// Loading all journey data between stationOrig and stationDest
						// but making computer hang
						for (var stationDest in journeys) {
							for (var stationOrig in journeys[stationDest]) {
								console.log("Il y a eu " + (journeys[stationDest][stationOrig].nb_journeys_vectorised) + " voyages depuis la station " + stationOrig + " vers la station " + (journeys[stationDest][stationOrig].station_in));
							}
						}

/*
						console.log("Voyage depuis la station " + 
							stationOrig.properties.idstation + 
							"(coordonnées " + stationOrig.properties.X + 
							"," + 
							stationOrig.properties.Y + 
							") vers la station " + 
							stationDest.station_in + 
							"(coordonnées " + 
							coordonnees[stationDest.station_in].X + 
							"," + 
							coordonnees[stationDest.station_in].Y + 
							")"  );            
						-- OK
						*/

/* Unnecessary as coordonnees can be used
						journey_data.push('[' + stationOrig.properties.X + ', ' + stationOrig.properties.Y + ']');
						journey_data.push('[' + coordonnees[stationDest.station_in].X + ', ' + coordonnees[stationDest.station_in].Y + ']');

console.log(journey_data)
						*/

//tracing lines from stationOrig to stationDest
						/* var trips = [
							[stationOrig.properties.X,stationOrig.properties.Y],
							[stationDest.properties.X,stationDest.properties.Y]              
						];
						*/
						// var polyline = L.polyline(trips, {color: 'black'}).addTo(map);                
					//1 }); // temporary variable (stationDest)
				//1 }); // temporary variable (stationOrig)

var geoData = stations;
				// console.log(stations); -- OK

//Initializing Leaflet map and setting the view
				var leafletMap = L.map('map').setView([45.7531152, 4.827906], 12);
				
				
				//add choice base tiles - background map of Lyon
				L.tileLayer('https://{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}.png').addTo(leafletMap);

// LINES for journeys
				var trajets = L.layerGroup().addTo(leafletMap);
				//stations.features.forEach( function(stationOrig) {
				//	journeys[stationOrig.properties.idstation].forEach( function(stationDest) {
				//		//console.log(stationDest)
				//		var trips = [
				//			[stationOrig.properties.X,stationOrig.properties.Y],
				//			[coordonnees[stationDest.station_in].X, coordonnees[stationDest.station_in].Y]];
				//		console.log(trips);
				//		var polyline = L.polyline(trips, {color: 'black'}).addTo(leafletMap);                
				//		console.log("Adding polyline");
				//	}); // (stationDest)
				//}); // (stationOrig)

//adds an SVG element to Leaflet’s overlay pane
				var svg = d3.select(leafletMap.getPanes().overlayPane).append("svg");
				
						 
				//G element added to translate the SVG elements so that the top-left corner of the SVG, ⟨0,0⟩, corresponds to Leaflet’s layer origin
				var g = svg.append("g").attr("class", "leaflet-zoom-hide");
				
				// Use Leaflet to implement a D3 geometric transformation.
				function projectPoint(x, y) {
					var point = leafletMap.latLngToLayerPoint(new L.LatLng(y, x));
					this.stream.point(point.x, point.y);
				} // function projectPoint
				
				//Create a d3.geo.path to convert GeoJson to SVG
				var transform = d3.geoTransform({point: projectPoint});
				var path = d3.geoPath().projection(transform);
				leafletMap.on('moveend', mapmove);
				
				 
				
				var div = d3.select("#rightbox");

redrawSubset(geoData.features);

function redrawSubset(subset) {
					path.pointRadius(3); // * size of dots);

//D3 mechanism for fitting SVG to the layer
					var bounds = path.bounds(stations);
					var topLeft = bounds[0];
					var bottomRight = bounds[1];

svg.attr("width", bottomRight[0] - topLeft[0])
						.attr("height", bottomRight[1] - topLeft[1])
						.style("left", topLeft[0] + "px")
						.style("top", topLeft[1] + "px");

g.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");

//Create path elements for each of the features
					var features = g.selectAll("path")
						.data(stations.features)
						.enter().append("path")
						features.attr("d", path).attr("class", "points");
						features.style("fill-opacity", function(d) {
							var value = d.properties.idstation;	         
							// console.log(d.properties.idstation.length);
							if (d.group) {
								return (d.group * 0.1) + 0.2
							} // if dgroup	
						}) //features.style
						
								//infobulle
								.on('mousemove', function(d) {
									 // console.log(d) // Check element to show: .properties.nom AND .properties.value         
										var mouse = d3.mouse(svg.node()).map(function(d) {
										// console.log(d)
											return parseInt(d); 
										}); // mapfunction d
						
										// Ajout des infos sur la stations basées sur le fichier geoJson
										div.html('<div class="box-title">Informations</div></br>'+'Numéro de station : <span style="font-weight:bold;">'+d.properties.idstation + '</span><br/>Bornes : <span style="font-weight:bold;">'+ d.properties.BORNES +'</span><br/>Station : <span style="font-weight:bold;">'+d.properties.nom +'</span><br/>Commune : <span style="font-weight:bold;">'+ d.properties.commune);

// LINES for journeys
										journeys[d.properties.idstation].forEach( function(stationDest) {
											//console.log(stationDest)
											if(stationDest.station_in) {
												var trips = [
													[d.properties.Y, d.properties.X],
													[coordonnees[stationDest.station_in].Y, coordonnees[stationDest.station_in].X]];
												var polyline = L.polyline(trips, {color: '#3edf94', weight: stationDest.nb_journeys_vectorised * 0.1}).addTo(trajets);
												console.log("adding polyline");
											}
										}); // (stationDest)
										console.log("end");

}) //mousemove function
								/* REMOVED for LINES for journeys
								.on('mouseout', function() {
									// tooltip.classed('hidden', true);
								}); // mouseout	
								*/
				} //function redrawsubwet

//console.log(coordonnees)

/* HIDDEN for LINES for journeys
				// Attempt L.polyline with a single point -- OK but in Somalia…
				var polyline = L.polyline([
					[4.920604, 45.760813],
					[4.832162, 45.767646]
					]).addTo(leafletMap);
				
				// Attempt L.polyline
				// var polyline = L.polyline(
					for (key in coordonnees) {
						var coordinates = Object.values(coordonnees[key]);
						// console.log(coordinates) -- OK
						// console.log(Object.values(coordonnees[key])) -- OK
						// ALL THE POINTS ARE WORKING HERE!
						console.log(Object.values(coordonnees[key])[0])
						console.log(Object.values(coordonnees[key])[1])

// console.log('[' + coordonnees[i].value.X + ', ' + coordonnees[i].value.Y + '], ')
						// console.log(return '[' + coordonnees[i].X + ', ' + coordonnees[i].Y + '], ';)
						var polyline = L.polyline([
													// Seems like the following line does not give the coordinates back…
													// Tried return function but does not work either…
													Object.values(coordonnees[key])[0], Object.values(coordonnees[key])[1]
												  ],
												  {color: 'black', weight: 1, clickable: false}
												 ).addTo(leafletMap);
					}
				//)
				*/

/* Failed attempt
				var polyline = L.polyline([
					for (var i = 0; i < journey_data.length; i+2) {
						for (var j = i+1; j < journey_data.length; j+2) {
							function() {
								return '[' + parseFloat(i.value) + ', ' + parseFloat(j.value) + '], '
							}
						}
					}
				])
				*/

/* Reference
				var polyline = L.polyline([
							[-41.286, 174.796],
							[-41.281, 174.786],
							[-41.279, 174.776],
							[-41.290, 174.775],
							[-41.292, 174.788]]
							).addTo(map);

/* Failed attempt
				var polyline = L.polyline([
					for

stationOrig.properties.Y + 
							") vers la station " + 
							stationDest.station_in + 
							"(coordonnées " + 
							coordonnees[stationDest.station_in].X + 
							"," + 
							coordonnees[stationDest.station_in].Y + 
				*/

// Redrawing the missing image tiles of map when panning?
				function mapmove(e) {
					//remove all points
					d3.selectAll(".points").remove();
					redrawSubset(geoData.features);
				} // function mapmove

}) //json2   
		}); //json1
		
	</script>
</body>

</html>

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

Modified http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js to a secure url

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

https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js