Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Visualization over Web

tkirby
August 23, 2015

Visualization over Web

share about thing to take care when we do visualization over web

tkirby

August 23, 2015
Tweet

More Decks by tkirby

Other Decks in Technology

Transcript

  1. 1. Use Percentage div { width: 800px; font-size: 15px; }

    div { width: 80%; font-size: 1.2em; }
  2. Israel Says It Did Not Kill Palestinians at U.N. School

    …more Israel Says It Did Not Kill Palestinians at U.N. School …more Israel Says It Did Not Kill Palestinians at U.N. School …more Israel Says It Did Not Kill Palestinians at U.N. School …more
  3. Buy
 Now Pricing About Lorem Ipsum is simply dummy text

    of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
  4. Buy Now Pricing About Lorem Ipsum is simply dummy text

    of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer Buy Price About
  5. Israel Says It Did Not Kill Palestinians at U.N. School

    …more Israel Says It Did Not Kill Palestinians at U.N. School …more Israel Says It Did Not Kill Palestinians at U.N. School …more Israel Says It Did Not Kill Palestinians at U.N. School …more …more …more
  6. 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
  7. 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
  8. var obj = { method: ‘feed’, link: ‘http://your.com/viz/?' + keyword,

    name: keyword + ‘的顏⾊色是 …. !’ picture: yourImageURL } FB.ui(obj, function() {});
  9. 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 )
  10. Rasterize D3.js D3.js HTML SVG X3D CUSTOM CANVAS SVG 3D

    CANVAS WEBGL CA NV AS CANVAS DATA
 BINDING INTERFACE IMPLEMENTATION CSS 3D CA NV AS PHANTOMJS or NATIVE PORTING SERVER SIDE
  11. 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
  12. Recap Why Web? Cross Platform / Device Interactive Social Friendly

    Rich APIs Active Community How Web? Responsive Vectorize Rasterize Handheld Friendly
  13. Wrap Up • Cross Device / Resolution / Browser •

    Use Vector / Raster Image on Demand • Leverage the Power of Web Services / API