We are going to learn how to manipulate JavaScript (JS) so that you can visualize data publicly or internally within your company.

JavaScript is another language that has been around for almost as long as the Internet has been around in 1995, and it is designed to provide interactivity on a webpage.

We will visit an example to showcase a JavaScript chart:

Question: Why would you use JS to visualize data if you can do it with Jupyter notebooks?

JavaScript doesn’t run out of style because it is now used build websites from a server. However, we will only be doing basic JavaScript to storytell data.

Javascript can be used with BI tools such as Tableau, PowerBI or Domo if you need customization to your visualization. It is a good-to-have and not a must-have for a data analyst.

Creating Interactive Charts on the Web

Let’s open up the file(s) in the 01-Ins-Interactive-Charting-With-JavaScript to get started.

Thankfully, there is nothing to install with JavaScript. Your modern browsers today are all running on JavaScript and can interpret your code easily.

It can feel very weird and awkward to code in JavaScript because of it’s asynchronous nature (we will address the asynchronous nature in future), and that the language is loosely typed.

What do we mean when we say “loosely typed” or “strongly typed”?

When we declare variables in Python, the interpreter (aka system) tracks and ensure a variable’s data type is exactly the way it is. You can’t suddenly add a string to a number without seeing an exception error.

Not so with JavaScript. It will give its own interpretation of the variable when it sees a conflict.

Let’s try it in an example.

Python

  • Open up Git Bash
  • Run python
  • Declare x=1 and y="1"
    • x is an integer while y is a string.
  • Run x + y
    • It should raise an error: TypeError: unsupported operand type(s) for +: 'int' and 'str'

JavaScript

  • Open up Chrome as your browser.
  • Open up Inspector Tools by right-clicking an empty space within a page and selecting Inspect
  • Choose Console in the Inspector Tools
  • Declare x=1 and y="1"
    • x is an integer while y is a string.
  • Run x + y
    • It should give you 11 without any errors.

What does this mean for you for JavaScript?

  • You cannot truly rely on the interpreter to give you feedback on your errors at times.
    • Your code may run but it could hide a logic error.
  • Collaboration on JavaScript is more difficult because your team mate can give you code that runs but it could hide logic errors.

JavaScript Variables, Objects, and Arrays

Let’s open up the file(s) in the 02-Ins_JavaScript-Variables_and_Data_Structures to get started.

JavaScript’s syntax follows many of the other programming languages syntax, so it is not too difficult to follow with your Python background.

Students Do: My Variables, Objects, and Arrays

Let’s open up the file(s) in the 03-Stu_JavaScript-Variables_and_Data_Structures to get started.

Students Do: My First Plotly Chart

Let’s open up the file(s) in the 04-Stu_Plotly-Chart to get started.

Control Flow

Let’s open up the file(s) in the 05-Ins_Control_Flow to get started.

Students Do: Iterations and Conditionals

Let’s open up the file(s) in the 06-Stu_Iteration_and_Conditionals to get started.

Multiple Trace Charts

Let’s open up the file(s) in the 07-Ins_Multiple-Trace-Charts to get started.

Students Do: Multiple Traces

Let’s open up the file(s) in the 08-Stu_Multiple-Trace-Charts to get started.

Preprocessing Data with Functions

Let’s open up the file(s) in the 09-Ins_Functions to get started.

Preprocessing and data cleaning is usually mentioned simultaneously, but we try never to do data cleaning within a JavaScript client because:

  • The data should be cleaned before arriving on a client’s browser or it could impact usability.
    • Especially if you want to display a lot of data on a browser. It could slow a user’s browser down.
  • JavaScript isn’t a great tool to clean data.

We preprocess data so that the visualization library (in our case, Plotly), can display the data according to our storytelling.

Thus, if you’re cleaning data while trying to visualize the data, you might be doing it wrong.

Students Do: Creating Functions

Let’s open up the file(s) in the 10-Stu_Creating-Functions to get started.

Students Do: Preprocessing Data for Plotly

Let’s open up the file(s) in the 11-Stu_Preprocessing_Data_for_Plotly to get started.