SVG Graph Animation

グラフアニメーションが作れるライブラリの紹介

Transcript

1. SVGΛ࢖ͬͨ
 ԁάϥϑͷͭ͘Γํ ʢಈ͔ͳ͍ʣ Contents D3.js CHARTIST.JS SVG stroke @thleap
2. ͳ͍ͥ·SVGʁ ANIMATED LETTERS ͷσϞΛݟͯҙ͕ࣝߴ·ͬͨ ࢖͍ํΛ஌ͬͯɺ࢖ΘΕํ͕ؾʹͳΔʢΞΠίϯ΍άϥϑ͕΄ͱΜͲʁʣ ͱΓ͋͑ͣάϥϑ࡞ͬͯΈΑ͏
3. stroke-dasharrayΛ࢖ͬͯԁάϥϑΛඳ͘ CHARTIST.JSΛ࢖ͬͯԁάϥϑΛඳ͘ D3.jsΛ࢖ͬͯԁάϥϑΛඳ͘
4. stroke-dasharrayΛ࢖ͬͯԁάϥϑΛඳ͘ <svg viewBox="0 0 63.6619772368 63.6619772368"> <circle class="pie1" cx="31.8309886184" cy="31.8309886184" r="15.9154943092"/> … </svg> circle { fill: transparent; stroke-width: 31.8309886184; stroke-dasharray: 0,0,0,100; stroke-dashoffset: 25; } .pie1 { stroke: #082C3D; stroke-dasharray: 33,0,0,0; } … DEMO
5. stroke-dasharrayΛ࢖ͬͨԁάϥϑ ࢓૊ΈΛ͓֮͑ͯ͘ͷ͕໘౗ʢجຊతʹԁप / π / 2 Λ͓͚֮͑ͯ͹ྑ͍ͱ͸͍͑…ʣ HTMLͱCSS͚ͩͰࡁΉͷͰ؆୯ ෼ׂ͞ΕͨύΠʹ࿮ઢ΍ӨΛ͚͍ͭͨͱ͖͕໘౗ ϥϕϧΛ͚ͭͨΓɺΞχϝʔγϣϯͤ͞Α͏ͱ͢Δͱେม
6. stroke-dasharrayΛ࢖ͬͯԁάϥϑΛඳ͘ CHARTIST.JSΛ࢖ͬͯԁάϥϑΛඳ͘ D3.jsΛ࢖ͬͯԁάϥϑΛඳ͘
9. CHARTIST.JSΛ࢖ͬͯԁάϥϑΛඳ͘ DEMO <div id="demo"></div> .ct-series-a .ct-area, .ct-series-a .ct-slice-pie { fill: #082C3D; } var data = { labels: ['SVG', 'CHARTIST.JS', 'D3.js'], series: [1, 1, 1] }; var options = { showLabel: true }; new Chartist.Pie('#demo', data, options);
10. CHARTIST.JSͷ Ұ௨Γͷάϥϑ͕ἧͬͯΔ ϒϨʔΫϙΠϯτ͕ࢦఆՄೳ SMILΞχϝʔγϣϯ͕Ұ෦Ͱ࢖ΘΕ͍ͯΔ ॻ͘ͷָ͕͍͢͝
11. stroke-dasharrayΛ࢖ͬͯԁάϥϑΛඳ͘ CHARTIST.JSΛ࢖ͬͯԁάϥϑΛඳ͘ D3.jsΛ࢖ͬͯԁάϥϑΛඳ͘
13. D3.jsΛ࢖ͬͯԁάϥϑΛඳ͘ DEMO <div id="demo"></div> // SVGの表示領域を生成 var svg = d3.select('#demo').append('svg') .attr('width', svgWidth).attr('height', svgHeight) // SVGの表示領域を生成 var pie = d3.layout.pie() .value(function(d){ return d; }) // 円グラフのサイズを指定 var pie = d3.svg.arc().innerRadius(0).outerRadius(svgWidth / 2); // 円グラフを描画 svg.selectAll('path') .data(pie(list)) .enter() …
14. D3.jsͷ ར༻ऀ͕ଟ͘ɺυΩϡϝϯτ΋๛෋ ଟ࠼ͳදݱ͕Մೳ
15. ֶͿͱਂΈʹ͸·Γͦ͏ͳ D3.js ͕ྑͦ͞͏ ·ͱΊ