La cartographie avec D3 / Anders

Anders

Workspace

Published

HEIG-visdom-2020

Edited

Apr 1, 2020

4 stars

pathCreator = d3.geoPath()

countryPaths = countries.features.map(pathCreator)

viewof map1 = {

const WIDTH = width / 3

const HEIGHT = WIDTH / 3

const container = DOM.svg(WIDTH, HEIGHT)

const svg = d3.select(container)

svg.selectAll('path')

.data(countries.features)

.enter()

.append('path')

.attr('d', pathCreator)

return container

}

viewof map2 = {

const WIDTH = width / 2

const HEIGHT = WIDTH / 2.5

const container = DOM.svg(WIDTH, HEIGHT)

// définir la projection

const projection = d3.geoMercator()

// passer la projection à pathCreator

const pathCreator = d3.geoPath().projection(projection)

const svg = d3.select(container)

svg.selectAll('path')

.data(countries.features)

.enter()

.append('path')

.attr('d', pathCreator)

return container

}

viewof map3 = {

const WIDTH = width / 2

const HEIGHT = WIDTH / 2.5

const container = DOM.svg(WIDTH, HEIGHT)

const projection = d3.geoMercator()

// la valeur de scaleValue plus haut

.scale(scaleValue)

// les valeurs translate

.translate([translateXValue, translateYValue])

const pathCreator = d3.geoPath().projection(projection)

const svg = d3.select(container)

svg.selectAll('path')

.data(countries.features)

.enter()

.append('path')

.attr('d', pathCreator)

return container

}

viewof map4 = {

const WIDTH = width / 2

const HEIGHT = WIDTH / 2.5

const container = DOM.svg(WIDTH, HEIGHT)

const projection = d3.geoMercator()

// ici

.fitExtent([[0, 0], [WIDTH, HEIGHT]], countries)

const pathCreator = d3.geoPath().projection(projection)

const svg = d3.select(container)

svg.selectAll('path')

.data(countries.features)

.enter()

.append('path')

.attr('d', pathCreator)

return container

}

viewof map5 = {

const WIDTH = width

const HEIGHT = width * 0.5

const container = DOM.svg(WIDTH, HEIGHT)

const projection = projections[selectedProjection].projection

const pathCreator = d3.geoPath().projection(projection)

const svg = d3.select(container)

svg.selectAll('path')

.data(countries.features)

.enter()

.append('path')

.attr('d', pathCreator)

const graticuleLines = d3.geoGraticule()

.step([20, 20])()

svg.append('path')

.attr('d', pathCreator(graticuleLines))

.attr('fill', 'none')

.attr('stroke', 'lightgray')

return container

}

cantonsBbox = turf.bbox(cantons)

viewof map6 = {

// les valeurs min. et max. des deux axes

const [xMin, yMin, xMax, yMax] = cantonsBbox

const WIDTH = width

// utilisons les mêmes proportions pour la toile que pour les coordonnées

const HEIGHT = width * ((yMax - yMin) / (xMax - xMin))

const container = DOM.svg(WIDTH, HEIGHT)

// notre projection

const projection = d3.geoTransform({

point: function(x, y) {

this.stream.point(

// la coordonnée xMin devient x 0 de la toile, xMax devient WIDTH

(x - xMin) / (xMax - xMin) * WIDTH,

// la même chose avec y sauf que nous devons inverser l'axe

HEIGHT - (y - yMin) / (yMax - yMin) * HEIGHT

)

}

})

const pathCreator = d3.geoPath().projection(projection)

const svg = d3.select(container)

svg.selectAll('path')

.data(cantons.features)

.enter()

.append('path')

.attr('d', pathCreator)

return container

}

votes = cantons.features.map(d => d.properties.KTNR)

.map(cantonId => ({

cantonId,

result: Math.round(Math.random() * 10000) / 100,

}))

viewof map7 = {

const [xMin, yMin, xMax, yMax] = cantonsBbox

const WIDTH = width

const HEIGHT = width * ((yMax - yMin) / (xMax - xMin))

const container = DOM.svg(WIDTH, HEIGHT)

const projection = d3.geoTransform({

point: function(x, y) {

this.stream.point((x - xMin) / (xMax - xMin) * WIDTH, HEIGHT - (y - yMin) / (yMax - yMin) * HEIGHT)

}

})

const pathCreator = d3.geoPath().projection(projection)

// trouver un object dans la liste "votes"

const getVoteByCantonNumber = cantonId => votes.find(d => d.cantonId === cantonId)

// retourner rouge ou vert en fonction du résultat

const getFillByCantonNumber = ({ properties }) =>

getVoteByCantonNumber(properties.KTNR).result > 50

? '#1a9850'

: '#d73027'

const svg = d3.select(container)

svg.selectAll('path')

.data(cantons.features)

.enter()

.append('path')

.attr('d', pathCreator)

// appliquer le style

.attr('fill', getFillByCantonNumber)

.attr('stroke', 'white')

return container

}

viewof map8 = {

const [xMin, yMin, xMax, yMax] = cantonsBbox

const WIDTH = width

const HEIGHT = width * ((yMax - yMin) / (xMax - xMin))

const container = DOM.svg(WIDTH, HEIGHT)

// des fonctions pour projeter un point

const projectX = x => (x - xMin) / (xMax - xMin) * WIDTH

const projectY = y => HEIGHT - (y - yMin) / (yMax - yMin) * HEIGHT

const projection = d3.geoTransform({

point: function(x, y) {

this.stream.point(projectX(x), projectY(y)) // utiliser les fonctions

}

})

const pathCreator = d3.geoPath().projection(projection)

const svg = d3.select(container)

svg.selectAll('path')

.data(cantons.features)

.enter()

.append('path')

.attr('d', pathCreator)

// les coordonnées de la gare d'Yverdon

const yverdon = [2539070, 1181442]

// projeter le point

const yverdonX = projectX(yverdon[0])

const yverdonY = projectY(yverdon[1])

// dessiner le point

svg.append('circle')

.attr('cx', yverdonX)

.attr('cy', yverdonY)

.attr('r', 10)

.attr('fill', 'red')

return container

}

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more