INFORMATION VISUALIZATION

Alvitta OttleyWashington University in St. Louis

CSE 557A | Feb 16, 2017

MANIPULATING DOCUMENTS: EXAMPLES

• http://mbtaviz.github.io/

• http://www.nytimes.com/interactive/2014/upshot/buy-rent-calculator.html?abt=0002&abg=0

• http://www.nytimes.com/interactive/2010/07/29/sports/rodriguez-600.html

• http://www.cse.wustl.edu/~alvitta/publications.html

VIEWING YOUR PAGE

NOTE ON BROWSER

NOTE ON DEBUGGING

NOTE ON LOADING EXTERNAL DATA FILES

Need local web server

• Step 1: cd into code directory• Step 2 : python -m SimpleHTTPServer 8000

MANIPULATING DOM ELEMENTS

IN-CLASS EXERCISE: CREATE THE PAGE BELOW BY USING D3 CODE

h1 Manipulating DOM elements in D3

p Where is the visualization?

SIMPLE SCATTER PLOT EXAMPLE

0

20

40

60

80

100

0 100 200 300 400 500 600

SCATTER PLOT

IN CLASS EXERCISE

• Add padding• Add Axes