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
210
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
150
SVG Basic
namikuguri
0
200
石
namikuguri
0
78
僕はあの日夕暮れ時に書いたスタイルガイドを忘れない
namikuguri
0
840
誰と作るデザイン?
namikuguri
0
590
CSS の構造化、その目的
namikuguri
0
100
fitme
namikuguri
0
72
About color
namikuguri
0
96
Other Decks in Technology
See All in Technology
RSNA2024振り返り
nanachi
0
500
Classmethod AI Talks(CATs) #15 司会進行スライド(2025.02.06) / classmethod-ai-talks-aka-cats_moderator-slides_vol15_2025-02-06
shinyaa31
0
170
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.2k
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
20250208_OpenAIDeepResearchがやばいという話
doradora09
PRO
0
170
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
3
530
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
730
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
410
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Side Projects
sachag
452
42k
RailsConf 2023
tenderlove
29
1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Fireside Chat
paigeccino
34
3.2k
Music & Morning Musume
bryan
46
6.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Bash Introduction
62gerente
610
210k
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 ͕ྑͦ͞͏ ·ͱΊ