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 tuilesCanvasTransitions avec D3BillboardApprentissage automatiqueTopojsonObservableD3 hierarchy / treeTrouver des coordonnéesLeaflet et D3
Graphiques camembert
DATA = [
{ fruit: 'Pomme', num: 6 },
{ fruit: 'Poire', num: 4 },
{ fruit: 'Banane', num: 3 },
]
viewof d3view = {
const WIDTH = width
const HEIGHT = width / 3
const container = DOM.svg(WIDTH, HEIGHT)
const svg = d3.select(container)
const pieData = d3.pie().value(d => d.num)(DATA)
const arcCreator = d3.arc()
.innerRadius(0)
.outerRadius(HEIGHT / 2)
const color = ({ data }) => {
switch (data.fruit) {
case 'Banane': return 'gold'
case 'Poire': return 'limegreen'
default: return 'indianred'
}
}
const pie = svg.append('g')
.attr('transform', `translate(${WIDTH / 2}, ${HEIGHT / 2})`)
pie.selectAll('path')
.data(pieData)
.enter()
.append('path')
.attr('d', arcCreator)
.attr('fill', color)
pie.selectAll('text')
.data(pieData)
.enter()
.append('text')
.attr('transform', d => `translate(${arcCreator.centroid(d)})`)
.attr('text-anchor', 'middle')
.text(d => `${d.data.fruit}s: ${d.data.num}`)
return container
}
d3 = require('d3')
bbView = DOM.element('div', { style: `width:${width}px;height:${width/3}px` })
billboard = require('billboard.js')
billboardCss = html`<link href='${resolve('billboard.js/dist/billboard.css')}' rel='stylesheet' />`
billboard.bb.generate({
data: {
columns: DATA.map(({ fruit, num }) => ([ fruit, num ])),
type: 'pie',
},
bindto: bbView
})
chartjsCanvas = DOM.canvas(width, width / 2)
chartjs = require('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js')
new chartjs(chartjsCanvas, {
type: 'pie',
data: {
labels: DATA.map(d => d.fruit),
datasets: [
{
data: DATA.map(d => d.num),
backgroundColor: [
'indianred',
'limegreen',
'gold'
]
}
]
}
})
chartistDiv = {
const div = DOM.element('div')
div.style.height = `${width / 2}px`
return div
}
chartist = require('chartist')
chartistCss = html`<link rel='stylesheet' href='https://unpkg.com/chartist@0.11.0/dist/chartist.css' />`
new chartist.Pie(chartistDiv, {
labels: DATA.map(d => d.fruit),
series: [
...DATA.map(d => d.num),
],
})
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.
