D3JS - Lignes (Linear Chart)

Comparaison du cours du CAC 40 et du chomage entre 1988 et 2013

Dernière mise à jour le 15/12/2020
d3js5.x

Cet exemple est le simple prolongement du précédent. Il nous a suffit de doubler les informations concernant l'axe Y.

const y0 = d3.scaleLinear()
	.range([height, 0]);

const y1 = d3.scaleLinear()
	.range([height, 0]);

De la même façon, deux fonctions de projection sont définies à partir de nos données.

const line0 = d3.line()
	.x(d => x(d.date))
	.y(d => y0(d.chomage));

const line1 = d3.line()
	.x(d => x(d.date))
	.y(d => y1(d.cac40));

Enfin on construit un axe à droite et l'autre à gauche.

svg.append("g")
	.attr("class", "axisSteelblue")
	.attr("transform", "translate(" + width + ", 0)")
	.call(d3.axisRight(y0))
	.append("text")
		.attr("transform", "rotate(-90)")
		.attr("y", 6)
		.attr("dy", "-0.71em")
		.style("text-anchor", "end")
		.text("%");
	
svg.append("g")
	.attr("class", "axisRed")
	.call(d3.axisLeft(y1))
	.append("text")
		.attr("transform", "rotate(-90)")
		.attr("y", 6)
		.attr("dy", ".71em")
		.style("text-anchor", "end")			
		.text("Pts");

Les class axisRed et axisSteelblue permettent de définir la couleur de la ligne, de l'axe gradué et du texte.

.axisRed line {
  stroke: red;
}

.axisRed path {
  stroke: red;
}

.axisRed text {
  fill: red;
}

.axisSteelblue line {
  stroke: steelblue;
}

.axisSteelblue path {
  stroke: steelblue;
}

.axisSteelblue text {
  fill: steelblue;
}

Le reste du traitement suit cette logique, un traitement pour la courbe du chomage et un autre pour celle du cours du CAC 40. Pour voir tout le code nécessaire à la construction de ce graphique, n'hésitez pas à regarder le code source.

VOUS POURRIEZ AIMER


D3JS - Création d'un histogramme (Bar Chart)

Histogramme (Bar Chart)

Comment réaliser un histogramme et lui associer une légende

D3JS - Création d'une courbe de données élégante

Lignes avancées (Linear Chart)

Création d'un tooltip directement en SVG, ajout d'un dégradé sous la courbe grâce à l'utilisation d'un gradiant, point de suivi des valeurs fluide...

D3JS - Sunburst Chart

Sunburst Chart

Construction d'un graphique hiérarchique de type Sunburst, variation d'une couleur en HSL et utilisation de patterns SVG

comments powered by Disqus