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

Visualization

Visualization Programming Tools Framework Platform Url OpenGL with glut C/C++ http://nehe.gamedev.net/tutorial/lessons_01__05/22004/ OpenFramework http://www.openframeworks.cc/ Java2D with Swing Java http://download.oracle.com/javase/tutorial/2d/index.html Prefuse http://prefuse.org Processing Processing (based on Java) http://processing.org ProtoVis JavaScript http://protovis.org But now We recommend Web Programming and D3js Library

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

Web Programming

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

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

HTML HyperText Markup Language

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

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

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

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

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

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

JavaScript Inline vs External Manipulate elements

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

D3 for Visualization

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

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

SVG-Based Visualization D3.js Data-Driven Documents http://d3js.org Binding data to HTML elements

The ‘Three Little Circle’ Step 1: Relationship between SVG and D3 http://bost.ocks.org/mike/circles/

The ‘Three Little Circle’ Step 2: Selection

The ‘Three Little Circle’ Step 3: Binding Data

D3 Core: Binding Data Enter – Update - Exit

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

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; });

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 = 960 - margin.left - margin.right, height = 500 - 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();

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

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)")

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); });

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; });

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

Canvas Canvas rendering WebGL Based on OpenGL ES and Canvas