Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Visualization over Web
Tools and Tips
Kirby
Responsive

Visualization
Responsive

Visualization
RWD
in
Data Viz
本網站最佳瀏覽模式建議為1024 x 768,
建議瀏覽器為IE 6或FireFox2.0以上版本
1920px
1024px
800px
on iPhone 4s mobile ver.
Diversity of Android Camp
Landscape x 10
Portrait x 6
Desktop x 12
Mobile x 4
Raster vs Vector
Large in SizeLow Quality
Small in SizeHigh Quality
width
height
(x1,y1)
(x2,y2)
<svg
width=“w” height=“h”
viewBox=“x1 y1 x2 y1”>
preserveAspectRatio
xMin xMid xMax
yMin
yMid
yMax
<SVG
width=“800px” height=“600px”
viewBox=“0 0 400 300”
preserveAspectRatio=“xMidYMid”>
http://www.nytimes.com/interactive/2015/06/17/world/middleeast/map-isis-attacks-around-the-world.html?smid=tw-nytimes&_r=1
Desktop Mobile
ai2html.jsx → Presetszh_TW指令檔
檔案 → 指令檔 → ai2html
ai2html-settings:產⽣生檔案的設定
ai2html-css:在產出檔案中插⼊入額外的 CSS
ai2html-js:在產出檔案中插⼊入額外的 JS
ai2html-html:在產出檔案中插⼊入額外的 HTML
ai2html-t...
19 charts
Why
Rasterize?
Performance
Optimization
why rasterize?
http://www.foundi.info/lab/badneighbor/
I'm drawing a line consisting of 5000
separate segments and recording
total elapsed time and the time taken
for each 250 l...
Server Side D3.js
npm install d3 jsdom domino
d3.select(jsdom.jsdom().body)
with jsdom
d3.select(

domino.createWindow(“<d...
ClientServer
render.js
function render(node,data) {
d3.select(node).select("circle")
.data(data).enter().append("circle");...
client server
500ms delay 2.5MB in size
Rasterize SVG
require(“canvg”);
require(“canvas”);
canvg(new canvas(), “<svg> …</svg>”);
using node-canvg
client server svg server png
500ms delay 2.5MB in size
112k in size

10ms loading
D3.js Canvas
D3Data DOM
DOM to
Canvas

Canvas
DOM to Canvas
client
d3js + svg
server
svg
server
png
client
d3js + canvas
500ms 300ms 900ms 10ms
SVG CANVAS
Animation Comparison
using Force Layout
http://infographicstw.github.io/d3canvas/d3cmove.html
Marketing
and
Social Media
why rasterize?
var obj = {
method: ‘feed’,
link: ‘http://your.com/viz/?' + keyword,
name: keyword + ‘的顏⾊色是 …. !’
picture: yourImageURL
}
...
Applications
why rasterize?
Image Based Animation
loading.io
<x3d>
<scene>
<shape><box></box></shape>
</scene>
</x3d>
d3.select(“x3d scene”).selectAll(“shape”)
.data(data)
.append(“sh...
Rasterize HTML
<svg>

<foreignObject width="100" height="50"
requiredExtensions="http://www.w3.org/1999/xhtml">
<body xmln...
Rasterize D3.js
D3.js
HTML SVG
X3D CUSTOM
CANVAS
SVG
3D
CANVAS
WEBGL CA
NV
ASCANVAS
DATA

BINDING
INTERFACE
IMPLEMENTATION...
D3.js powerful client-side visualisation library
SVG responsive & interactive Graphics DOM
Canvas
fast, small and social-m...
Compatibility
why rasterize?
0.3% Android 2 in all page views
1% IE 7 + 8 in all page views
1%(IE) + 0.3%(Android2)
4 people in 300
can’t read SVG format
~
it’s about 235 people in all visitors
( lost 2 customers w...
25% traffic from handheld device
Precision
Gesture
Buttons
Hover
Cursor
High Low
EasyHard
3+ 1
NoYes
Yes No
Buy Now Buy Now Buy Now
Buy NowBuy Now Buy Now
tips!
Mouseover doesn’t work
Portrait mode is the common scenario
Performance and Bandwidth
Visualization with
Web Resources
https://www.project-tp.com/
ON BROADWAY: Represent our cities in new ways.
http://www.on-broadway.nyc/app/#http://www.fastcodesign.com/3043091/infogra...
http://www.clicktorelease.com/code/streetViewReflectionMapping/
https://www.biodigital.com/developers
http://graphics.wsj.com/3d-nasdaq/
http://shinydemos.com/facekat/
http://bignerdranch.github.io/music-frequency-d3/
http://dinahmoelabs.com/plink
Wrap Up
• Consider Different Device / Resolution / Browser
• Use Vector / Raster Image on Demand
• Leverage the Power of W...
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Visualization over Web: Tools and Tips-吳泰輝
Upcoming SlideShare
Loading in …5
×

Visualization over Web: Tools and Tips-吳泰輝

6,860 views

Published on

Visualization over Web: Tools and Tips-吳泰輝

Published in: Data & Analytics
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/2ZDZFYj ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ♥♥♥ http://bit.ly/2ZDZFYj ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! High Quality And Affordable Essays For You. Starting at $4.99 per page - Check our website! https://vk.cc/82gJD2
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Visualization over Web: Tools and Tips-吳泰輝

  1. 1. Visualization over Web Tools and Tips Kirby
  2. 2. Responsive
 Visualization Responsive
 Visualization RWD in Data Viz
  3. 3. 本網站最佳瀏覽模式建議為1024 x 768, 建議瀏覽器為IE 6或FireFox2.0以上版本
  4. 4. 1920px 1024px
  5. 5. 800px
  6. 6. on iPhone 4s mobile ver.
  7. 7. Diversity of Android Camp
  8. 8. Landscape x 10 Portrait x 6 Desktop x 12 Mobile x 4
  9. 9. Raster vs Vector
  10. 10. Large in SizeLow Quality
  11. 11. Small in SizeHigh Quality
  12. 12. width height (x1,y1) (x2,y2) <svg width=“w” height=“h” viewBox=“x1 y1 x2 y1”>
  13. 13. preserveAspectRatio xMin xMid xMax yMin yMid yMax
  14. 14. <SVG width=“800px” height=“600px” viewBox=“0 0 400 300” preserveAspectRatio=“xMidYMid”>
  15. 15. http://www.nytimes.com/interactive/2015/06/17/world/middleeast/map-isis-attacks-around-the-world.html?smid=tw-nytimes&_r=1
  16. 16. Desktop Mobile
  17. 17. ai2html.jsx → Presetszh_TW指令檔
  18. 18. 檔案 → 指令檔 → ai2html
  19. 19. ai2html-settings:產⽣生檔案的設定 ai2html-css:在產出檔案中插⼊入額外的 CSS ai2html-js:在產出檔案中插⼊入額外的 JS ai2html-html:在產出檔案中插⼊入額外的 HTML ai2html-text:設定變數,⽅方便在其它⽂文字⽅方塊中引⽤用 * variable-name: value」設定變數
 以 <%=variable-name%>使⽤用變數
  20. 20. 19 charts
  21. 21. Why Rasterize?
  22. 22. Performance Optimization why rasterize?
  23. 23. http://www.foundi.info/lab/badneighbor/
  24. 24. I'm drawing a line consisting of 5000 separate segments and recording total elapsed time and the time taken for each 250 line-segment chunk. * SVG Path Benchmark: * http://bl.ocks.org/1296930 * Canvas Path Benchmark: * http://bl.ocks.org/1297383 Drawing into an HTML5 Canvas can be 40x faster than using SVG
  25. 25. Server Side D3.js npm install d3 jsdom domino d3.select(jsdom.jsdom().body) with jsdom d3.select(
 domino.createWindow(“<div></div>”) .document.querySelector(“div") ) with domino
  26. 26. ClientServer render.js function render(node,data) { d3.select(node).select("circle") .data(data).enter().append("circle"); } module.exports = render; require(“./render”); <script src=“bundle.js”> browserify render = require(“./render.js”);
  27. 27. client server 500ms delay 2.5MB in size
  28. 28. Rasterize SVG require(“canvg”); require(“canvas”); canvg(new canvas(), “<svg> …</svg>”); using node-canvg
  29. 29. client server svg server png 500ms delay 2.5MB in size 112k in size
 10ms loading
  30. 30. D3.js Canvas D3Data DOM DOM to Canvas
 Canvas DOM to Canvas
  31. 31. client d3js + svg server svg server png client d3js + canvas 500ms 300ms 900ms 10ms
  32. 32. SVG CANVAS Animation Comparison using Force Layout http://infographicstw.github.io/d3canvas/d3cmove.html
  33. 33. Marketing and Social Media why rasterize?
  34. 34. var obj = { method: ‘feed’, link: ‘http://your.com/viz/?' + keyword, name: keyword + ‘的顏⾊色是 …. !’ picture: yourImageURL } FB.ui(obj, function() {});
  35. 35. Applications why rasterize?
  36. 36. Image Based Animation
  37. 37. loading.io
  38. 38. <x3d> <scene> <shape><box></box></shape> </scene> </x3d> d3.select(“x3d scene”).selectAll(“shape”) .data(data) .append(“shape”) .append(“box”) … D3.js + X3DOM
  39. 39. Rasterize HTML <svg>
 <foreignObject width="100" height="50" requiredExtensions="http://www.w3.org/1999/xhtml"> <body xmlns="http://www.w3.org/1999/xhtml"> <p>Here is a paragraph that requires word wrap</p> </body> </foreignObject> </svg use SVG foreignObject canvg
  40. 40. Rasterize D3.js D3.js HTML SVG X3D CUSTOM CANVAS SVG 3D CANVAS WEBGL CA NV ASCANVAS DATA
 BINDING INTERFACE IMPLEMENTATION CSS 3DCA NV AS PHANTOMJS or NATIVE PORTING SERVER SIDE
  41. 41. D3.js powerful client-side visualisation library SVG responsive & interactive Graphics DOM Canvas fast, small and social-media friendly
 browser compatibility, off-load from server PNG GIF animation preview in non-browser environment
 better browser compatibility thean CSS3D & SMIL faster interactive rendering make it possible to rasterise HTML leverge layout & flow engine work with css3 animation X3D directly use prebuilt 3D Model Different Purpose
  42. 42. Compatibility why rasterize?
  43. 43. 0.3% Android 2 in all page views
  44. 44. 1% IE 7 + 8 in all page views
  45. 45. 1%(IE) + 0.3%(Android2) 4 people in 300 can’t read SVG format ~ it’s about 235 people in all visitors ( lost 2 customers with 1% conversion rate )
  46. 46. 25% traffic from handheld device
  47. 47. Precision Gesture Buttons Hover Cursor High Low EasyHard 3+ 1 NoYes Yes No
  48. 48. Buy Now Buy Now Buy Now
  49. 49. Buy NowBuy Now Buy Now tips! Mouseover doesn’t work
  50. 50. Portrait mode is the common scenario
  51. 51. Performance and Bandwidth
  52. 52. Visualization with Web Resources
  53. 53. https://www.project-tp.com/
  54. 54. ON BROADWAY: Represent our cities in new ways. http://www.on-broadway.nyc/app/#http://www.fastcodesign.com/3043091/infographic-of-the-day/massive-data-visualization-brings-nycs-busiest-street-to-life#7
  55. 55. http://www.clicktorelease.com/code/streetViewReflectionMapping/
  56. 56. https://www.biodigital.com/developers
  57. 57. http://graphics.wsj.com/3d-nasdaq/
  58. 58. http://shinydemos.com/facekat/
  59. 59. http://bignerdranch.github.io/music-frequency-d3/
  60. 60. http://dinahmoelabs.com/plink
  61. 61. Wrap Up • Consider Different Device / Resolution / Browser • Use Vector / Raster Image on Demand • Leverage the Power of Web Services / API

×