1. Web Programming for Visualization
赖楚凡
北京大学可视化与可视分析实验室

2. Visualization

3. Visualization Programming Tools
Framework
Platform
Url
OpenGL with glut
C/C++
OpenFramework
Java2D with Swing
Java
Prefuse
Processing
Processing (based on Java)
ProtoVis
JavaScript
But now
We recommend Web Programming and D3js Library

4. Overview Web Programming Web-Based Visualizations HTML CSS Javascript
D3.js
Others

5. Web Programming

6. Why Web Programing? Pros But Accessible Flexible Library and sharing
Everyone, everywhere
Flexible
Easy to learn and develop
Library and sharing
Don’t need to build wheels for the cars
But
We still need C++ for high- performance computing and visualization

7. What is Web Programing? The WWW Stuffs HTML CSS JavaScript The House
Style Designer
JavaScript
Builder

8. HTML
HyperText Markup Language

9. HTML Structure An example Tags Annotation & Debug
Header
Body
Embedded assets
An example
Tags
<div></div>, <p></p>, <img/>, etc.
Annotation & Debug

10. HTML Document Object Model (DOM) Tree Property Method Event
Class, id, color …
Method
Find, insert …
Event
Onclick, onload …

11. HTML Learn online From HTML to HTML 5 W3school (上海赢科)
W3Cschool (W3C中国)
菜鸟教程 (Runoob)
From HTML to HTML 5

12. CSS CSS Inline or External Cascading Style Sheet (层叠样式表)
Describe the look and formatting of HTML
Inline or External
Separate styling from structure

13. CSS CSS Selector Other styles and selectors From CSS to CSS 3 Less.js
Select HTML elements
ID Selector & Class Selector
Other styles and selectors
From CSS to CSS 3
Less.js
Lesscss.cn

14. JavaScript Why JavaScript? Example Scenario HTML: contents
CSS: styling
JavaScript: behaviors and interactions
Example Scenario
Web Page
(Client Side)
Web Engine
(Server Side)
request
response

15. JavaScript
Inline vs External
Manipulate elements

16. Others Framework Styling Library NodeJS, React, Backbone, etc.
Bootstrap, JqueryUI, etc
Library
Jquery, Underscore, etc.

17. D3 for Visualization

18. Web-Based Visualization
Bridge between HTML and visualization
Canvas
WebGL
SVG
D3.JS
Canvas
SVG

19. SVG vs Canvas Scalable Vector Graphics (SVG) Canvas
Object-based vector graphics
Immune to scaling
Canvas
Pixel-based graphics
Fast to response, high performance

20. SVG-Based Visualization
D3.js
Data-Driven Documents
Binding data to HTML elements

21. The ‘Three Little Circle’
Step 1: Relationship between SVG and D3

22. The ‘Three Little Circle’
Step 2: Selection

23. The ‘Three Little Circle’
Step 3: Binding Data

24. D3 Core: Binding Data
Enter – Update - Exit

25. Constructing a Scatterplot
X-axis
Y-axis
X, Y mapping
Color encoding
Labeling
Any interactions

26. Step 1: Loading the data Loading Data Preprocessing related attributes
d3.tsv("data.tsv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.sepalLength = +d.sepalLength;
d.sepalWidth = +d.sepalWidth;
});

27. Step 2: Mapping the data Mapping the data Defining the boundary
Defining the ‘d3.scale’
Choosing the mapping mechanism – linear, log, etc.
Setting the ‘domain’ and ‘range’
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = margin.left - margin.right,
height = margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
x.domain(d3.extent(data, function(d) { return d.sepalWidth; })).nice();
y.domain(d3.extent(data, function(d) { return d.sepalLength; })).nice();

28. Step 3: Preparing for drawing
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
SVG is the main canvas for drawing
X-axis and Y-axis is mapping with the x and y scale

29. Step 4: Drawing the primitives
Drawing the xAxis
Drawing the labels
Drawing the yAxis and lables
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("Sepal Width (cm)");
.attr("class", "y axis")
.call(yAxis)
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.text("Sepal Length (cm)")

30. Step 5: Drawing the Dot Main parts of the drawing Data binding
Data entering
Data updating
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function(d) { return x(d.sepalWidth); })
.attr("cy", function(d) { return y(d.sepalLength); })
.style("fill", function(d) { return color(d.species); });

31. Step 6: Drawing the Legends
Labels are the data of categories, in this data is 3 categories
Adding the rect and text
Setting the contents
var legend = svg.selectAll(".legend")
.data(color.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });

32. Practice Draw a Parallel Coordinates Plot (PCP)
Iris Data: 150 items, 4 dimensions

33. Canvas
Canvas rendering
WebGL
Based on OpenGL ES and Canvas