The image cannot be displayed.

Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again.

Principles of Data Visualization

Web Based Visualization

 OECD Better Life Index

Moritz Stefaner/RauReif, http://www.oecdbetterlifeindex.org/#/15511111111 2

 Building Blocks
! HTML
! Cascading Style Sheet - CSS
! Scalable Vector Graphics
! Javascript
! D3
! GitHub

3
Create a Web Server

Windows Apple OSX

4
 Choose a Text Editor
! Eclipse is a professional grade text editor
! Notepad ++ (windows)
! Sublime
! Brackets
! Text Wrangler

5
 Hypertext Markup Language
Head
Iden3ca3on Informa3on about the Page

Title
Title of the Page

Body
Required working area

H1, H2
Descrip3on of Page, Page Sec3on

P
New Paragraph of Text

6
 Body Work

P
New Paragraph of Text

UL
Unordered List, bullet points

OL
Ordered List, numbered

7
 Cascading Style Sheets
! Defines how HTML elements are displayed
! Applies styles by sheet (template) instead of individual tag
! Selector defines the object
! Declarations are the style properties applied

Selector Declara3ons

8
 Applying Height and Width
! Adjust pixel size of height and width
! Adjust minimum and maximum parameters

http://www.w3schools.com/css/tryit.asp?filename=trycss_dim_max-height 9
Linking CSS Stylesheet

10
 Scalable Vector Graphics
! Shift from pixel based to vector (algorithm)
! Based on shapes versus pixels
! Maintains quality when re-sized (scalable)
! Allows storage as a shape versus pixel information

11
 Creating an SVG Element
svg width
Size of the canvas

rect
Rectangle object type

http://www.w3schools.com/svg/tryit.asp?filename=trysvg_rect 12
Creating a Bar for a Chart
x & y width height
Star3ng loca3on LeQ to right Top to boRom

style
Specica3ons on lling the space

http://www.w3schools.com/svg/tryit.asp?filename=trysvg_rect 13
SVG Shapes

polygon line polyline

rectangle circle ellipse

14
SVG Syntax for Shapes

https://en.wikipedia.org/wiki/Scalable_Vector_Graphics 15
SVG Color Adjustments

rgb Red Green Blue

Rgb(255,0,0) = RED
rgb(0,255,0) = GREEN
rgb(0,0,255) = BLUE

http://www.w3schools.com/svg/tryit.asp?filename=trysvg_rect 16
 Javascript
! Provides event driven capabilities to adjust elements
! Clicking on a button below changes the content
! Provides ability to store variables

http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_inner_html 17
 Creating Javascript Shell

Javascript

Javascript

18
 Defining Variables in Javascript

Dening Variables

Wri3ng to Console

19
 Writing Variables in Console

Results in Console

20
 Defining an Array in Javascript

Dening Array

Wri3ng to Console

21
 Writing Array in Console

Results in Console

22
 Defining Objects

Dening an Object

Wri3ng to Console

23
 Writing Objects in Console

Results in Console

24
 Defining Object in an Array

Object Array

Wri3ng to Console

25
 Writing Objects in Console

Results in Console

26
 Writing Objects in Console

Reviewing Array

27
 D3 with SVG

D3 Library

SVG Components

28
 Use D3 to Select SVG Object

Use D3 to select

29
 Review Rectangle Element

Review Rectangle

30
 Change Rectangle Attributes

Change Width

31
 Loading a CSV file with D3

Load CSV into array

Make sure to change the URL to localhost/your directory

32
 Load Files to GitHub Gist

Rename Page to Index

33
 Load Files to GitHub Gist

Code and Data Record

34
 Save to bl.ocks.org

Public File of Work

35