In this course you will learn how to use D3.js to create powerful visualizations for web. Learning D3.js will enable you to create many different types of visualization and to visualize many different data types. It will give you the freedom to create something as simple as a bar chart as well your own new revolutionary technique. In this course we will cover the basics of creating visualizations with D3 as well as how to deal with tabular data, geography and networks. By the end of this course you will be able to: - Create bar and line charts - Create choropleth and symbol maps - Create node-link diagrams and tree maps - Implement zooming and brushing - Link two or more views through interaction The course mixes theoretical and practical lectures. We will show you step by step how to use the library to build actual visualizations and what theoretical concepts lie behind them. Throughout the course you will learn skills that will lead you to building a whole application by the end of the lectures (a fully working visualization system to visualize airlines routes). This course is the third one of the “Specialization in Information Visualization". The course expects you to have some basic knowledge of programming as well as some basic visualization skills.
Practice: Line Chart Part 2
Loading...
来自 New York University Tandon School of Engineering 的课程
Information Visualization: Programming with D3.js
个评分
New York University Tandon School of Engineering
个评分
课程 3（共 4 门，Specialization Information Visualization ）
从本节课中
Lines, Arcs, and maps
与讲师见面
Enrico BertiniAssociate Professor
Computer Science and Engineering
Cristian FelixPhD. Candidate
Computer Science and Engineering
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.
