10. Various programming environments for visualization

Requirements for visualization systems

Free or inexpensive

Run anywhere

Easy to install

Easy to program

Easy to publish

More requirements

Easy to write programs

Powerful representation

Runs on various environments

Windows, Mac, iOS, Android, ChromeOS, ...

Run on browsers

Chrome, Firefox, Safari, ...

Browser-based systems

table:drawing systems

complexity power standard Web open future

Processing ◎ ◯ ◯ ◯ ◯ △

P5.js ◯ ◯ ◯ ◯ ◯ ◯

Flash △ ◯ ◯ ◯ △ ×

Java △ ◯ ◯ ◎ ◯ ×

JS+Canvas △ ◯ ◯ ◎ ◯ ◯

JS+SVG △ ◯ ◯ ◯ ◯ ◯

HTML ◯ × ◎ ◎ ◯ ×

Other open systems

table:drawing systems

complexity power standard Web open

OpenGL × ◎ ◯ ◯ ◯

PostScript △ ◯ ◯ × △

System-dependent

table:drawing systems

complexity power standard Web open

GDI(Win) △ △ × × ×

DirectX(Win) × ◎ × × ×

Cocoa(Mac) △ ◯ × × ×

Xlib(Linux) △ △ × × ×

Using HTML for visualization

Only rectangles and characters

Automatic layout

Horizontal/vertical lines only

Treemap usig HTML

http://www.pitecan.com/du/data/du20091124.html http://gyazo.com/46c2235e3b033375409439e210ffd00e.png

Interactive visualization with JavaScript

Interactively modify location and size

Dynamic visualization

Communication with server

Interactive browsing

Drawing a rectangle

code:html

document.addEventListener('mousedown', mousedown, true);

document.addEventListener('mouseup', mouseup, true);

document.addEventListener('mousemove', mousemove, true);

var rect = document.getElementById('rect');

var down = false;

function mousedown(){ down = true; }

function mouseup(){ down = false; }

function mousemove(e){

if(down){

rect.style.backgroundColor = "#ffff00";

rect.style.height = e.pageY;

rect.style.width = e.pageX;

}

</script>

</body>

</html>

Power of CSS + HTML

https://scrapbox.io/cd/ https://gyazo.com/361d692b18e3a96fbc5305a69f02c74b

transform:rotate

animation

PostScript

"Page description language" by Adobe

Origin of PDF

Used in Apple LaserWriter

2D linear transformation + translation

Translation, rotation

No perspective transformation

Bezier curve

Affine transformation

Rotation, zooming + transformation

Used in technical drawing

Affine transformation

http://gyazo.com/5ddd1b241cb69e927c19a787461bc270.png

Perspective transformation

Used in 3D CG

Perspective drawing

Perspective transformation

Far objects drawn small

http://gyazo.com/8d60d74cbf382a9bd6bee628e0c34875.png

Perspective transformation of circle?

Perspective transformation of circle

http://gyazo.com/4c5aa4823b10c5a9647f338eff95b334.png

PostScript

https://gyazo.com/b74d5a8513517ef29e87a1a6751dde93

LaserWriter

Laser printer from Apple (1986)

B/W, 2 million yen

http://gyazo.com/2b78cf30bc6eba3a69a3486b0730e868.png

NeXT Computer

Founded by Steve Jobs in 1985

NeXT Cube 1988

Origin of MacOS

Drawing with "Display PostScript"

Objective-C

http://gyazo.com/66d94e93c6a0d0153f171b88692e2445.png

History of Adobe

1985 PostScript

1989 PhotoShop

1994 Acquired Aldus

2005 Acquired Macromedia

PDF

Converted PostScript

Conversion by "distiller"

Can be generated without PostScript

Standard for documents

PostScript

Programming language with drawing functions

Postfix nortation

c.f. Forth

Interpreter in printer

Can log in to printer

Reduced data between computer and printer

No input control

c.f. Display PostScript

Postfix notation

Formulas

Standard notation

Postfix notation

Used in HP calculators

No parenthesis required

Easily implemented with stack machine

Demo: dc command

10 20 + 30 * p ⇒ 900

Postfix notation

Conventional programming languages

for(i=0;i<10;i++){ printf("abc"); }

Postfix notation of Forth

1 10 { (abc) show } for

lines.ps

Drawing lines

code:lines.ps

%!PS-Adobe-3.0

0 0 moveto 0 400 lineto stroke

10 0 moveto 0 400 lineto stroke

20 0 moveto 0 400 lineto stroke

30 0 moveto 0 400 lineto stroke

%....

390 0 moveto 0 400 lineto stroke

400 0 moveto 0 400 lineto stroke

showpage

Result

http://gyazo.com/158a2c0d520dae1fa19fcc32d6a2933d.png

Using a loop

code:lines2.ps

%!PS-Adobe-3.0

0.5 setgray

0 10 400 {

0 moveto

0 400 lineto

stroke

} for

showpage

Result

http://gyazo.com/8aa4873f89a38e1b8d46282e0ba22fc8.png

Distiller

Convert PostScript to PDF

Loop result is expanded

Drawing with PostScript

http://gyazo.com/b37638d22c0df9d079f111f8c3280961.png

Demo: GhostScript

% gs -sDEVICE=x11

Canvas

Developed by Apple

Use canvas tag in HTML

Draw lines, rectangles, circles

Standard in HTML5

Available in modern browsers

Easy to use with JavaScript

Many libraries in jQuery

Drawing a polygon

code:html

<html>

<body>

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

ctx.beginPath();

ctx.moveTo(75,50);

ctx.lineTo(100,75);

ctx.lineTo(100,25);

ctx.fill();

</script>

</body>

</html>

Result

http://gyazo.com/cdf7dabe75857161b440ded84b4dda85.png

Drawing a line

code:html

<html>

<body>

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

ctx.strokeStyle = "rgb(0,0,200)";

var i;

for(i=0;i<300;i++){

ctx.beginPath();

ctx.moveTo(300-i,0);

ctx.lineTo(0,i);

ctx.stroke();

}

</script>

</body>

</html>

Result

http://gyazo.com/2f4849f0c5b321975576039ae95bb412.png

Drawing rectangles

code:html

<html>

<body>

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

ctx.fillRect(25,25,100,100);

ctx.clearRect(45,45,60,60);

ctx.strokeRect(50,50,50,50);

</script>

</body>

</html>

Result

http://gyazo.com/b3aa7686556ec60f67193ca047f261c0.png

Drawing rectangles with alpha

code:html

<html>

function draw()

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(200,0,0)";

ctx.fillRect (10, 10, 55, 50);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";

ctx.fillRect (30, 30, 55, 50);

}

</script>

</body>

</html>

Result

http://gyazo.com/ce38b07db1970b6396ac9fd69a70087e.png

Gradation

code:html

<html>

<body>

var ctx = document.getElementById('canvas').getContext('2d');

// Create gradients

var lingrad = ctx.createLinearGradient(0,0,0,150);

lingrad.addColorStop(0, '#00ABEB');

lingrad.addColorStop(0.5, '#fff');

lingrad.addColorStop(0.5, '#66CC00');

lingrad.addColorStop(1, '#fff');

var lingrad2 = ctx.createLinearGradient(0,50,0,95);

lingrad2.addColorStop(0.5, '#000');

lingrad2.addColorStop(1, 'rgba(0,0,0,0)');

// assign gradients to fill and stroke styles

ctx.fillStyle = lingrad;

ctx.strokeStyle = lingrad2;

// draw shapes

ctx.fillRect(10,10,130,130);

ctx.strokeRect(50,50,50,50);

</script>

</body>

</html>

Result

http://gyazo.com/30bb7098159442c5f9d53a875934f0ae.png

jQuery

Useful library for JS

Easy to create extension libraries

Various drawing plugins

jQuery Sparkline

Tiny visualization technique by Edward Tufte

Small graphs embedded in texts

http://gyazo.com/97043cdd33cf04787690a2afcbc59815.png

Example of jQuery Sparkline

code:html

$('.line').sparkline();</code>

Result

http://gyazo.com/54620ef5792f56d57bcaef3429b70b45.png

Other sparkline examples

http://gyazo.com/010be5fa26b5844fc774f3e4890156a6.png

SVG

Old graphic standard

Declarative drawing

Available on modern browsers

Input, links are supported

Drawing rectangles with SVG

code:xml

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http://www.w3.org/2000/svg">

</svg>

Result

http://gyazo.com/3ac4f9f16144b0fea50f9a67c322969e.png

Using a mouse

code:xml

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

var circleobj = document.getElementById("circle");

function moveGraphics(evt)

circleobj.setAttributeNS(null, "cx", evt.clientX);

circleobj.setAttributeNS(null, "cy", evt.clientY);

}

]></script>

</svg>

Result

http://gyazo.com/98509600dea1cdb3dbc1f0b731763c5d.png

DOM-based SVG drawing

Most promising at this moment

http://gyazo.com/de8d809e2d27f77f76300a6d854fb322.png

Mike Bostock

https://bost.ocks.org/mike/ https://gyazo.com/f72348e5c77e7e3f484b6537137d4c1e.png

D3 example

http://www3.nhk.or.jp/news/akiya/ http://gyazo.com/5bed14053463cb734b174c0902dd257d.png

Interactive Data Visualization for the Web

Information visualization with d3.js

http://gyazo.com/e16c6e41256a2e95dff2b2eea9389554.png

D3 example

code:html

var dataset = 5, 10, 15, 20, 25 ;

d3.select("body").selectAll("div")

.data(dataset)

.enter()

.append("div")

.attr("class", "bar")

.style("height", function(d)

var barHeight = d * 5;

return barHeight + "px";

});

D3 example

https://gyazo.com/7514bedd99ee0246581c331b8a7cb2e2

Various JS visualization libraries

http://gyazo.com/150470d90eff54b4a44404a311aa4f71.png

jQuery Visualize

jQuery plugins for visualization

http://gyazo.com/f0c3783ab763fbd9752a589f1d81697f.png

JS Charts

http://gyazo.com/ae5e97e886344fe244f54d5341c372be.png

Flash

Originally a presentation system

Acquired by MacroMedia (1996)

Acquired by Adobe (2005)

Integrated programming environment for ActionScript

EcmaScript compatible

Development with Flash

Flex

Integrated programming environment

mxmlc

ActionScript compiler

Free

Example of Flash application

http://gyazo.com/415e20d629fa111bff4ae33019e5977c.png

ActionScript exampleDeveloped by Apple

Use canvas tag in HTML

Draw lines, rectangles, circles

Standard in HTML5

Available in modern browsers

Easy to use with JavaScript

Many libraries in jQuery

code:javascript

.....

trapezoid.graphics.clear();

trapezoid.graphics.beginFill(0xc0c000,0.6);

trapezoid.graphics.moveTo(SBPOSX+SBWIDTH+5,BOXPOSY+firstline);

trapezoid.graphics.lineTo(SBPOSX+SBWIDTH+5,BOXPOSY+lastline);

trapezoid.graphics.lineTo(SVPOSX-1,SVPOSY+SVHEIGHT);

trapezoid.graphics.lineTo(SVPOSX-1,SVPOSY);

trapezoid.graphics.endFill();

.....

OpenGL

3D drawing library GL developed by Silicon Graphics

OpenGL = library for wide range of computers

Linux, Mac, Windows

Example of GL

code:c

#include <gl/gl.h>

main()

{

prefposition(0,200,0,100);

winopen("GL Example");

RGBmode();

gconfig();

RGBcolor(0,0,100);

clear();

cmov2i(40,45);

RGBcolor(255,255,255);

charstr("Hello, World!");

sleep(10);

}

Example of OpenGL

code:c

#include <GL/glut.h>

void ohinit(void)

{

glClearColor(0.0,0.0,0.4,0.0);

glFrontFace(GL_CW);

glEnable(GL_CULL_FACE);

glCullFace(GL_BACK);

}

void ohreshape(int w,int h)

{

glViewport(0,0,(GLsizei)w,(GLsizei)h);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluOrtho2D(-1.2,1.2,-1.2,1.2);

glMatrixMode(GL_MODELVIEW);

}

void ohdraw(void)

{

glBegin(GL_TRIANGLE_FAN);

glColor3f(0.0,0.0,1.0); glVertex3f(0.0,0.0,1.0);

glColor3f(1.0,0.0,0.0); glVertex3f(1.0,0.0,0.0);

glColor3f(0.0,1.0,0.0); glVertex3f(0.0,1.0,0.0);

glColor3f(0.0,1.0,1.0); glVertex3f(-1.0,0.0,0.0);

glColor3f(1.0,0.0,1.0); glVertex3f(0.0,-1.0,0.0);

glColor3f(1.0,0.0,0.0); glVertex3f(1.0,0.0,0.0);

glEnd();

glBegin(GL_TRIANGLE_FAN);

glColor3f(1.0,1.0,0.0); glVertex3f(0.0,0.0,-1.0);

glColor3f(1.0,0.0,0.0); glVertex3f(1.0,0.0,0.0);

glColor3f(1.0,0.0,1.0); glVertex3f(0.0,-1.0,0.0);

glColor3f(0.0,1.0,1.0); glVertex3f(-1.0,0.0,0.0);

glColor3f(0.0,1.0,0.0); glVertex3f(0.0,1.0,0.0);

glColor3f(1.0,0.0,0.0); glVertex3f(1.0,0.0,0.0);

glEnd();

}

GLUT

Library for using OpenGL on various platforms

Windows, Mac, Linux, etc.

Window / mouse manipulation

Example of GLUT

code:c

int main(int argc, char** argv)

{

glutInit(&argc,argv);

glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB);

glutInitWindowSize(300,300);

glutInitWindowPosition(100,100);

glutCreateWindow(argv0);

ohinit();

glutDisplayFunc(display);

glutReshapeFunc(reshape);

glutKeyboardFunc(keyboard);

glutIdleFunc(idle);

glutMainLoop();

return 0;

}

Example applications of GL/GLUT

LensBar

WING

LensBar

http://gyazo.com/77b8fad00d790d6e0fa4879d280ce176.png

DragZoom

http://masui.org/i/ https://gyazo.com/537951eb8ed43578783717eef497e391

WING

Information retrieval by 1D/2D/3D zooming

https://Gyazo.com/d44943c8f574a2da409443844eff601c.png

Video: WING

https://www.youtube.com/watch?v=8i1IqBXbV9g

WebGL

Running OpenGL on browsers

Introduction to WebGL

Rotating cube by WebGL

https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/webkit/SpinningBox.html http://gyazo.com/2b2d731b33eefbc423c30b28e0b8c3ee.png

Source

http://gyazo.com/4c2193c5acb673ffad2088117b779623.png

WebGL Fluid

https://gyazo.com/109ffc512ac1529068921545095db984

WebGL samples

Sample @ Khronos

Learning WebGL

three.js many samples

Many balls

Rotating globes

20 WebGL demonstrations

WebGL Water

https://gyazo.com/4afc96a4a5fbd15fd610f97636dbd740.png

Three.js

https://threejs.org/

GLSL

Programming the "shader" of WebGL

C-like language

http://glslsandbox.com/

Future of WebGL

Runs on most modern PCs and tablets

Faster than canvas drawing

Should be used more for visualization

Processing

http://gyazo.com/516bfb0a6512d6e058d748450dc95312.png http://processing.org/

Simple programming development environment

Developed by Ben Fry @ MIT

Subset of Java

HTML representation

e.g. #ff1234

Ben Fry

https://Gyazo.com/4b14e7234b823d503091bf4f158af271.png

http://hondana.org/%E5%A2%97%E4%BA%95/4873113784 https://i.Gyazo.com/b5d8dcb8b3161e03a4ba6bf83ab3bbd8.png

P5.js

https://p5js.org/ https://p5js.org/assets/img/p5js.svg

Javascript version of Processing

Examples

https://p5js.org/examples/simulate-particle-system.html https://gyazo.com/dc35c16d9d72708a3500035661777339.png

Using P5.js on Scrapbox

https://scrapbox.io/prog-exercises https://gyazo.com/f3c1bfc01bde8b4a62a1794c6d065699

Simulation of Escalator

https://gyazo.com/760d6ac078a0c67ed78998cef5ace9af.gif http://www.pitecan.com/Puzzle/escalator/

Books on P5.js

https://www.amazon.co.jp/dp/B016VF1G3W https://images-fe.ssl-images-amazon.com/images/I/41oWnX8VL1L.jpg

https://www.amazon.co.jp/dp/B06W9JYSY5 https://images-fe.ssl-images-amazon.com/images/I/51B8aBkVdQL.jpg

Other systems

Java

Cocoa

GDI

Xlib

Jitter

...

Summary

Various systems available on PCs

Simple systems and complex systems

Choose the best one for your needs

JS-based systems recommended

D3, P5.js

End