Here for this animated line chart, we set first the SVG element in the DOM and we establish the width and the height of the graph (the value for the height is assigned in the following line). Then we establish the "skeleton" of the visualisation by grouping the axes for the graph with a G element inside the SVG element. We start passing the values for styles and the functions that are going to draw the visualisation. The values will be defined below. Here we also pass the data of the csv file that we are going to store in the variable data to draw the line and establish the axes.

Je me demande pourquoi la ligne s'arrête en ~2005 alors que les données vont jusqu'en 2022 et l'axe x aussi.

For the y axis we pass the value data into the scaleLinear function. We also use the values for margin and height we had previously defined.

For the scaleTime function we're going to pass the data, specifically the date to draw the x-axis for the line chart.

We set the margins that we are later going to pass as values to calculate the range for the scaleTime and scaleLinear functions.

xScale is going to define the scale for the x-axis.

Quelle est la différence entre x et xScale? Est-ce que xScale est utilisé? je ne vois pas où dans la minimap en tout cas

Tu as raison. C'est la même fonction. On utilise "x" plutôt que xScale dans la fonction xAxis

With the xAxis function we are going to draw the x-axis. Here we set the position and the size and format of the tick markers for the values.

With yAxis we do the same as with xAxis, but for the y-axis this time. For the y-axis we're also going to extend the domain scale of the values to 6000. We also set some elements for the style and the attributes for the g element.

Now we pass the values for x and y to draw the line according to the data by making sure that all our values for the y-axis are numbers.

The transition function will define the animation and will call the tweenDash function we define next to set the stroke-dasharray attribute to draw the line.

The tweenDash function will get the length of the path element in the SVG element in order to interpolate the values and draw the whole continuous line.

This is the file for the data.

This is another data set we don't use. This comes from the original dataset this project was forked from.

Here we call for all the D3 functions that we have been using such as the scaleTime, the scaleLinear, the tweenDash and the transition function to name a few.

yScale is going to set the scale for the y-axis by rounding the values with the nice() function.