Chapter 5 JavaScript

5.1 What is JavaScript?

JavaScript Inventor Brendan Eich

Figure 5.1: JavaScript Inventor Brendan Eich

  • JavaScript is not related to Java
  • Created by Brendan Eich in 1995
  • Originally developed as a prototype language for web browser (Client-side).
  • Now used in server-side (Node.js) as well.
  • Not related to Java, just named similarly for marketing purpose.
  • C style syntax but got inspiration from Functional programming
  • for, while, continue, break, if/else, switch are similar to C
  • operators (+,-,*,/,%) are also similar (except ==,!=,||)
  • include function operations such as map, reduce, forEach.

5.1.1 JavaScript Data Types

Data Types

  • Numbers: 42, 3.14159
  • Logical: true, false
  • Strings: “Hello”, ‘Taiwan’
  • null
  • undefined* - undefined is not null!

5.1.2 JSON

  • JavaScript Object Notation
  • JavaScript as an XML alternative for storing data
  • e.g.


5.2 What is D3?

  • D3 stands for Data-Driven Documents. -d3.js (D3) is “a JavaScript library for manipulating documents based on data”.
  • D3 can be used in conjunction with HTML and CSS (amongst others) to visualize data on a webpage.
  • It’s an open framework.
  • It embeds or includes data in scripts to create images in webpages.

“With D3, designers selectively bind input data to arbitrary document elements, applying dynamic transforms to both generate and modify content.”

Bostock, Ogievetsky and Heer, 2011

5.2.1 D3 and web documents

  • D3 is web-based, working with following components:
    • HTML (Hypertext Markup Language)
    • CSS (Cascade Style Sheet)
    • JavaScript(js)
    • SVG (Scalable Vector Graphics), interpreted graphic output

All of the above can be coded using a text editor. Output needs a browser with JavaScript console

5.2.2 Sample D3 graphics

Interactive Ladder Graph
D3: Ladder graph

Figure 5.2: D3: Ladder graph

Click here to access the online version

Interactive Aster Graph
D3: Aster graph

Figure 5.3: D3: Aster graph

Click here to access the online version

Interactive Network Graph