>Data Visualization in Javascript
> Build visualizations in the reader’s device.
\ Otho Mantegazza _ Dataviz for Scientists _ Part 5.1
This is not a comprehensive introduction to data visualization in javascript, it’s just for breaking the ice.
Javascript
JavaScript (JS) Was developed as a programming language to run directly in the browser.
- It was released in 1995 by Brendan Eich,
- Javascript latest version is ECMAScript 6, abbreviated as ES6.
- Besides the name, it has nothing to do with Java.
Today javascript can run both in the browser (client side or front end), or independently from the browser, such as R (server side or back end).
Javascript
Javascript is what makes things happen on web pages, and in many apps. It is a very widely used programming language.
Try JS
You can try JS by opening the browser console.
But most of the time it is easier to try it in dedicated tools, such as:
Otherwise you can also install JS locally with node.js.
Assignments
Basic operations
In JS you can run all fundamental arithmetic operations.
The plus sign can also be used to concatenate strings.
Control Flow
Loops
let arr = [1, 2, "hi!"]
for (index in arr) {
console.log("value", arr[index], "detected at postion", index)
}If Else
Data structures
The most used data structures are arrays and objects.
Arrays
Objects
Objects and Arrays
Javascript objects can contain arrays and vice versa:
JSON
Dataviz in the browser.
Through HTML and CSS, the browser is one of the most sophisticated graphical tools available.
With JS, you can program in the browser, meaning that you can load data, and map the data to graphical elements in the browser.
Put the two pieces together, and you have an incredible tool for data visualization.
Dataviz in the browser.
For example you can make a bar chart out of a table:
Exercise
Open this JS Fiddle that makes a bar chart out of an excel table, about the population of Italian cities.
- Change the color of the bars.
- Add curved round corners to the bars.
- Add a new bar with the fourth highest populated city.
- Arrange the bars from smaller to the bigger.
- Color yellow only the bar that shows data about Milan.
- [OPTIONAL] Make a vertical bar chart.
Some Resources About JS
- Javascript for Data Science an introduction to modern Javascript by Maya Gans, Toby Hodges, and Greg Wilson.
- D3 in Depth visualize data on the web with D3, by Peter Cook.
- MDN web docs. An introduction to web development by the Mozilla Foundation.
- W3school Javascript Tutorial, by Refsnes Data.
No Need To Hack HTML
Although it might be fun sometimes, there’s no need to hack HTML elements to make data visualization on the web.
You can use two building blocks: SVG and D3.
D3
Javascript, as a programming language, is not dedicated to data analysis.
Indeed when Maya Gans, Toby Hodges, and Greg Wilson wrote their book “Javascript for Data Science”, they were suggested to change the title to “Javascript versus Data Science”.
D3 is a javascript library that partially fills this gap.
It was developed by Mike Bostock, and it provides fundamental functions to transform data into web based visualizations, with SVG or Canvas.
SVG
SVG is a vector graphics specification language that allows you to declare the position, shape and style of geometrical elements in space.
All SVG is human readable, so a circle is defined by the tag “<circle>”, a rectangle by “<rect>”, and a line by “<path>”.
You can use D3 to build SVG visualization on the web.
Let’s Try Them
Let’s go together through a basic quarto website that builds a visualization in the front end with D3 and SVG, starting from the penguins dataset.
- You can find the source code from Github at: https://github.com/othomantegazza/quarto-d3-example.
- And the website already deployed at https://quarto-d3-example.otho.app/.
Download and run the website locally as you did on the exercise on Quarto fro, the silde deck 4.1.
Exercise
Run the quarto-d3-example locally:
- Familiarize yourself with the javascript code in js/scatterplot.js.
- Remove and change pieces, see what happens.
- Use the function console.log() to print the variables at the javascript console, and understand what’s in there.
- Color the circles.
- Color the border of the circle, leave the center empty.
Exercise
- Transform the axes to log scale.
- Change the variables represented in the x or y axes.
- EXTRA: Map the species of the penguins to the color of the circles.