Today is a deep dive to Plotly, and how you can prepare data so that your Plotly library can interpret data for visualization.

Although we are learning Plotly, its concepts can be applied to any JavaScript visualization library with minor tweaks.

Map Method & Arrow Functions

Let’s open up the file(s) in the 01-Ins_Mapping folder to get started.

Mapping is a technique where we use a callback function to add logic and process data.

What is a callback function?

A callback function is a function that is passed into another function or procedure. The main idea is to:

  • Re-use code via callback function to reduce unnecessary repetition.
  • This is liken to what we learned in algebra: f(g(x))

However, callback functions can become very complex if we don’t manage it well.

  • There is something called a “callback hell”: http://callbackhell.com/
  • This is incredibly important in your next lesson as you extract data from APIs.

In our use case for data visualizations, we are using mapping to process the data for visualizations and we shouldn’t be doing anything more complex than this.

Students Do: Mapping

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

Students Do: Mapping with Plotly

Let’s open up the file(s) in the 03_Stu_Greek_Mapping folder to get started.

Filter Method

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

Students Do: Filtering

Let’s open up the file in the 05-Stu_Filtering folder to get started.

Students Do: Filtering with Plotly

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

Sorting and Slicing Methods

Let’s open up the file(s) in the 07-Ins_Sort_and_Slice folder to get started.

Students Do: Sorting and Slicing

Let’s open up the file(s) in the 08-Stu_Sort_and_Slice folder to get started.

Students Do: Sorting and Slicing with Plotly

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