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
Vue.js + D3.jsでグラフを描く
Search
Tatsuya Miyado
May 23, 2018
Technology
1
2.2k
Vue.js + D3.jsでグラフを描く
Vue.js Tokyo v-meetup #7 LTスライド
Tatsuya Miyado
May 23, 2018
Tweet
Share
Other Decks in Technology
See All in Technology
OpenHands🤲にContributeしてみた
kotauchisunsun
1
500
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
260
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
180
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
390
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
1
110
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
130
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
150
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
0
880
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
3.4k
GitHub Copilot の概要
tomokusaba
1
150
Lambda Web Adapterについて自分なりに理解してみた
smt7174
5
140
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
370
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Pragmatic Product Professional
lauravandoore
35
6.7k
Fireside Chat
paigeccino
37
3.5k
Become a Pro
speakerdeck
PRO
28
5.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Practical Orchestrator
shlominoach
188
11k
Scaling GitHub
holman
459
140k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
We Have a Design System, Now What?
morganepeng
53
7.7k
Transcript
7VFKT %KTͰ άϥϑΛඳ͘ 7VFKT5PLZPWNFFUVQ !IPHFTVLF@
!IPHFTVLF@
7VFKTͰάϥϑΛ ඳ͖͍ͨ
%KTΛ͍͍ͨ
7VFKT %KTͬͯ Ͱ͖Δͷʁ
ͬͯΈ·ͨ͠
%&.0 IUUQHSBQIIPHFTVLFOFU
·ͣ7VFΛΘͣʹॻ͍ͯΈΔ const dataset = [ 10, 20, 5, 3, 8,
40, 20, 35]; const w = 200, h = 100, margin = 5; const svg = d3.select(‘.graph').append('svg') .attr('width', w + margin).attr('height', h + margin); const xScale = d3.scaleLinear().domain([0, dataset.length]).range([margin, w - margin]); const yScale = d3.scaleLinear().domain([d3.min(dataset), d3.max(dataset)]).range([h - margin, margin]); const xAxis = d3.axisBottom(xScale); svg.append('g') .attr('transform', `translate(0, ${h})`) .call(xAxis); const yAxis = d3.axisLeft(yScale); svg.append('g') .attr('transform', `translate(${margin}, 0)`) .call(yAxis); const d3line = d3.line() .x((d, i) => xScale(i)) .y(d => yScale(d)) .curve(d3.curveLinear); svg.append('path') .attr(‘d', d3line(dataset)) .style('stroke-width', 2) .style('stroke', 'steelblue') .style('fill', 'none');
͜ΕΛ7VF ίϯϙʔωϯτʹམͱ͠ࠐΉ
const dataset = [ 10, 20, 5, 3, 8, 40,
20, 35]; const w = 200, h = 100, margin = 5; const svg = d3.select(‘.graph').append('svg') .attr('width', w + margin).attr('height', h + margin); const xScale = d3.scaleLinear().domain([0, dataset.length]).range([margin, w - margin]); const yScale = d3.scaleLinear().domain([d3.min(dataset), d3.max(dataset)]).range([h - margin, margin]); const xAxis = d3.axisBottom(xScale); svg.append('g') .attr('transform', `translate(0, ${h})`) .call(xAxis); const yAxis = d3.axisLeft(yScale); svg.append('g') .attr('transform', `translate(${margin}, 0)`) .call(yAxis); const d3line = d3.line() .x((d, i) => xScale(i)) .y(d => yScale(d)) .curve(d3.curveLinear); svg.append('path') .attr(‘d', d3line(dataset)) .style('stroke-width', 2) .style('stroke', 'steelblue') .style('fill', 'none'); 9:࣠ͷඳը QBUIͷඳը 47(ཁૉͷੜ ೖྗσʔλΛඳըྖҬʹ Ϛοϐϯά͢Δؔͷੜ ݩͷίʔυ
:࣠ 9࣠ ύε ίϯϙʔωϯτׂ άϥϑશମ
<template> <path :d="d" /> </template> 5FNQMBUF 1BUI computed: { line
() { return d3.line() .x(d => this.xScale(d.x)) .y(d => this.yScale(d.y)) .curve(d3.curveLinear); }, d () { return this.line(this.data); }, }, 4DSJQU 47(ͷཁૉΛ ςϯϓϨʔτʹॻ͘ ύεͷ࠲ඪͱͳΔ EଐੑͷΛੜ
<template> <path :d="d" /> </template> 5FNQMBUF 1BUI computed: { line
() { return d3.line() .x(d => this.xScale(d.x)) .y(d => this.yScale(d.y)) .curve(d3.curveLinear); }, d () { return this.line(this.data); }, }, 4DSJQU ͱΛͲͷΑ͏ͳۂઢͰ ิؒ͢Δ͔ͷࢦఆ
computed: { xAxis () { return d3.axisBottom(this.xScale) .tickSizeInner(10) // ઢͷ͞ʢଆʣ
.tickSizeOuter(15) // ઢͷ͞ʢ֎ଆʣ .tickPadding(10) // ઢͱςΩετͷؒͷڑ .ticks(4); // ઢͷ }, }, mounted () { d3.select(this.$el).call(this.xAxis); }, 9:࣠ <template> <g :transform="`translate(${position.x}, ${position.y})`" /> </template> 5FNQMBUF 4DSJQU ࣠ΓΛ Hཁૉʹ ඳը͢Δ
computed: { xAxis () { return d3.axisBottom(this.xScale) .tickSizeInner(10) // ઢͷ͞ʢଆʣ
.tickSizeOuter(15) // ઢͷ͞ʢ֎ଆʣ .tickPadding(10) // ઢͱςΩετͷؒͷڑ .ticks(4); // ઢͷ }, }, mounted () { d3.select(this.$el).call(this.xAxis); }, ͜͜ 9:࣠ <template> <g :transform="`translate(${position.x}, ${position.y})`" /> </template> 5FNQMBUF 4DSJQU ࣠ͷΓʹ ؔ͢ΔઃఆΛߦ͏
Ξχϝʔγϣϯ w $44USBOTJUJPOͰQBUIΛΞχϝʔγϣϯͰ͖Δʁ w $ISPNFҎ֎Ͱ Ͱ͖ͳ͍ w ผͷखஈ͕ඞཁ
Ξχϝʔγϣϯ w 5XFFO-JUFKTΛ͏ w ͋ΔΛࢦఆͷඵͰɺࢦఆͷ·ͰঃʑʹมԽͤ͞Δ ػೳΛ࣋ͭ const hoge = {
a: 0 }; TweenLite.to(hoge, 3, { a: 100 }); AIPHFBAͷΛඵ͔͚ͯ·ͰมԽͤ͞Δ
Ξχϝʔγϣϯ w 5XFFO-JUFKTΛQBUIͷEଐੑʹ༻͍Δ͜ͱͰΞχϝʔγϣ ϯՄೳ <path d=“M55,120.20408163265304L66.22448979591837,245.71428571428572L77.44897959183673"></path> <path d="M55,239.59183673469386L66.22448979591837,22.244897959183675L77.44897959183673"></path> ࢀߟঢ়ଶͷτϥϯδγϣϯ7VFKTIUUQTKQWVFKTPSHWHVJEFUSBOTJUJPOJOHTUBUFIUNM
άϥϑͷඳը͕Ͱ͖ͨ
%&.0ͷίʔυ IUUQTHJUIVCDPNIPHFTVLFWVFEEFNP հͰ͖·ͤΜͰ͕ͨ͠ɺ πʔϧνοϓͷ࣮͍ͬͯ·͢
Ҏ্Ͱ͢ ͋Γ͕ͱ͏͍͟͝·ͨ͠