SVGQuartet d'AnscombeMarkdownIntroduction à D3Graphiques en bâtonsTypes de visualisation de donnéesMéthodes sur une liste (Array)Structures de données javascriptFonctions RamdaD3 - définir les axesD3-shapeReprésenter un réseau avec D3Données cartographiquesLa cartographie avec D3Leaflet et fonds de carte en tuilesCanvasGraphiques camembertTransitions avec D3BillboardApprentissage automatiqueTopojsonObservableD3 hierarchy / treeTrouver des coordonnéesLeaflet et D3
D3 - Joindre des données à des éléments
viewof data1 = {
const container = DOM.element('ul')
// les données
const DATA = [4, 6, 2, 8, 1]
// l'élément <ul>
const ul = d3.select(container)
/*
.selectAll() selectionne des éléments qui n'existent pas encore
nous voulons créer un élément <li> pour chaque donnée dans DATA
.data() défini les données que nous souhaitons joindre
quand une donnée est ajoutée --> .enter()
nous ajoutons un élément <li> à <ul> --> .append('li')
.text() ajoute chaque donnée à l'intérieur de <li> --> <li>4</li>
*/
ul.selectAll('li')
.data(DATA)
.enter()
.append('li')
.text(d => d)
return container
}
viewof data2 = {
const container = DOM.element('ul')
const DATA = [4, 6, 2, 8, 1]
const ul = d3.select(container)
ul.selectAll('li')
.data(DATA)
.enter()
.append('li')
.text((d, i) => `Donnée: ${d}, indexe: ${i}`)
return container
}
viewof data3 = {
const container = DOM.element('ul')
const DATA = [4, 6, 2, 8, 1]
const ul = d3.select(container)
ul.selectAll('li')
.data(DATA)
.enter()
.append('li')
// si d est plus grand que 4, la couleur est rouge
.style('color', d => d > 4 ? 'red' : 'black')
// si i est plus petit que 3, le texte est en gras
.style('font-weight', (d, i) => i < 3 ? 'bold' : 'normal')
.text((d, i) => `Donnée: ${d}, indexe: ${i}`)
return container
}
viewof bar1 = {
const WIDTH = width
const HEIGHT = width / 3
const container = DOM.svg(WIDTH, HEIGHT)
const DATA = [4, 6, 2, 8, 1]
const MARGIN = 5 // espace entre les bâtons
const BAR_WIDTH = WIDTH / DATA.length // largeur des bâtons
const svg = d3.select(container)
svg.selectAll('rect')
.data(DATA)
.enter()
.append('rect')
// la position horizontale
.attr('x', (d, i) => i * BAR_WIDTH)
// la largeur
.attr('width', BAR_WIDTH - MARGIN)
// la position verticale
.attr('y', d => HEIGHT - d)
// la hauteur
.attr('height', d => d)
return container
}
viewof bar2 = {
const WIDTH = width
const HEIGHT = width / 3
const container = DOM.svg(WIDTH, HEIGHT)
const DATA = [4, 6, 2, 8, 1]
const MARGIN = 5
const BAR_WIDTH = WIDTH / DATA.length
const svg = d3.select(container)
// nous allons utiliser une échelle linéaire
const heightScale = d3.scaleLinear()
// les données en entrée
.domain([0, d3.max(DATA)]) // d3.max retourne le maxium d'une liste
// les données en sortie
.range([0, HEIGHT])
// comme 8 est la valeur maximale, heightScale(8) retourne la hauteur HEIGHT
// heightScale(4) retourne la moitié de HEIGHT ...
svg.selectAll('rect')
.data(DATA)
.enter()
.append('rect')
.attr('x', (d, i) => i * BAR_WIDTH)
.attr('width', BAR_WIDTH - MARGIN)
// utiliser heightScale pour y et height
.attr('y', d => HEIGHT - heightScale(d))
.attr('height', heightScale)
return container
}
viewof bar3 = {
const WIDTH = width
const HEIGHT = width / 3
const container = DOM.svg(WIDTH, HEIGHT)
const DATA = [4, 6, 2, 8, 1]
const MARGIN = 5
const BAR_WIDTH = WIDTH / DATA.length
const svg = d3.select(container)
const heightScale = d3.scaleLinear()
.domain([0, d3.max(DATA)])
.range([0, HEIGHT])
// l'échelle de couleur
const fillScale = d3.scaleLinear()
.domain([0, d3.max(DATA)])
.range(['white', 'indianred'])
svg.selectAll('rect')
.data(DATA)
.enter()
.append('rect')
.attr('x', (d, i) => i * BAR_WIDTH)
.attr('width', BAR_WIDTH - MARGIN)
.attr('y', d => HEIGHT - heightScale(d))
.attr('height', heightScale)
// appliquée à l'attribut fill
.attr('fill', fillScale)
return container
}
viewof bar4 = {
const WIDTH = width
const HEIGHT = width / 3
const container = DOM.svg(WIDTH, HEIGHT)
const MARGIN = 5
const svg = d3.select(container)
const DATA = [
{ nom: 'Lausanne', population: 138905 },
{ nom: 'Yverdon-les-Bains', population: 30143 },
{ nom: 'Montreux', population: 26574 },
{ nom: 'Renens', population: 21036 },
{ nom: 'Nyon', population: 20533 },
{ nom: 'Vevey', population: 19827 },
]
const BAR_WIDTH = WIDTH / DATA.length
// maintenant "d" représente un objet
// par exemple: { nom: 'Lausanne', population: 138905 }
const heightScale = d3.scaleLinear()
.domain([0, d3.max(DATA, d => d.population)]) // le maximum de population
.range([0, HEIGHT])
svg.selectAll('rect')
.data(DATA)
.enter()
.append('rect')
.attr('x', (d, i) => i * BAR_WIDTH)
.attr('width', BAR_WIDTH - MARGIN)
// nous devons passer d.population à heightScale
.attr('y', d => HEIGHT - heightScale(d.population))
.attr('height', d => heightScale(d.population))
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.
