In this video, I want to start to talk with you about D3.
D3 is a JavaScript library that was created to help us to build visualization
in the web platform and it's important to distinct two functions of D3.
The first one is the methods that it provides for us to manipulate the data,
to transform the data to a format that is easy to visualize.
The second one is to create the actual visualization,
so using D3 to actually draw on the screen.
The way we import D3 in our page is by adding a tag script,
and then we can use the download the file that we have on the D3 website,
and then just refer this file in the src of our script.
If you want, you can actually use this file also hosted on
a CDN network that in theory should give you a faster load of D3.
In this case, you can just replace the d3.js in your src by the CDN URL,
that's going to contain the library that we're going to use.
When we think about the visualization,
we actually have to think about four steps that we
need in order to get our chart in the screen.
So before that, the first thing that we have to do is to transform our data.
So, we receive data in the same format,
but then this data is not in a good format that we can visualize and we needed to
transform this in order to get a shape of
data that is easier to create our visualization.
After we have this new format of data,
we can actually have to map this data to the visual space.
So, for example, if you have a field that has values in dollars,
you're going to have to convert those values to pixels,
so we can draw in the screen,
and you want the values in pixels to be proportional to your values in dollars.
Then, also, we have the new data in the new visualization space,
I can start to work on the visual space.
Even before drawing, I may have to compute my layout.
By layout, if you have complex visualizations like pie charts
or even treemaps where you have to put things based in where the other ones are,
you need a layout to help you with that.
Then, finally, also, we have this computed in my data,
now, I can actually draw that on the screen.
D3 has methods and functions to help you with each of those steps.
So, even if you prefer a library to draw, for example,
you've been using jQuery or you've been using React,
you can actually use all the other functions of
D3 to support you in all the other three steps.
The way we execute each of those step is by using the APIs.
If we think, for example, transform data,
every API of D3 often is going to start with the d3.something.
Here, for example, we have d3.cross,
that is API to help you to create a cross-multiplication over two collections.
You have d3.max, for example,
that helps you to get the maximum value in a field,
and that's very helpful if you're creating your scales.
After we have this data in the format,
we can actually map into map,
you can use APIs like d3.scaleLinear that maps linearly between
the two values or d3.scaleTime that helps you to work with time values.
Finally, we're going to have the data now in
the visual space with metric is in pixels and so on,
now, we can compute the layout.
So, for example, d3.path is very helpful if you are drawing maps or
if you are drawing line charts because you have
to compute the line that you're going to show.
If you are creating a treemap, for example,
there is a complex visualization and sometimes hierarchical,
you need some library that's going to help you to compute
the positions of each square that you're going to have in your treemap,
and that is d3.treemap.
Finally, we're going to have this computation
done and we're going to start to draw this on the screen.
To do that, we're going to use d3.select,
for example, to select the elements,
and then change them the way we need to,
and then we can use d3.append as well to add new elements to our visualization.
Remember, that those are just some examples of the APIs that we have in D3.
We have many others that we're going to be using throughout this course.
So, keep in mind that D3 is a JavaScript library.
It works in your browser,
but it's also compatible with any other framework that you've been using.
If you want to use React,
Angular or any other framework for complex applications,
you can still use D3 to compute everything.
If you prefer to go Pure D3,
you can use D3 to do the visualization from
the data transformation until everything shows up in the screen.
Enrico BertiniAssociate Professor
Cristian FelixPhD. Candidate
