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 axesRepré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-shape
sales = [
{ name: 'Pommes', value: 23 },
{ name: 'Poires', value: 12 },
{ name: 'Bananes', value: 18 },
]
getPieData = d3.pie().value(d => d.value)
pieData = getPieData(sales)
viewof pie1 = {
const WIDTH = width / 3
const HEIGHT = width / 4
const container = DOM.svg(WIDTH, HEIGHT)
const svg = d3.select(container)
// une fonction pour transformer les angles en attribut d
const arcCreator = d3.arc()
.innerRadius(0)
.outerRadius(HEIGHT / 2)
svg.selectAll('path')
.data(pieData) // créé plus haut
.enter()
.append('path')
.attr('d', arcCreator)
return container
}
viewof pie2 = {
const WIDTH = width / 3
const HEIGHT = width / 4
const container = DOM.svg(WIDTH, HEIGHT)
const svg = d3.select(container)
const arcCreator = d3.arc()
.innerRadius(0)
.outerRadius(HEIGHT / 2)
// une fonction pour la couleur
const color = ({ data }) => {
switch (data.name) {
case 'Bananes': return 'gold'
case 'Poires': return 'limegreen'
default: return 'indianred'
}
}
// un groupe pour centrer le camembert
const pie = svg.append('g')
.attr('transform', `translate(${HEIGHT / 2}, ${HEIGHT / 2})`)
pie.selectAll('path')
.data(pieData)
.enter()
.append('path')
.attr('d', arcCreator)
// un peu de couleur
.attr('fill', color)
return container
}
viewof pie3 = {
const WIDTH = width / 3
const HEIGHT = width / 4
const container = DOM.svg(WIDTH, HEIGHT)
const svg = d3.select(container)
const arcCreator = d3.arc()
.innerRadius(0)
.outerRadius(HEIGHT / 2 - 10) // pour que tout le camembert soit visible
const color = ({ data }) => {
switch (data.name) {
case 'Bananes': return 'gold'
case 'Poires': return 'limegreen'
default: return 'indianred'
}
}
const pie = svg.append('g')
.attr('transform', `translate(${HEIGHT / 2}, ${HEIGHT / 2})`)
pie.selectAll('path')
.data(pieData)
.enter()
.append('path')
.attr('d', arcCreator)
.attr('fill', color)
// un texte pour chaque tranche
pie.selectAll('text')
.data(pieData)
.enter()
.append('text')
// .centroid permet de trouver le centre de la tranche
.attr('transform', d => `translate(${arcCreator.centroid(d)})`)
.attr('text-anchor', 'middle')
.text(d => d.data.value)
// la légende
const legend = svg.append('g')
.attr('transform', `translate(${HEIGHT-10})`)
const RECT_WIDTH = 20
// les carrés de couleur
legend.selectAll('rect')
.data(pieData)
.enter()
.append('rect')
.attr('y', (d, i) => i * RECT_WIDTH)
.attr('width', RECT_WIDTH)
.attr('height', RECT_WIDTH)
.attr('fill', color)
// les noms de fruits
legend.selectAll('text')
.data(pieData)
.enter()
.append('text')
.attr('x', RECT_WIDTH * 1.5)
.attr('y', (d, i) => i * RECT_WIDTH + RECT_WIDTH * 0.75)
.attr('width', RECT_WIDTH)
.attr('height', RECT_WIDTH)
.text(d => d.data.name)
return container
}
btcData = FileAttachment('btc.json').json()
bitcoinPrices = Object.keys(btcData.bpi)
.filter(d => d > '2017')
.map(d => ({ date: d, close: btcData.bpi[d] }))
viewof line1 = {
const WIDTH = width
const HEIGHT = width / 4
const container = DOM.svg(WIDTH, HEIGHT)
const svg = d3.select(container)
// spécifier le format de date
const formatDate = d3.timeParse('%Y-%m-%d')
const DATA = bitcoinPrices.map(d => ({ ...d, date: formatDate(d.date) }))
// échelle de temps pour l'axe X
const scaleX = d3.scaleTime()
.range([0, WIDTH])
.domain(d3.extent(DATA, d => d.date))
// échelle linéaire pour le prix de cloture
const scaleY = d3.scaleLinear()
.range([HEIGHT, 0])
.domain(d3.extent(DATA, d => d.close))
// la fonction d3.line() pour créer l'attribut "d"
const linePathCreator = d3.line()
// quelle échelle, quelle donnée pour l'axe X
.x(d => scaleX(d.date))
// quelle échelle, quelle donnée pour l'axe Y
.y(d => scaleY(d.close))
//.curve(d3.curveBasis)
// ajouter une courbe au SVG
const line = svg.append('path')
// utiliser linePathCreator pour créer l'attribut "d"
.attr('d', linePathCreator(DATA))
.attr('fill', 'none')
.attr('stroke', 'red')
return container
}
viewof line2 = {
const WIDTH = width
const HEIGHT = width / 4
const container = DOM.svg(WIDTH, HEIGHT)
const svg = d3.select(container)
const formatDate = d3.timeParse('%Y-%m-%d')
const DATA = bitcoinPrices.map(d => ({ ...d, date: formatDate(d.date) }))
const scaleX = d3.scaleTime()
.range([0, WIDTH])
.domain(d3.extent(DATA, d => d.date))
const scaleY = d3.scaleLinear()
.range([HEIGHT, 0])
.domain(d3.extent(DATA, d => d.close))
// créateur de ligne fait maison
const linePathCreator = DATA =>
DATA
// calculer x et y
.map(d => ([scaleX(d.date), scaleY(d.close)]))
// ajouter M au premier, L aux autres
.map(([x, y], index) => `${index === 0 ? 'M' : 'L'} ${x} ${y}` )
// joindre les coordonnés
.join(' ')
const line = svg.append('path')
.attr('d', linePathCreator(DATA))
.attr('fill', 'none')
.attr('stroke', 'red')
return container
}
viewof line3 = {
const WIDTH = width
const HEIGHT = width / 4
const container = DOM.svg(WIDTH, HEIGHT)
const svg = d3.select(container)
const formatDate = d3.timeParse('%Y-%m-%d')
const DATA = bitcoinPrices.map(d => ({ ...d, date: formatDate(d.date) }))
const scaleX = d3.scaleTime()
.range([0, WIDTH])
.domain(d3.extent(DATA, d => d.date))
const scaleY = d3.scaleLinear()
.range([HEIGHT, 0])
.domain(d3.extent(DATA, d => d.close))
const linePathCreator = d3.line()
.x(d => scaleX(d.date))
.y(d => scaleY(d.close))
.curve(d3.curveBasis) // ici
const line = svg.append('path')
.attr('d', linePathCreator(DATA))
.attr('fill', 'none')
.attr('stroke', 'red')
return container
}
viewof line4 = {
const WIDTH = width
const HEIGHT = width / 4
const container = DOM.svg(WIDTH, HEIGHT)
const svg = d3.select(container)
const formatDate = d3.timeParse('%Y-%m-%d')
const DATA = bitcoinPrices.map(d => ({ ...d, date: formatDate(d.date) }))
const scaleX = d3.scaleTime()
.range([0, WIDTH])
.domain(d3.extent(DATA, d => d.date))
const scaleY = d3.scaleLinear()
.range([HEIGHT, 0])
.domain(d3.extent(DATA, d => d.close))
const linePathCreator = d3.line()
.x(d => scaleX(d.date))
.y(d => scaleY(d.close))
.curve(d3.curveStep) // ici
const line = svg.append('path')
.attr('d', linePathCreator(DATA))
.attr('fill', 'none')
.attr('stroke', '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.
