In a previous video,
we built a base so we could draw a line chart on top of it.
So now, we actually want to draw this line,
and we're going to be using the line generator from d3 to create
this line for us based on the data that we're going to provide.
So, here we have our base already created.
We have our scales,
that is xScale and the yScale.
One deals with time and the other one
deals with numbers that are the price of the product,
and we want now to draw a line that is going to show
the evolution of the product over time.
So the first thing we need to create is our value generator.
So, we're going to call it valueline,
and we are going to call d3.line that is our line generator.
But now, we have to tell d3 how are we going to
decide which is the x position of the next point of the line,
and the y position of the next point of the line.
So, we're going to use.x to define
a function that's going to give a data point return the x position of the data point.
That is basically our xScale,
and this position is based on the time because you have the time on the xScale,
so you're going to call it date.
Our next step is the y position.
So, we're going to come here and you're going to say y,
it's the same thing so we are going to receive a d. But this time,
we're going to use our yScale and you're going
to convert the price to the position of the object.
So, as we have our line generator created,
the next step is to actually draw this line on the screen.
So we're going to do that by first, appending a path.
So, if you want to draw our complex line using SVG,
usually, the element that you go is the path.
The path is able to draw any type of complex lines because it just
provide the starter point and the next point of each segment of the line,
and it's perfect if you want to draw a line chart.
So, different from a bar chart that you get
different objects for each element of your chart.
Here, we're going to get only one object that is a line that
represents all the data points that we have in our data.
So, we do append path,
and the next step is to bind the data to this path.
So, as I said, because we have only one element,
we cannot really use.data here because if we do.data,
this works when we want to create multiple elements out of the data.
This is going to create run the d3 joint part when we have enter,
exit, and so on.
But here, we don't want that.
Here, we want to associate this whole data to just this element that is my path,
that is going to be my line.
So for that reason,
we use datum instead of data.
So we want to do.datum,
and then we're going to parse our data.
So this is binding the data to our path that we created.
The next step is to actually draw something.
So, the instructions on how SVG is going to draw
the line are present on attribute called D. So,
we have to set this attribute.
So, we're going to do attr("d"),
and then we're going to parse our function.
So, in theory, this should be like this valueline(d).
So, this is basically is going to draw the line for us.
But we don't really have to parse this whole thing.
We can just call valueline like this
because the result is going to be exactly the same and our code looks cleaner.
So, by doing that,
I started to get something on the chart.
So finally, I get something that looks like a line chart.
For some reason, there is some black stuff here and there is a line crossing it.
This happens for two reasons.
So first, path is going to close automatically whatever thing you are drawing.
So, I am drawing a line that goes up here to the end.
When it gets to the end,
since I don't close it,
path is going to just close it back.
Although it doesn't draw it,
you won't see a line really here,
but it's assuming that there is something crossing back.
Then, we also have, by default,
everything that we build with the field of black.
So we're going to try to color it as black.
So that's why you get those black spots here throughout your line.
So we don't really want that.
So, what we need to do is to format the line to look the way we want.
So the first thing, we could just set the style here.
But sometimes if you are reusing this line throughout multiple places,
you have a complex format,
it's actually easier to just use CSS.
So, you're going to associate a class here to
this element that you're going to call line,
and then it can go all the way on the top on our style tag and create a class for that.
So we're going to call it line,
and the first thing it's going to say we don't want any fill.
This mean we don't want the black part.
So the black part is not there anymore,
but since we don't have the stroke,
that is basically the actual line,
we don't see it so you're going to set the stroke,
and I'm going to set the stroke to be blue.
So finally, we can see the line now without any of
the black thing and without also the crossing thing that was crossing here.
So, the last step that we have here is that we have those weird rows here.
If you look in the data, the reason is because we don't have value for those month.
So, we don't really want to show that.
We want the user to know that we don't have value and not be
fooled think that the price dropped during those month.
So, d3 provide us a method to tell the line generator if a value is defined or not.
If it's not defined,
d3 is going to make sure to break this line and showed then as
two separated lines so you know that in that period you don't have information.
So to do that, we can just do.defined,
and then provide a function that given
a data point it's going to tell you if it's defined or not.
So for us here,
we're just going to use the price as the definition of defined or not,
and those two exclamation points here on the beginning
basically converts the price that we have to a Boolean value.
What this means is if I have the price,
it's going to become true.
If I have any value other than zero,
it's going to become true.
But if I have zero or I have no value,
it's going to become false.
So, this is going to do
exactly what's defined as punctual because it expect the true or false.
As you do that, you see that now the d3 removed those down lines that we had.
We are not fooling the user anymore.
So now, the user knows that in this period of time,
we don't really have information so we cannot really draw chart for that region.
So, drawing a line chart is not really that complex.
You can see that we can do with a few lines of code.
You have to use the value generator that's going to help you to draw this whole line.
You have to be careful to use datum instead of data because often we
forget that and we start to spend a long time trying to
debug something just to realize that we use the wrong method.
So if you are building a line chart,
most of the time you're going to be work with datum because you have
only one path that contains all the information,
while if you're usually drawing a bar chart or a scatter plot,
you would have multiple marks to represent your data.
So, that's it.
That's how you build a line chart,
and be aware with the path as well because you're going to always be setting the d
attribute with the actual path that you are creating using your value generator.
