Last active
December 25, 2017 14:40
-
-
Save edouard-lopez/10984946 to your computer and use it in GitHub Desktop.
D3js draw line with latitude/longitude from a CSV file
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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