Throughout this course, we will encounter a variety of technologies and
tools, that enable designers, artists, developers, and data scientists
to express their views and communicate their insights with the world at large.
And while we will try to expose you to, what we think
are the most relevant tools, to help you create data visualizations,.
There are far too many technologies out there, to cover them all.
However, you may encounter them, or at least people who use them, so
it's a good idea to have some sense of what is there.
At the bottom of the spectrum,
are low-level graphics formats and specifications.
These are some of the most efficient, performant, and flexible of
your options when choosing to create a visualization, but a very low level and
have significant overhead, not only to learn, but to develop in.
Think of these as the assembly language of visualizations.
While these technologies, are very flexible in what you can do.
They force you to specify what you want done, in terms of pixels and lines, or
rather place a point at xy and create a path, to point wz.
This is much like if you were instructing a painter or robot how to draw.
As you go up the spectrum, to higher level languages and
libraries, it becomes much easier and faster to develop your graphics.
Though the tool you may use, may be slightly less flexible,
than raw HTML5 canvas, WebGL or SVG.
A hop, skip and jump up, we have our beloved D3.js.
We will get more into the specifics of D3 in just a second, but
as a data visualization library built atop open web standards,
it is implemented in JavaScript and allows for seamless binding of data,
to HTML and SVG elements, or actually anything on a webpage really.
Since you can style HTML and SVG with CSS, CSS works
very naturally with the whole stack of technologies that D3JS is built atop.
D3, contrary to what most people may think.
Is actually pretty low of an abstraction.
For continuing our analogy of programming languages and
what they're built atop I would say that D3 in the spectrum of visualization
technologies is actually at a similar level to where C or
C++ is in the whole spectrum of programming languages.
And just like people use C and C++ to build operating systems,
programs, and compilers for other languages, D3 really shines
when you use it to build higher level abstractions and libraries on top of it.
And this brings us to the suite of D3.js libraries.
This layer represents.
The plethora of high level libraries built atop the building blocks of D3.
Although there are far too many libraries to list or
even fit on this screen that are built atop D3, three of the most common or
ones that we would mention in this class are Rickshaw,.
Dimple.js and NVD3.
People often like to think of D3.js as data visualization library legos.
You can very easily compose D3.js components.
To build higher level abstractions and libraries on top of it.
While it might seem very daunting to navigate the space of every library built
on top of D3 they usually fall into one of two categories.
They are either high level charting libraries like NVD3 and
Dimple.js or they're tailored to a specific type of data.
Like Rickshaw.
Rickshaw was built to most effectively and
easily visualize time series and real time streaming data.
In the same vein of visualizing a specific type of data are also
geographic libraries to help plot data on maps and add interaction to maps.
We will use Dimple.js in this class in the later lessons.
And really experience the power of using a higher-level abstraction than
straight D3.
And again, going back to our spectrum of programming languages, if WebGL,
Canvas, and SVG are analogous to assembly language,
D3 is analogous to C and C++.
I would say the higher level libraries built atop of D3.
Are similar in abstraction level to something like Python or Ruby.
Python and ruby are fairly high-level languages, they're interpreted.
You don't have to deal with memory collection, and
many times they're implemented in C or C++.
And, just like these higher level languages.
Are implemented in a lower level language, NVD3, Dimple.js, and
Rickshaw can be thought of as implemented in or on top of D3.js.
At the very top of this spectrum, are libraries that
have graphical interfaces for creating verializations, such as Raw or Chartio.
Raw is an open source library built on top of D3 that allows you to
very easily and quickly build predefined charts.
Chartio is a web-based product similar to Tableau that allows
you to very quickly and easily explore your data to build dashboards and
charts hence the name.
Chartio.
Since these libraries are so high up on the spectrum, they have very
limited flexibility and can usually only produce a set of predefined charts.
The upside to having a set number of predefined charts.
The creates those almost effortlessly, and quite seamlessly.
Think of these as the Excel of data visualization libraries.
They're incredibly useful for about 90% or
95% of the use cases you most likely will encounter.
And they make those 95% of cases quite effortless.
If their charts happen to match what you're looking for.
But if you stray from this path of predefined charts it may be cumbersome,
if not impossible, to customize them.
If none of my silly analogy to computer programming languages made any sense,
do not worry.
You will not need to know any of this for the class.
Hopefully, however, it helped some folks get a better sense.
Of where each of these technologies stands on the spectrum of
abstraction and visualization.
I sometimes like to thing of these technologies existing within
a pyramid of abstraction.
Think of the width of the level of the pyramid representing how flexible
each of the technologies at that level are and the heighth of the pyramid.
Is how easy it makes it to create visualizations and
how much developer productivity they enable.
At the bottom of the pyramid are technologies that have quite a lot of
flexibility and offer a lot of games in performance and
efficiency, but maybe very difficult to use, and slow to develop in.
At the other end of the spectrum, and at the top of the pyramid.
You have taken all these like Raw and Chartio.
Which are very easy to use, allow you to develop visualizations very quickly.
And iterate on those visualizations.
But may be much less flexible than something like Web GL or D3.
One thing you always have to consider as a developer,
especially if you're working on a data science project.
Where the entire scope of the project is much larger than just
the visualization portion is the trade off between developed productivity and
the efficiency of your solution.
Due to recent trends and
the performance improvements in the browser and of all technologies involved.
And also in the abstractions created by higher level libraries, developers
are quite fortunate and get something the best of the best of both worlds
between very productive and having quite flexible and efficient libraries.
Because of this, you can have your cake and
eat it too than rather code in a high level library.
And still get decent performance and flexibility, and while each of
the many data visualization libraries out there have their strengths and
weaknesses, in this class we will focus on the particular JavaScript library D3.