SVGQuartet d'AnscombeMarkdownIntroduction à D3Graphiques en bâtonsD3 - Joindre des données à des élémentsTypes 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 camembertBillboardApprentissage automatiqueTopojsonObservableD3 hierarchy / treeTrouver des coordonnéesLeaflet et D3
Transitions avec D3
example1 = {
const WIDTH = width
const RADIUS = 20
const HEIGHT = RADIUS * 4
const container = DOM.svg(WIDTH, HEIGHT)
const svg = d3.select(container)
const circle = svg.append('circle')
.attr('cx', RADIUS * 2)
.attr('cy', RADIUS * 2)
.attr('r', RADIUS)
circle.on('click', () =>
circle
.transition() // lancer la transition
.duration(1000) // durée en millisecondes
.attr('cx', WIDTH - RADIUS * 2) // position à la fin de la transition
)
return container
}
example2 = {
const WIDTH = width
const RADIUS = 20
const HEIGHT = RADIUS * 4
const container = DOM.svg(WIDTH, HEIGHT)
const svg = d3.select(container)
const circle = svg.append('circle')
.attr('cx', RADIUS * 2)
.attr('cy', RADIUS * 2)
.attr('r', RADIUS)
circle.on('click', () =>
circle
// à l'aller
.transition()
.duration(500)
.attr('cx', WIDTH - RADIUS * 2)
.attr('r', RADIUS * 2)
.attr('fill', 'red')
// au retour
.transition()
.duration(500)
.attr('cx', RADIUS * 2)
.attr('r', RADIUS)
.attr('fill', 'black')
)
return container
}
viewof graph0 = {
const WIDTH = width
const HEIGHT = WIDTH / 4
const MARGIN = WIDTH / 200
const container = DOM.svg(WIDTH, HEIGHT)
const svg = d3.select(container)
// une liste de 10 chiffres
const DATA = Array.from(Array(10)).map(Math.random)
const heightScale = d3.scaleLinear()
.domain([0, d3.max(DATA)])
.range([0, HEIGHT])
const BAR_WIDTH = WIDTH / DATA.length
const bars = 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)
// le bouton "Update"
const update = d3.select(updateButton0)
update.on('click', () => {
// une nouvelle liste de 10 chiffres
const NEW_DATA = Array.from(Array(10)).map(Math.random)
// mise à jour de l'échelle
heightScale.domain([0, d3.max(NEW_DATA)])
// mise à jour des bâtons
bars.data(NEW_DATA)
.transition()
.duration(1000)
.attr('y', d => HEIGHT - heightScale(d))
.attr('height', heightScale)
})
return container
}
viewof graph1 = {
const WIDTH = width
const HEIGHT = WIDTH / 4
const MARGIN = WIDTH / 200
const container = DOM.svg(WIDTH, HEIGHT)
const svg = d3.select(container)
const DATA = Array.from(Array(10)).map(Math.random)
const heightScale = d3.scaleLinear()
.domain([0, d3.max(DATA)])
.range([0, HEIGHT])
const BAR_WIDTH = WIDTH / DATA.length
const bars = 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)
const update = d3.select(updateButton1)
update.on('click', () => {
const NEW_DATA = Array.from(Array(10)).map(Math.random)
heightScale.domain([0, d3.max(NEW_DATA)])
bars.data(NEW_DATA)
.transition()
.delay((d, i) => i * 200) // ici
.duration(1000)
.attr('y', d => HEIGHT - heightScale(d))
.attr('height', heightScale)
})
return container
}
viewof graph2 = {
const WIDTH = width
const HEIGHT = WIDTH / 4
const MARGIN = WIDTH / 200
const container = DOM.svg(WIDTH, HEIGHT)
const svg = d3.select(container)
let DATA = Array.from(Array(10)).map(Math.random)
const heightScale = d3.scaleLinear()
.domain([0, d3.max(DATA)])
.range([0, HEIGHT])
let BAR_WIDTH = WIDTH / DATA.length
const bars = 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)
// le bouton "Add"
const add = d3.select(addButton)
add.on('click', () => {
// ajouter un chiffre à la liste
DATA = [...DATA, Math.random()]
// joindre les nouvelles données aux bâtons
const newBars = svg.selectAll('rect').data(DATA)
// mise à jour de l'échelle
heightScale.domain([0, d3.max(DATA)])
// mise à jour de la largeur des bâtons
BAR_WIDTH = WIDTH / DATA.length
// le bâton entrant
const entering = newBars.enter()
.append('rect')
.attr('x', WIDTH) // en dehors du cadre
.attr('width', BAR_WIDTH - MARGIN)
.attr('y', d => HEIGHT - heightScale(d))
.attr('height', heightScale)
// positionner tous les bâtons existants et entrants
const merged = newBars.merge(entering)
.transition()
.duration(1000)
.attr('x', (d, i) => i * BAR_WIDTH)
.attr('width', BAR_WIDTH - MARGIN)
})
return container
}
viewof graph3 = {
const WIDTH = width
const HEIGHT = WIDTH / 4
const MARGIN = WIDTH / 200
const container = DOM.svg(WIDTH, HEIGHT)
const svg = d3.select(container)
let DATA = Array.from(Array(10)).map(Math.random)
const heightScale = d3.scaleLinear()
.domain([0, d3.max(DATA)])
.range([0, HEIGHT])
let BAR_WIDTH = WIDTH / DATA.length
const bars = 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)
// le bouton "Remove"
const remove = d3.select(removeButton)
remove.on('click', () => {
// enlever le premier chiffre de la liste
DATA = DATA.splice(1)
BAR_WIDTH = WIDTH / DATA.length
// joindre les nouvelles données aux bâtons
const newBars = svg.selectAll('rect').data(DATA)
// une transition pour les éléments sortants
newBars.exit()
.transition()
.attr('x', WIDTH)
.remove()
// une transition pour les éléments restants
newBars
.transition()
.duration(1000)
.attr('x', (d, i) => i * BAR_WIDTH)
.attr('width', BAR_WIDTH - MARGIN)
.attr('y', d => HEIGHT - heightScale(d))
.attr('height', heightScale)
})
return container
}
viewof graph4 = {
const WIDTH = width
const HEIGHT = WIDTH / 4
const MARGIN = WIDTH / 200
const container = DOM.svg(WIDTH, HEIGHT)
const svg = d3.select(container)
let DATA = Array.from(Array(10)).map(Math.random)
// ajouter une clé "id" aux valeurs
.map((d, i) => ({ id: i, value: d }))
const heightScale = d3.scaleLinear()
.domain([0, d3.max(DATA, d => d.value)]) // utiliser la valeur
.range([0, HEIGHT])
let BAR_WIDTH = WIDTH / DATA.length
const bars = svg.selectAll('rect')
.data(DATA, d => d.id) // définir la clé
.enter()
.append('rect')
.attr('x', (d, i) => i * BAR_WIDTH)
.attr('width', BAR_WIDTH - MARGIN)
.attr('y', d => HEIGHT - heightScale(d.value)) // utiliser la valeur
.attr('height', d => heightScale(d.value)) // utiliser la valeur
// le bouton "Remove"
const remove = d3.select(removeButton2)
remove.on('click', () => {
DATA = DATA.splice(1)
BAR_WIDTH = WIDTH / DATA.length
const newBars = svg.selectAll('rect').data(DATA, d => d.id)
newBars.exit()
.transition()
.attr('x', -BAR_WIDTH) // pour que le bâton sorte par la gauche
.remove()
newBars
.transition()
.duration(1000)
.attr('x', (d, i) => i * BAR_WIDTH)
.attr('width', BAR_WIDTH - MARGIN)
})
return container
}
viewof graph5 = {
const WIDTH = width
const HEIGHT = WIDTH / 4
const MARGIN = WIDTH / 200
const container = DOM.svg(WIDTH, HEIGHT)
const svg = d3.select(container)
let DATA = Array.from(Array(10)).map(Math.random)
.map((d, i) => ({ id: i, value: d }))
const heightScale = d3.scaleLinear()
.domain([0, d3.max(DATA, d => d.value)])
.range([0, HEIGHT])
let BAR_WIDTH = WIDTH / DATA.length
const bars = svg.selectAll('rect')
.data(DATA, d => d.id)
.enter()
.append('rect')
.attr('x', (d, i) => i * BAR_WIDTH)
.attr('width', BAR_WIDTH - MARGIN)
.attr('y', d => HEIGHT - heightScale(d.value))
.attr('height', d => heightScale(d.value))
const btn = d3.select(button)
btn.on('click', () => {
// enlever la première donnée et ajouter une nouvelle
const nextId = d3.max(DATA, d => d.id) + 1
DATA = [...DATA.splice(1), { id: nextId, value: Math.random() }]
BAR_WIDTH = WIDTH / DATA.length
const newBars = svg.selectAll('rect').data(DATA, d => d.id)
const entering = newBars.enter()
.append('rect')
.attr('x', WIDTH)
.attr('width', BAR_WIDTH - MARGIN)
.attr('y', d => HEIGHT - heightScale(d.value))
.attr('height', d => heightScale(d.value))
newBars.exit()
.transition()
.attr('x', -BAR_WIDTH)
.remove()
newBars.merge(entering)
.transition()
.duration(1000)
.attr('x', (d, i) => i * BAR_WIDTH)
.attr('width', BAR_WIDTH - MARGIN)
.attr('y', d => HEIGHT - heightScale(d.value))
.attr('height', d => heightScale(d.value))
})
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.
