D3 - définir les axes / Anders

Anders

Workspace

Published

HEIG-visdom-2020

Edited

Mar 5, 2019

viewof bar5 = {

const WIDTH = width

const HEIGHT = width / 3

const container = DOM.svg(WIDTH, HEIGHT)

const MARGIN = 5

// faisons de la place pour les noms

const MARGIN_BOTTOM = HEIGHT / 10

const GRAPH_HEIGHT = HEIGHT - MARGIN_BOTTOM

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

const heightScale = d3.scaleLinear()

.domain([0, d3.max(DATA, d => d.population)])

.range([0, GRAPH_HEIGHT]) // la nouvelle hauteur

// un groupe pour pouvoir déplacer les bâtons

const bars = svg.append('g')

.attr('transform', `translate(0,-${MARGIN_BOTTOM})`)

bars.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.population))

.attr('height', d => heightScale(d.population))

// les éléments <text>

svg.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')

.text(d => d.nom)

return container

}

viewof bar6 = {

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

// faisons de la place à gauche des bâtons

const MARGIN_LEFT = WIDTH / 20

const GRAPH_WIDTH = WIDTH - MARGIN_LEFT

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 = GRAPH_WIDTH / DATA.length // la nouvelle largeur du graphique

const heightScale = d3.scaleLinear()

.domain([0, d3.max(DATA, d => d.population)])

.range([0, GRAPH_HEIGHT])

const bars = svg.append('g')

// déplacer les bâtons sur la droite

.attr('transform', `translate(${MARGIN_LEFT},-${MARGIN_BOTTOM})`)

bars.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.population))

.attr('height', d => heightScale(d.population))

// un groupe pour déplacer les noms sur la droite

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')

.text(d => d.nom)

// créer un axe en fonction de l'échelle

const axisY = d3.axisLeft().scale(heightScale)

// créer un nouveau groupe et y attacher l'axe

svg.append('g')

.attr('transform', `translate(${MARGIN_LEFT - 3})`)

.call(axisY)

return container

}

viewof bar7 = {

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 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 = GRAPH_WIDTH / DATA.length

// passons d'une échelle de hauteur à une échelle de y

const yScale = d3.scaleLinear()

.domain([0, d3.max(DATA, d => d.population)])

.range([GRAPH_HEIGHT, 0]) // a été inversé

const bars = svg.append('g')

// la valeur y est calculée depuis le haut

// nous n'avons plus besoin de la marge en bas

.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)) // utiliser yScale pour y

.attr('height', d => GRAPH_HEIGHT - yScale(d.population)) // modifier la hauteur

.attr('fill', 'steelblue') // un peu de couleur

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') // pour avoir la même typographie que sur l'axe y

.text(d => d.nom)

// utiliser la nouvelle échelle pour l'axe

const axisY = d3.axisLeft().scale(yScale)

// formatter les valeurs

.tickFormat(d => `${d / 1000}k`)

// le nombre de valeurs présentées

.ticks(5)

svg.append('g')

.attr('transform', `translate(${MARGIN_LEFT - 3})`)

.call(axisY)

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.

Learn more