D3 means “Data-Driven Documents”. It’s not only plotting nice graphs and make awesome visualization. The main purpose of D3 is about manipulating DOM (Document Object Model).

You might ask, what is DOM?

You’ve been dealing HTML for some time, and DOM is simply represented by the tags which you’ve been using. We call the tags within a HTML as “DOM elements”.

  • In technical terms, it is the data representation of a document, and HTML is one such document.
  • Usually used by JavaScript to retrieve and manipulate data.

The power to manipulate the tags or DOM elements without reloading the page is the reason why we can put awesome visualizations on the web.

D3.json

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

You’re given this code:

const url = "https://api.spacexdata.com/v4/launchpads";

// Promise Pending
const dataPromise = d3.json(url);
console.log("Data Promise: ", dataPromise);

// Fetch the JSON data and console log it
d3.json(url).then(function(data) {
  console.log(data);
});

D3 allows you to retrieve data from API urls and parse it into variables automatically for you!

Then, we decide to confuse you with the Promise concept in Javascript, which is found here:

// Promise Pending
const dataPromise = d3.json(url);
console.log("Data Promise: ", dataPromise);

What is a Promise in JavaScript?

In English, we promise something, but we are only giving the assurance that we will do it. WE HAVE NOT DELIVERED YET. And thus, the make or break of many marriages. (joking).

In Javascript, there are many components within a page which calls different APIs and data. You may request data from an API, but that doesn’t mean the data will deliver!

Side note: this behavior is called asynchronous. Synchronous is what you’re used to, when code will break if a certain portion has errors. Async code WILL NOT BREAK and continue with the errors because different portions of code are independant of each other.

  • For advanced users. You will not always be able to determine if your code output is going to perform sequentially from top to bottom because of the asynchronous nature, where the data might arrive later than your expectation.
    • This is especially true if you’re doing multiple async requests to a server within a block of code.
    • Generally, we try not to have any coupling or dependency when we are pulling data. However, if you have a data dependency, you’ll need to use another JavaScript library (i.e. async.waterfall) to ensure the code adheres to sequential execution.

So some guy named this concept as Promise, and say if the data DOES DELIVER, we receive the data within a callback function. If the data DOES NOT DELIVER, we trigger an error within the same callback function.

There is a Promise object within the browser. It has three states:

  • Pending (The start of marriages)
  • Fulfilled (Disneyland kind of marriages)
  • Rejected (You realized you’re not in Disneyland.)

We will not dive deeper than the conceptual understanding of what promises are in JavaScript because it has no bearings to data analytics directly.

// Promise Pending
const dataPromise = d3.json(url);
console.log("Data Promise: ", dataPromise);

The promise here holds the response which is either one of the 3 states above, and/or the data if available.

Students Do: D3.json

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

D3 Select & Append

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

Remember BeautifulSoup, and splinter? Basically, we are selecting data from tags just like how we can do it with the Python libraries, but we are using d3.js for JavaScript.

D3 Select

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

D3 Event Listeners

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

Event listeners not only help to add interactivity to a webpage, but it is used also for tracking human behavior on a page.

You can see a wide variety of event types here: https://developer.mozilla.org/en-US/docs/Web/Events

Some of the more common event types:

  • click
  • change
  • keydown
  • keyup
  • scroll
  • pointerenter
  • pointerleave

Students Do: Button Clicks

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

Introducing this

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

The this keyword is specifically used during object oriented programming. If this as a keyword is being reference, it is pointing to the object where it is being called.

Here is some reference that can aid your study on this matter: https://pepa.holla.cz/wp-content/uploads/2016/08/You-Don-t-Know-JS-this-Object-Prototypes.pdf

this Button Clicks

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

Dropdown Events and Plotly

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

We are learning how to add additional interactivity on a page.

Students Do: Government Expenditure

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