CS 564 Visualization Techniques

CS 564 Visualization Techniques

Data Visualization and D3

2

3

Data Visualization

• Consists of two important pieces• Technical Challenge of implementation your solution/visualization.

• Can I create the visualization I have in mind – computer science challenge.• Presentation Challenge

• Does the visualization I have created explain what I want to my audience.

• A note about audiences: 3 Kinds• General public – this is very hard to do well. Very easy to do mediocre.• Technical Audience – very hard to do well. Very hard to do mediocre.• Trained Audience – a little easier to do well. Very very hard to do mediocre.

• This group is trained in reading specialized visualizations.

Technical Challenge

• Technical Challenge of implementation your solution/visualization.• Can I create the visualization I have in mind – computer science challenge.

• This is the Data Visualization Pipeline• This is the simpler step.

Data Visualization Pipeline

Data Source

Embed Data Into a Coordinate System

Extract Data and Generate Visualization Artifacts

Draw Artifacts Into Image

Data Visualization Pipeline

Data Source

Embed Data Into a Coordinate System

Extract Data and Generate Visualization Artifacts

Draw Artifacts Into Image

World population by country. List of countries with population

Choose coordinate system: Simple X,Y Plane

Sort list by population and create bars with x,y positions.

Here use a standard rendering package – D3.

What does the code look like?

• DrawWorld ( List countries):• Newcountries = sort(countries);

• For (i=0; i < length(newcountries); i++)• {

• x = i; y=0; height = newcountries[h].population;• Drawrectangle(x,y,height);

• }

Presentation Challenge

• Presentation Challenge • Does the visualization I have created explain what I want to my audience.

• In general this is quite a bit harder than the technical challenge.• This depends on an understanding of the expectations of your audience.

• Involves material from diverse field such as physiology, psychology, cognitive science, even sales and marketing.

Introduction to D3 Coding

D3 Web Resources

• Data Driven Documents: https://d3js.org/• Scott Murray http://alignedleft.com/tutorials/d3• Mike Bostock https://bl.ocks.org/mbostock• D3 Org Docs: https://github.com/d3/d3/wiki

Writing D3 Code

• Please pull examples down from d3js.org and from bl.ocks.org

• You will need to disable security on your web browser to handle ‘cross site loading’.

• With Chrome this is done with:• Chrome –disable-web-security –allow-file-access-from-files

Elements of D3 Program

• Written in Javascript within an HTML page.• Consists of three primary components:

• Javascript code for initializing and connecting to the data.• D3 Code for generating the Visualization.• Underlying data source – frequently a JSON file.

• http://alignedleft.com/tutorials/d3• Work through this tutorial.

D3 Uses SVG

• SVG = Scalable Vector Graphics• Consists of a Canvas – embedded in the documents.• Series of commands to draw figures:

• Draw circle at position x,y with radius 2.• Draw square at position x1,y1 with size 4.• Draw line with multiple points.

Checklist for Minimal Quality

• The figure should have a clearly defined legend.• Units for all axis should be clearly defined.• All text should be clear and readable.• There should be a clear attempt to provide some context.• There should be no errors or changing scales.

Scalable Vector Graphics

Excellent Intro on www.w3schools.com/graphics

SVG General Tag Structure

• <rect x="50" y="20" width="150" height="150"style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-

opacity:0.9" />

• First part is graphics coordinate options.• Second part is the ‘style’ which controls appearance.• Style can be set using an attribute or a reference to a CSS element.

SVG Primitive Elements

• Rectangle –simple rectangle.• Circle –simple circle.• Ellipse –simple ellipse.• Line –simple line• Polyline –simple polyline.• Polygon –simple polygon.• Path –complex path

• <rect x= y= width= height=>• <circle cx= cy= r= fill=“color”>• <ellipse cx= cy= rx= ry=>• <line x1= y1= x2= y2=>• <polyline points=“x,y x,y,…”>• <polygon points=“x,y x,y,…”>• <path d=“PLOTTER CODE”>

SVG Path Element

• <path d="M150 0 L75 200 L225 200 Z" />

• Case does not matter.

• M = moveto• L = lineto• H = horizontal lineto• V = vertical lineto• C = curveto• S = smooth curveto• Q = quadratic Bézier curve• T = smooth quadratic Bézier

curveto• A = elliptical Arc• Z = closepath

SVG Path Example• <svg height="400" width="450">

<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"stroke-width="3" fill="none" /><path id="lineBC" d="M 250 50 l 150 300" stroke="red"stroke-width="3" fill="none" /><path d="M 175 200 l 150 0" stroke="green" stroke-width="3"fill="none" /><path d="M 100 350 q 150 -300 300 0" stroke="blue"stroke-width="5" fill="none" /><!-- Mark relevant points --><g stroke="black" stroke-width="3" fill="black"><circle id="pointA" cx="100" cy="350" r="3" /><circle id="pointB" cx="250" cy="50" r="3" /><circle id="pointC" cx="400" cy="350" r="3" />

</g><!-- Label the points --><g font-size="30" font-family="sans-serif" fill="black" stroke="none"text-anchor="middle"><text x="100" y="350" dx="-30">A</text><text x="250" y="50" dy="-10">B</text><text x="400" y="350" dx="30">C</text>

</g></svg>

SVG – Scalable Vector Graphics

• SVG Primitives• SVG Attributes• SVG Transformations• SVG Programming Resources• SVG Hello World – Core Primitives• SVG Example Web Pages and Scripts• SVG Advanced Example.

SVG Strokes – controls the ‘Pen’.

• <svg height="80" width="300"><g fill="none">

<path stroke="red" d="M5 20 l215 0" /><path stroke="black" d="M5 40 l215 0" /><path stroke="blue" d="M5 60 l215 0" />

</g></svg>

• Stroke-width,stroke-dasharray, stroke-linecap

SVG Group Atribute

• <g fill="none" stroke="black" stroke-width="6"><path stroke-linecap="butt" d="M5 20 l215 0" /><path stroke-linecap="round" d="M5 40 l215 0" /><path stroke-linecap="square" d="M5 60 l215 0" />

</g>

• Everything inside of the <g> tag inherits its attributes!

SVG <g> tag – used for transforms!

• <g transform=“translate(20,30)”> --everything shifted over and down.• <g transform=“scale(1.0)”> - scale by 1. What happens?• <g transform=“scale(2,3)”> - scale x by 2, y by 3.• <g transform=“translate(-10,-10);

Mini-assignment

• Create some SVG pages and experiment with:• Try out a bunch of primitives.• Try out several <g> tags with groups and transformations.

• Send me a web page for Tuesday’s class.

D3 Layout Tools

• Bundle• Chord• Cluster• Force• Histogram• Pack

• Partition• Pie• Stack• Tree• Treemap

Cluster

Chord

Force

Pack

Partition

Access This Textbook

• This is a good textbook