Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SVG Graph Animation
Search
namikuguri
July 11, 2016
Technology
0
240
SVG Graph Animation
グラフアニメーションが作れるライブラリの紹介
namikuguri
July 11, 2016
Tweet
Share
More Decks by namikuguri
See All by namikuguri
実例から学ぶ CSSアニメーション
namikuguri
1
1.4k
かるくCalc()
namikuguri
0
170
SVG Basic
namikuguri
0
230
石
namikuguri
0
79
僕はあの日夕暮れ時に書いたスタイルガイドを忘れない
namikuguri
0
850
誰と作るデザイン?
namikuguri
0
610
CSS の構造化、その目的
namikuguri
0
100
fitme
namikuguri
0
72
About color
namikuguri
0
97
Other Decks in Technology
See All in Technology
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
nanachi
1
690
AWS DDoS攻撃防御の最前線
ryutakondo
1
150
Agent Development Kitで始める生成 AI エージェント実践開発
danishi
0
140
全員が手を動かす組織へ - 生成AIが変えるTVerの開発現場 / everyone-codes-genai-transforms-tver-development
tohae
0
110
AI時代の経営、Bet AI Vision #BetAIDay
layerx
PRO
1
2k
AI関数が早くなったので試してみよう
kumakura
0
280
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
3
1k
Foundation Model × VisionKit で実現するローカル OCR
sansantech
PRO
1
350
Claude Codeが働くAI中心の業務システム構築の挑戦―AIエージェント中心の働き方を目指して
os1ma
9
2.5k
リモートワークで心掛けていること 〜AI活用編〜
naoki85
0
140
ユーザー課題を愛し抜く――AI時代のPdM価値
kakehashi
PRO
1
110
九州の人に知ってもらいたいGISスポット / gis spot in kyushu 2025
sakaik
0
140
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Building an army of robots
kneath
306
45k
Code Reviewing Like a Champion
maltzj
524
40k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
332
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
Done Done
chrislema
185
16k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Visualization
eitanlees
146
16k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Transcript
SVGΛͬͨ ԁάϥϑͷͭ͘Γํ ʢಈ͔ͳ͍ʣ Contents D3.js CHARTIST.JS SVG stroke @thleap
ͳ͍ͥ·SVGʁ ANIMATED LETTERS ͷσϞΛݟͯҙ͕ࣝߴ·ͬͨ ͍ํΛͬͯɺΘΕํ͕ؾʹͳΔʢΞΠίϯάϥϑ͕΄ͱΜͲʁʣ ͱΓ͋͑ͣάϥϑ࡞ͬͯΈΑ͏
stroke-dasharrayΛͬͯԁάϥϑΛඳ͘ CHARTIST.JSΛͬͯԁάϥϑΛඳ͘ D3.jsΛͬͯԁάϥϑΛඳ͘
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
stroke-dasharrayΛͬͨԁάϥϑ ΈΛ͓֮͑ͯ͘ͷ͕໘ʢجຊతʹԁप / π / 2 Λ͓͚֮͑ͯྑ͍ͱ͍͑…ʣ HTMLͱCSS͚ͩͰࡁΉͷͰ؆୯ ׂ͞ΕͨύΠʹઢӨΛ͚͍ͭͨͱ͖͕໘ ϥϕϧΛ͚ͭͨΓɺΞχϝʔγϣϯͤ͞Α͏ͱ͢Δͱେม
stroke-dasharrayΛͬͯԁάϥϑΛඳ͘ CHARTIST.JSΛͬͯԁάϥϑΛඳ͘ D3.jsΛͬͯԁάϥϑΛඳ͘
None
None
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);
CHARTIST.JSͷ Ұ௨Γͷάϥϑ͕ἧͬͯΔ ϒϨʔΫϙΠϯτ͕ࢦఆՄೳ SMILΞχϝʔγϣϯ͕Ұ෦ͰΘΕ͍ͯΔ ॻ͘ͷָ͕͍͢͝
stroke-dasharrayΛͬͯԁάϥϑΛඳ͘ CHARTIST.JSΛͬͯԁάϥϑΛඳ͘ D3.jsΛͬͯԁάϥϑΛඳ͘
None
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() …
D3.jsͷ ར༻ऀ͕ଟ͘ɺυΩϡϝϯτ๛ ଟ࠼ͳදݱ͕Մೳ
ֶͿͱਂΈʹ·Γͦ͏ͳ D3.js ͕ྑͦ͞͏ ·ͱΊ