Live Coding D3.js

Learning About Your Web Browser

For many of you, this may be the first time you had to your your browser as a tool. Let's quickly step through some key functionalities:

The Console:

• Right click anywhere on this page and choose 'Inspect Element.'
• In Google Chrome, you will see a list of tabs (Element, Network,...) and an arrow to its right. Click that to expand the tabs list and choose "Console."
• This is used to log diagnostic information to help debug your web page or application.
• You can also you it to compile JavaScript while the browser is open. Type this in the console:

  var a = 3;
  a*4
  

• To log variable values in the console, all you need to do is add console.log({some value}) to your Javascript code

Document Object Model (DOM) tree:

• The DOM is a convention for representing and interacting with objects in HTML, XHTML, and XML documents.
• Think of it as a tree of parent and child nodes.
• When a web page is loaded, the browser creates a DOM of the page.
• Your browser treats each element of the DOM as an object. With the object model, JavaScript is fully enabled to create dynamic HTML.
• In the GIF below, I show an example of d3.js updating elements of the DOM. In particulr, d3.js updates the locations of the circles when an event is triggered. More on this later.

Mouse Events:

• The coordinate system for the browser has a x,y origin in the upper lefthand corner of the page.
• The browser can detect when your cursor (e.g., mouse) interacts with elements in the DOM.

Below, I show a range of mouse events capable using JavaScript. Mouse over the image below and see the logged mouse coordinates associated with each mouse event.

mousedown: {{onMouseDownResult}}
mouseup: {{onMouseUpResult}}
mouseenter: {{onMouseEnterResult}}

mouseleave: {{onMouseLeaveResult}}
mousemove: {{onMouseMoveResult}}
mouseover: {{onMouseOverResult}}