Public
Edited
Feb 11, 2023
// Données d'inflation
const inflationData = [
{ year: 2012, rate: 1.9 },
{ year: 2013, rate: 1.5 },
{ year: 2014, rate: 1.6 },
{ year: 2015, rate: 0.7 },
{ year: 2016, rate: 1.3 },
{ year: 2017, rate: 2.1 },
{ year: 2018, rate: 2.4 },
{ year: 2019, rate: 1.8 },
{ year: 2020, rate: 0.6 },
{ year: 2021, rate: 2.0 }
];
// Création du graphique
const svgEl = svg`<svg></svg>`;
const width = 600;
const height = 400;
svgEl.setAttribute("width", width);
svgEl.setAttribute("height", height);
const margin = { top: 20, right: 20, bottom: 30, left: 50 };
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const xScale = d3.scaleLinear()
.domain([d3.min(inflationData, d => d.year), d3.max(inflationData, d => d.year)])
.range([0, innerWidth]);
const yScale = d3.scaleLinear()
.domain([0, d3.max(inflationData, d => d.rate)])
.range([innerHeight, 0]);
const lineGenerator = d3.line()
.x(d => xScale(d.year))
.y(d => yScale(d.rate));
const g = d3.select(svgEl).append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
g.append("g")
.attr("transform", `translate(0,${innerHeight})`)
.call(d3.axisBottom(xScale));
g.append("g")
.call(d3.axisLeft(yScale))
.append("text")
.attr("fill", "#000")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Taux d'inflation (%)");
g.append("path")
.datum(inflationData)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 2)
.attr("d", lineGenerator);
Return svgEl;
}
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.
