Skip to content

Instantly share code, notes, and snippets.

@edouard-lopez
Last active December 25, 2017 14:40
Show Gist options
  • Save edouard-lopez/10984946 to your computer and use it in GitHub Desktop.
Save edouard-lopez/10984946 to your computer and use it in GitHub Desktop.
D3js draw line with latitude/longitude from a CSV file
(function (window, document, L, undefined) {
'use strict';
/* create leaflet map */
var map = L.map('map', {
center: [44.8997, -0.8157],
zoom: 9
});
/**
* Object to store svg:element property for future use
*/
var props = {
circle: {
default: 2,
active: 5
}
}
/**
*
*/
var links = [];
/* add default stamen tile layer */
new L.tileLayer('http://{s}.tiles.mapbox.com/v3/examples.map-vyofok3q/{z}/{x}/{y}.png', {
minZoom: 0,
maxZoom: 18,
attribution: 'Map data © <a href="http://www.openstreetmap.org">OpenStreetMap contributors</a>'
}).addTo(map);
var svg = d3.select(map.getPanes().overlayPane).append('svg'),
g = svg.append('g').attr('class', 'leaflet-zoom-hide'),
entities = g.append('g').attr('id', 'entities'),
entitiesLabels = g.append('g').attr('id', 'entities-labels'),
centres = g.append('g').attr('id', 'centres'),
routes = g.append('g').attr('id', 'routes')
;
var path, entity, label, centre;
// Use Leaflet to implement a D3 geographic projection.
function projectPoint(x) {
var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
return [point.x, point.y];
}
d3.csv('scripts/liste-adresse-centre.csv', function (error, dataset) {
centre = centres.selectAll('.centre')
.data(dataset)
.enter()
.append('circle')
.on('mouseover', function (d) {
// reset style on others elements
d3.selectAll('.route').classed('highlight', false);
// apply style to element(s)
d3.selectAll('.route.' + idify(d.MOA)).classed('highlight', true);
})
.on('mouseout', function () {
d3.selectAll('.route').classed('highlight', false);
})
;
d3.csv('scripts/routes-dechets.csv', function (error, dataRoutes) {
// Standard enter / update
var routePath = routes.selectAll('.route')
.data(dataRoutes)
.enter()
.append('path')
.attr('d', function (d) {
var coordDepart = [ d.lon_depart, d.lat_depart ];
var coordArrivee = [ d.lon_arrivee, d.lat_arrivee ];
return path({
type: 'LineString',
coordinates: [
coordDepart,
coordArrivee
]
});
})
;
});
map.on('viewreset', reset);
reset();
function reset() {
centre.attr('class', function (d) { return 'centre ' + idify(d.MOA); })
.attr('r', props.circle.default)
.attr('cx', function (d) {return projectPoint([d.LON, d.LAT])[0]; })
.attr('cy', function (d) { return projectPoint([d.LON, d.LAT])[1]; })
;
}
});
}(window, document, L));
depart arrivee niv_depart niv_arrivee qte dist lat_depart lon_depart lat_arrivee lon_arrivee co2
CDC DE CAPTIEUX-GRIGNOLS Centre de transfert de Fargues 0 1 1179 31.6 44.5322 -0.271783
CDC DE CESTAS-CANEJAN Centre de transfert de Pompignac 0 1 6046.84 28.3 44.864895 -0.447177
CDC DE MONTESQUIEU UIOM de Bègles - ASTRIA 0 2 9054.34 33.8 44.784434 -0.582964
CDC DE VILLANDRAUT Centre de transfert de Fargues 0 1 1011 13.9 44.5322 -0.271783
CDC DU BAZADAIS Centre de transfert de Fargues 0 1 2430 20.3 44.5322 -0.271783
CDC DU CANTON DE PODENSAC UIOM de Bègles - ASTRIA 0 2 5022.58 40.9 44.784434 -0.582964
CDC DU PAYS DE PAROUPIAN Centre de transfert de Fargues 0 1 1082 8.3 44.5322 -0.271783
CDC DU VAL DE L'EYRE UIOM de Bègles - ASTRIA 0 2 3923.52 54.2 44.784434 -0.582964
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment