Scribd
Upload
55 views

Principles of Data Visualization

The document provides an overview of principles for creating web-based data visualizations, including using HTML, CSS, SVG, JavaScript, D3, and GitHub. It discusses setting up a web server, choosing a text editor, using HTML tags and CSS stylesheets to structure and style elements. It also covers creating scalable vector graphics using SVG syntax and shapes, adding interactivity with JavaScript, and loading external data with D3 and CSV files.

Uploaded by

Anurag Laddha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
55 views

Principles of Data Visualization

The document provides an overview of principles for creating web-based data visualizations, including using HTML, CSS, SVG, JavaScript, D3, and GitHub. It discusses setting up a web server, choosing a text editor, using HTML tags and CSS stylesheets to structure and style elements. It also covers creating scalable vector graphics using SVG syntax and shapes, adding interactivity with JavaScript, and loading external data with D3 and CSV files.

Uploaded by

Anurag Laddha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 35

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

You might also like