JavaScript
We've explored data visualization concepts in the general sense so
the lessons learned from this class can go with you regardless of
what technology (including pen and paper!) you use to realize your
ideas. Today we will explore JavaScript (sometimes called ECMAScript
or just JS) as another option. Note that this skills lab is
optional.
Contents
Motivation
There are a lot of technologies out there to make data
visualizations. Some like
Tableau
don't require code. Others like
Vega are
programming languages just for data visualization. The
concepts we've explored in this class translate across all
of these different options and, indeed, many use similar
teminology to that which we've explored together in class.
This means that, even if you are moving into a new
technology, you should see some familiar ideas.
Even so, note that we've often centered our discussion on
Sketchingpy which has given us an opportunity to program for
the web through Python. This language was used as this
technology is more commonly known amoung the students
participating this semester. It is also one of the more
frequently used languages in the scientific computing space.
While professional data visualization designers use Python,
our community also uses other languages as well. In
particular, JavaScript is a popular option as it also runs
within the browser. We will explore JavaScript here. The
good news is Skechingpy is similar to some JavaScript
libraries leveraged for interactive data graphics so the
transition isn't too hard.
P5
P5 is the
JavaScript equivalent to
Processing, one of the
libraries that really blew open the doors to interactive
data graphics. Also, working with P5 isn't too dissimilar to
working with Sketchingpy. Go ahead and give P5 a shot at the
P5 Getting Started Guide. The tutorials are excellent and, like Sketchingpy, there
is a web editor available.
JavaScript Itself
P5 offers a great introduction into JavaScript because the
"way of thinking" about computation can translate well
between P5, Processing, Sketchingpy, and many other similar
libraries. Let's next compare some of the language features
of Python and JavaScript by reviewing
Learning Javascript as a Python Developer. This just runs through some of the things you might
notice as different when you get started using JS in your
work.
D3
P5 can do some incredible stuff but
D3 is also
commonly used for data visualization in JavaScript. The way
that D3 thinks about data and drawing is a bit different
than P5. Specifically, while P5 fits into a procedural or
object oriented paradigm, D3 focuses quite a bit on a
"functional programming" perspective. For this next section,
you may consider using
Observable
or
Codepen if
you have not done much web development before. Regardless,
make your way through a
D3 tutorial. If you can master D3, P5, and Sketchingpy, you really can
take your data visualizations anywhere.
Next
That's it! In general, I still recommend most students use
Python (and possibly Sketchingpy) for the last part of the
class. This skills lab just gives you a sense of what the JS
avenue looks like so that you are better positioned to make that
jump into JS later. However, if you feel comfortable with web
development maybe because you have had prior experience in HTML
/ CSS / JS, feel free to give that a shot for this class'
concluding project. Regardless, thank you for being such an
excellent group of students. Thanks so much for a fantastic
class. I can't wait to see you for your final projects.
Citations