SVGQuartet d'AnscombeMarkdownIntroduction à D3D3 - 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 camembertTransitions avec D3BillboardApprentissage automatiqueTopojsonObservableD3 hierarchy / treeTrouver des coordonnéesLeaflet et D3
Graphiques en bâtons
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 },
]
d3 = require('d3')
viewof d3view = {
const WIDTH = width
const HEIGHT = width / 3
const container = DOM.svg(WIDTH, HEIGHT)
const MARGIN = 5
const MARGIN_BOTTOM = HEIGHT / 10
const GRAPH_HEIGHT = HEIGHT - MARGIN_BOTTOM
const MARGIN_LEFT = WIDTH / 20
const GRAPH_WIDTH = WIDTH - MARGIN_LEFT
const svg = d3.select(container)
const BAR_WIDTH = GRAPH_WIDTH / DATA.length
const yScale = d3.scaleLinear()
.domain([0, d3.max(DATA, d => d.population)])
.range([GRAPH_HEIGHT, 0])
const bars = svg.append('g')
.attr('transform', `translate(${MARGIN_LEFT}, 0)`)
bars.selectAll('rect')
.data(DATA)
.enter()
.append('rect')
.attr('x', (d, i) => i * BAR_WIDTH)
.attr('width', BAR_WIDTH - MARGIN)
.attr('y', d => yScale(d.population))
.attr('height', d => GRAPH_HEIGHT - yScale(d.population))
.attr('fill', 'steelblue')
const cityNames = svg.append('g')
.attr('transform', `translate(${MARGIN_LEFT}, 0)`)
cityNames.selectAll('text')
.data(DATA)
.enter()
.append('text')
.attr('x', (d, i) => i * BAR_WIDTH + BAR_WIDTH / 2)
.attr('y', HEIGHT - MARGIN_BOTTOM + 20)
.attr('text-anchor', 'middle')
.attr('font-family', 'sans-serif')
.attr('font-size', 10)
.text(d => d.nom)
const axisY = d3.axisLeft().scale(yScale)
.tickFormat(d => `${d / 1000}k`)
.ticks(5)
svg.append('g')
.attr('transform', `translate(${MARGIN_LEFT - 3})`)
.call(axisY)
return container
}
viewof vegaView = vega({
$schema: 'https://vega.github.io/schema/vega/v5.json',
width: 400,
height: 200,
padding: 5,
data: [
{
name: 'villes',
values: DATA,
}
],
scales: [
{
name: 'xscale',
type: 'band',
domain: { data: 'villes', field: 'nom' },
range: 'width',
padding: 0.05
},
{
name: 'yscale',
domain: { data: 'villes', field: 'population'},
nice: true,
range: 'height'
}
],
axes: [
{ orient: 'bottom', scale: 'xscale', labelAngle: 30, labelAlign: 'left' },
{ orient: 'left', scale: 'yscale' }
],
marks: [
{
type: 'rect',
from: { data: 'villes' },
encode: {
enter: {
x: { scale: 'xscale', field: 'nom' },
width: { scale: 'xscale', band: 1 },
y: { scale: 'yscale', field: 'population' },
y2: { scale: 'yscale', value: 0}
}
}
}
]
})
vega = require("vega-embed@6")
viewof vegaLiteView = vega({
$schema: 'https://vega.github.io/schema/vega-lite/v4.json',
width: 360,
data: {
values: DATA
},
mark: 'bar',
encoding: {
x: { field: 'nom', type: 'ordinal' },
y: { field: 'population', type: 'quantitative' },
}
})
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: {
json: {
population: DATA.map(({ population }) => population),
},
type: 'bar',
},
axis: {
x: {
type: 'category',
categories: DATA.map(({ nom }) => nom),
}
},
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: 'bar',
data: {
labels: DATA.map(d => d.nom),
datasets: [
{
label: 'Population',
data: DATA.map(d => d.population),
backgroundColor: 'steelblue',
}
]
}
})
chartist = require('chartist')
chartistCss = html`<link rel='stylesheet' href='https://unpkg.com/chartist@0.11.0/dist/chartist.css' />`
new chartist.Bar(chartistDiv, {
labels: DATA.map(d => d.nom),
series: [
DATA.map(d => d.population),
],
})
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.
