Interactive Data Visualization for the Web Scott Murray

Interactive Data Visualization for the Web Scott Murray

Technology Foundations Web technologies HTML CSS SVG Javascript

HTML (Hypertext Markup Language) Used to mark up the content of a web page by adding a structure to the elements in the web page Elements Paragraph, division, ordered and unordered list, headings, links, body, head, title, etc., and the root html Elements are created by tags, for example, <p> defines the beginning of a paragraph </p> closes the paragraph

A Simple HTML 1. Can you create a web page like the following, with your own content 2. Then enhance your web page with tables and images

A List of Common Elements

Comments, Classes, and IDs You can add comments to your html document with <! this is a comment --> Elements can be identified by their classes or IDs (important for CSS and Javascript) Classes: IDs: (only used for one element and only once in a page)

Document Object Model (DOM) Describes the hierarchical structure of HTML The parent, child, sibling, ancestor, descendant relationships among the HTML elements Open the development tool of your browser to check the DOM of the page you just created

Cascading Style Sheets (CSS) To style the visual presentation of DOM elements selector property value Selectors: DOM elements : body, h1, p, div, em, etc. Descendant selectors: div p /* p elements contained in a div Class selectors: example:.caption,.label,.axis (caption, label, and axis are class names You can string the classes together: e.g..bar.highlight ID selectors: e.g. #nav #export

Properties There are tons of properties in CSS Common properties: font-family, font-size, backgroundcolor, background-image, border, etc. http://tech.journalism.cuny.edu/documentation/css-cheatsheet/) An exhaustive list of CSS properties: https://developer.mozilla.org/en-us/docs/web/css/ Reference

Apply CSS rules Embed CSS in HTML

Apply CSS rules Reference an external file

Apply CSS rules Attach inline styles

Scalable Vector Graphics (SVG) Use D3 to produce SVG SVG can be directly included in a HTML document How to write SVG? Create a SVG element Between the svg tags, include your visual elements rect,circle, elliopse, line, text, and path (0,0) is the top left corner rect circle ellipse text path anything more complex then the preceding shapes

Styling SVG

Javascript Putting javascript code in your HTML External source file: Direct put in your HTML:

Quick Review of JS syntax Print message to the console (in the development window) console.log( hello world! ); Declare a variable var number = 5; You can later change the variable content to a value of different type number = hello ; JS is a losely typed language Declare an array (useful for you to try some visualization) var numbers = [1,2,3,4,5]; Objects

Quick Review of JS syntax Mathematical Operators Control structures Functions (a chunk of reusable code) Comments

Javascript Tutorials Codecademy http://www.codecademy.com/tracks/javascript Other resources: Overview: http://javascript.crockford.com/survey.htmltutorial: http:// www.w3schools.com/js/ Do this! Tutorial:http://www.w3schools.com/js/ Reference book: The Definitive Guide, 6th Edition

Data Driven Document (D3) Downloading D3 - http://d3js.org Unzip the download and create a sub-folder called d3 in the folder you put your HTML/D3 code Include D3 in your HTML Include or directly place Your javascript/d3 code here

Learning D3 Before running D3 code, you need to start a local web server by doing the following: Start a command line window Change to the folder that you will place your HTML code Run the following command python m SimpleHTTPServer 8888 & Open your browser, and type the address: http://localhost:8888 Watch the online tutorial https://github.com/curran/screencasts/tree/gh-pages/introtod3 Also start to read chapter 5 and follow the examples