cs 564 visualization techniques
TRANSCRIPT
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