14. Misc topics (2)

Today's Topics

D3.js

InfoVis systems and libraries

Future of information visualization

JavaScript visualization library

Developed by Mike Bostock at 2010

Use SVG and DOM

http://gyazo.com/de8d809e2d27f77f76300a6d854fb322.png

http://gyazo.com/f72348e5c77e7e3f484b6537137d4c1e.png

Current status of D3.js

Most popular visualization system

Integration with other frameworks

Hidden empty houses in the suburbs

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

SDraw

Use D3.js for drawing

https://gyazo.com/6ab47e029ae216659a006578a433c065 http://www.pitecan.com/SDraw/sdraw.html

https://gyazo.com/4fd22526469208fb49d280edbc724f0a

Treemap, Sunburst, etc.

https://gyazo.com/0ce5bf9f70ca6f12d3946ef661ca30e2

Visualization of Scrapbox links

https://gyazo.com/750fcfca435be7c85e384ea47a7d9723

http://gyazo.com/78195b75ea63a1f901f4986d35e40be8.png

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

http://gyazo.com/105523c43eea6892fba4a76694f5a5bc.png

D3.js references

https://gyazo.com/a3535d8eb76508fc60f8ab3e43092a21 https://shimz.me/blog/d3-js/5022

Video: Design is a search problem

https://www.youtube.com/watch?v=fThhbt23SGM

SVG (Scalable Vector Graphics)

Vector-based drawing system

Old standard of graphics

Available on modern browsers

Drawing rectangles

code:rect.svg

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

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

<svg width="320pt" height="223pt" viewBox="0 0 100 70"

<rect x="5" y="5" width="70" height="40" fill="red"/>

<rect x="15" y="15" width="70" height="40" fill="orange"/>

<rect x="25" y="25" width="70" height="40" fill="yellow"/>

</svg>

Result

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

Drawing lines

Declare lines in HTML

code:line.svg

<path d="M 100 100 L 300 100 L 200 300 z" fill="none" stroke="blue" stroke-width="3" />

<path d="M36,203L184,203L184,79L36,79" fill="none" stroke="red" stroke-width="3" />

</svg>

Result

http://gyazo.com/33d63493ee5dc57628610aa9e00a8e91.png

SVG and other drawing systems

SVG

Define drawing objects

Standard drawing systems

Canvas, OpenGL, X11, PostScript, ...

Draw objects sequentially

Run d3.js programs on a Scrapbox page

Specify a JS file as an argument

https://masui.github.io/rund3/?code=JS_URL

Circle graph

https://gyazo.com/18726f8b9d236749c38504e131def940

code:d3sample1.js

var canvas = d3.select("body")

.append("svg")

.attr("width", 500)

.attr("height", 500);

var g = canvas.append("g")

.attr("transform", "translate(300, 300)");

//var arc = d3.svg.arc()

var arc = d3.arc()

.innerRadius(130)

.outerRadius(200);

var pie = d3.pie()

.value(function(d) { return d; });

var arcs = g.selectAll(".arc")

.data(pie(data))

.enter()

.append("g")

.attr("class", "arc");

var color = d3.scaleOrdinal()

arcs.append("path")

.attr("d", arc)

.attr("fill", function (d) { return color(d.data); });

arcs.append("text")

.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })

.attr("text-anchor", "middle")

.attr("text-size", "10px")

.text(function(d) { return d.data; });

Bar chart

code:graph.js

// 1. データの準備

var dataset = [

{ "name": "A", "value": 5 },

{ "name": "B", "value": 6 },

{ "name": "C", "value": 8 },

{ "name": "D", "value": 1 },

{ "name": "E", "value": 2 },

{ "name": "F", "value": 6 },

{ "name": "G", "value": 8 },

{ "name": "H", "value": 6 },

{ "name": "I", "value": 10 },

{ "name": "J", "value": 9 }

]

var width = 400; // グラフの幅

var height = 300; // グラフの高さ

var padding = 30; // スケール表示用マージン

// 2. SVG領域の設定

var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

// 3. 軸スケールの設定

var xScale = d3.scaleBand()

.padding(0.1)

.domain(dataset.map(function(d) { return d.name; }));

var yScale = d3.scaleLinear()

// 4. 軸の表示

svg.append("g")

.attr("transform", "translate(" + 0 + "," + (height - padding) + ")")

.call(d3.axisBottom(xScale));

svg.append("g")

.attr("transform", "translate(" + padding + "," + 0 + ")")

.call(d3.axisLeft(yScale));

// 5. バーの表示

svg.append("g")

.selectAll("rect")

.data(dataset)

.enter()

.append("rect")

.attr("x", function(d) { return xScale(d.name); })

.attr("y", function(d) { return yScale(d.value); })

.attr("width", xScale.bandwidth())

.attr("height", function(d) { return height - padding - yScale(d.value); })

.attr("fill", "steelblue");

https://gyazo.com/4e3437b060a422db4c9714414912a652

code:circles.js

var svg = d3.select("body").append("svg").attr("width", 500).attr("height", 100);

var circles = svg.selectAll("circle")

.data(dataset)

.enter()

.append("circle");

circles.attr("cx", function(d, i) {

return (i * 50) + 25;

})

.attr("cy", 50)

.attr("r", function(d) {

return 5*d;

})

.attr("fill", "yellow")

.attr("stroke", "orange")

.attr("stroke-width", function(d) {

return d;

});

https://gyazo.com/faadffbc4cbc90730a03ae98b59973ef

code:scatter.js

var svg = d3.select("body").append("svg").attr("width", 500).attr("height", 100);

var dataset =

svg.selectAll("circle")

.data(dataset)

.enter()

.append("circle")

.attr("r", 4);

Treemap

code:treemap.js

// 1. 描画用のデータ準備

var width = 800;

var height = 600;

var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

var data = {

"name": "A",

"children": [

{ "name": "B", "value": 25 },

{

"name": "C",

"children": [

{ "name": "D", "value": 10 },

{ "name": "E", "value": 15 },

{ "name": "F", "value": 10 }

]

},

{ "name": "G", "value": 15 },

{

"name": "H",

"children": [

{ "name": "I", "value": 20 },

{ "name": "J", "value": 10 }

]

},

{ "name": "K", "value": 10 }

]

};

// 2. 描画用のデータ変換

root = d3.hierarchy(data);

root

.sum(function(d) { return d.value; })

.sort(function(a, b) { return b.height - a.height || b.value - a.value; });

var treemap = d3.treemap()

.padding(1)

.round(true);

treemap(root);

// 3. svg要素の配置

var g = d3.select("svg")

.selectAll(".node")

.data(root.leaves())

.enter()

.append("g")

.attr("class", "node")

.attr("transform", function(d) { return "translate(" + d.x0 + "," + (d.y0) + ")"; });

g.append("rect")

.style("width", function(d) { return d.x1 - d.x0; })

.style("height", function(d) { return d.y1 - d.y0; })

.style("fill", function(d) {

while(d.depth > 1) d = d.parent;

})

.style("opacity", 0.6)

g.append("text")

.attr("text-anchor", "start")

.attr("x", 5)

.attr("dy", 30)

.attr("font-size", "150%")

.attr("class", "node-label")

.text(function(d) { return d.data.name + " : " + d.value; });

Bar chart

https://gyazo.com/fe5e995c565e222df21ab5f5bd84c73b

code:bar.css

div.bar {

display: inline-block;

width: 20px;

height: 75px;

background-color: teal;

}

code:bar.js

d3.select("body")

.selectAll("div")

.data(dataset)

.enter()

.append("div")

.attr("class", "bar")

.style("height", function(d) {

var barHeight = d * 5; // 高さを 5 倍にします

return barHeight + "px";

});

Various systems and libraries

Google Chart Tools

https://gyazo.com/69097172a93cbc795bfa005d8d9ce922 https://developers.google.com/chart

Essays on Visualizzation

https://gyazo.com/f48eb86cb0b567b496b7ff34f4a78da7

Bar chart animation

https://www.youtube.com/watch?time_continue=5&v=R8VcUANNQs8&feature=emb_logo

InfoVis Portals

VisualComplexity.com

Visual Vocabulary

InfoVis portal?

Artistic

Yamabe-sensei

https://gyazo.com/e10a8ab312f6ae80950b46869cc5ff08 https://masakiyamabe.com/

Wakita-sensei

https://gyazo.com/110ca296a7ad564b502656c541330a63 https://wakita.sfc.keio.ac.jp/inner/visualizationofairconditioner.html

GIS

Human terrain

https://pudding.cool/2018/10/city_3d/ https://gyazo.com/f9a98f76d76f474587c3a7bfe1d936d6

Watershed map

https://s3-ap-northeast-1.amazonaws.com/naraemon-river/index.html#10/35.6810/139.7670 https://gyazo.com/94107130e77be8cce75e223476cf5080

Only-river map

https://www.gridscapes.net/AllRivers/#9/35.3499/139.0512 https://gyazo.com/90cea877893e473e6e4559ff36a1cbd0

Mini Tokyo 3D

Real-time trains

https://nagix.github.io/mini-tokyo-3d/#14/35.6814/139.767/0/60 https://gyazo.com/4a8aa27e355493200d0e76c80deef7de

http://gyazo.com/f403687b15d406b8c6535700ab1c01a8.png

Library

https://gyazo.com/7e99093120a3c7df38e4faedfcd55573

http://gyazo.com/6921c694411a51a947e6b7354bc729b1.png

Library for data management and infovis

Graph visualization systems

Graph visualization system

http://gyazo.com/df9bc4e839d00efad401c72d08af56d7.png

Graph visualization

http://gyazo.com/b01cde25f45ec668914f16f971b26de6.png

http://gyazo.com/82704e7bfdab25ee6aa7cf8d4bd1a717.png

Realtime visualization of a graph

Graph visualization

http://gyazo.com/775d385df4ea3d7db5c5fe9a31d8c36b.png

Network visualization + data management

R, Python, Ruby

http://gyazo.com/dcb2c36eee60864a76f92fb8b9b0d781.png

http://gyazo.com/cf7d02feb113f85c8ed3f3b1b7da66e4.png

http://thejit.org/ http://gyazo.com/c9361874f5163ffccdda8f65a53450bd.png

InfoVis

JavaScript visualization library

Animation support

http://thejit.org/static/v20/Jit/Examples/Treemap/example1.html http://gyazo.com/d83b93de1a2273fae70f79a7b9a14e14.png

http://thejit.org/static/v20/Jit/Examples/ForceDirected/example1.html http://gyazo.com/ad098fd9ef176e44c187bdf4212e3413.png

Interactive infographics

http://infogr.am/Home-Run-Leaders-by-Season-Since-1901 http://gyazo.com/28489a66010a53e9235e705587c51d9b.png

http://gyazo.com/65c11d14d0ffae1f2546a564635d0f8e.png

Using D3

http://gyazo.com/9d833f18d4a7ffde85fb68d1c2fd1eb3.png

Visualization + network analysis

http://gyazo.com/027041ae81033b7de033394195b10f59.png

http://gyazo.com/e48af851cee63cdd5a7d46b01a9a0bb0.png

https://vimeo.com/7308004

https://www.youtube.com/watch?v=cY8zCQAm5uo&feature=emb_logo

Network visualization for bio research

cyto == 「cell」

Applicable to other network data

MAX-like visual programming environment

http://gyazo.com/84b4b4ef14428f79a548221600b1e350.png

https://gyazo.com/617c639f0317c41ae8d6535ffec33405

General-purpose surface modeler

NURBS

Visual programming by Grasshopper

https://gyazo.com/254b85ad40fa322797c7995cefc20abd

ElasticSearch visualization

Graph drawing for Facebook links

Future of information visualization

Visualization everywhere

Digital signages, mobile devices

"Information dashboard"

Digital signage

Found on stations

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

Digital signage tower in Seoul

http://gyazo.com/f4d9fa68059981201320cdd912c16030.png

Universal design

No character required

https://gyazo.com/8af355a6fbf711e474c3169607eecb5d

Pictograms

http://gyazo.com/141da66599f1c9b4197b06f2e7bded82.png

End