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 and SVG
Search
Callum Macrae
April 09, 2020
Technology
0
59
Vue.js and SVG
https://codepen.io/callumacrae/pen/oyXXWR
Callum Macrae
April 09, 2020
Tweet
Share
More Decks by Callum Macrae
See All by Callum Macrae
Climate change and the tech community
callumacrae
0
610
Data Visualisation With Vue.js
callumacrae
0
230
Building with Gulp
callumacrae
1
230
Other Decks in Technology
See All in Technology
LINE-ChatGPT 倫理問題を整理する全力肯定彼氏くん [LuC4]に訪れたサービス開始以来の最大の危機
o_ob
2
260
Databricks Appのご紹介
databricksjapan
0
500
これはPerl? それともRuby? クイズ〜〜〜〜〜!!!- Perl or Ruby Quiz
moznion
3
2.1k
【完全版】Dify - LINE Bot連携 考え方と実用テクニック
uezo
2
780
Azure Verified Moduleを触って分かった注目ポイント/azure-verified-module-begin
mhrtech
1
540
What a Good Platform Looks Like and How to Get There @ Large Financial Organization, Oct 2024
mfpais
PRO
0
120
CData Virtuality 日本ローンチイベントのKeynote
cdataj
0
410
Automated Tests Now and Future @ SQiP Workshop Special Lecture 2024
teyamagu
PRO
1
110
Kubernetes Meetup Tokyo #67 - KEP-3619: Fine-grained SupplementalGroups Control / k8sjp67-kep-3619
everpeace
0
300
組織デバイスのための効率的なアプリケーション更新戦略
kenchan0130
0
420
なぜ Rack を理解すべきかプレトーク / Why should you understand Rack - Pre-talk
hogelog
0
190
Unlearn Modularity
lemiorhan
6
220
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
296
20k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.6k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
110
6.9k
Designing Experiences People Love
moore
138
23k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Git: the NoSQL Database
bkeepers
PRO
425
64k
GraphQLとの向き合い方2022年版
quramy
43
13k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.3k
Happy Clients
brianwarren
97
6.7k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Adopting Sorbet at Scale
ufuk
73
9k
Transcript
Vue.js and SVG @callumacrae
Hi, I’m Callum @callumacrae Things I love: • SVG •
Animation • Vue.js
Building a bar chart @callumacrae
Building a bar chart const randomData = () => new
Array(6).fill('') .map(() => 1 + Math.floor(Math.random() * 20)); new Vue({ el: '#chart', data: { chartData: randomData(), } }); @callumacrae
Building a bar chart new Vue({ el: '#chart', data: {
chartData: randomData(), } }); <div id="chart"> <div v-for="value in chartData" class="bar" :style="{ height: '60px', width: `${value * 30}px` }" ></div> </div> @callumacrae
Building a bar chart new Vue({ el: '#chart', data: {
chartData: randomData(), } }); <div id="chart"> <div v-for="value in chartData" class="bar" :style="{ height: '60px', width: `${value * 30}px` }" ></div> </div> @callumacrae
Building a bar chart new Vue({ el: '#chart', data: {
chartData: randomData(), } }); <svg id="chart" width="600" height="410"> <rect v-for="(value, i) in chartData" x="0" :y="i * 70" height="60" :width="value * 30" ></rect> </svg> @callumacrae
Building a bar chart new Vue({ el: '#chart', data: {
chartData: randomData(), } }); <svg id="chart" width="600" height="410"> <rect v-for="(value, i) in chartData" x="0" :y="i * 70" height="60" :width="value * 30" ></rect> </svg> @callumacrae
Building a bar chart new Vue({ el: '#chart', data: {
chartData: randomData(), } }); <svg id="chart" width="600" height="410"> <rect v-for="(value, i) in chartData" x="0" :y="i * 70" height="60" :width="value * 30" ></rect> </svg> #chart rect { fill: hsl(10, 80%, 70%); } @callumacrae
Building a bar chart new Vue({ el: '#chart', data: {
chartData: randomData(), } }); <svg id="chart" width="600" height="410"> <rect v-for="(value, i) in chartData" x="0" :y="i * 70" height="60" :width="value * 30" fill="hsl(10, 80%, 70%)" ></rect> </svg> #chart rect { fill: hsl(10, 80%, 70%); } @callumacrae
Building a bar chart @callumacrae
Building a bar chart <svg id="chart" width="600" height="410"> <rect v-for="(value,
i) in chartData" x="0" :y="i * 70" height="60" :width="value * 30" ></rect> </svg> @callumacrae
Building a bar chart <svg id="chart" width="600" height="410"> <rect v-for="(value,
i) in chartData" x="0" :y="i * 70" height="60" :width="value * 30" ></rect> </svg> <svg id="chart" width="600" height="410"> <g v-for="(value, i) in chartData" :transform="`translate(0, ${i * 70})`"> <rect height="60" :width="value * 30"></rect> </g> </svg> @callumacrae
Building a bar chart <svg id="chart" width="600" height="410"> <g v-for="(value,
i) in chartData" :transform="`translate(0, ${i * 70})`"> <rect height="60" :width="value * 30"></rect> </g> </svg> @callumacrae
Building a bar chart <svg id="chart" width="600" height="410"> <g v-for="(value,
i) in chartData" :transform="`translate(0, ${i * 70})`"> <rect height="60" :width="value * 30"></rect> <text y="30" :x="value * 30 - 10">{{ value }}</text> </g> </svg> @callumacrae
Building a bar chart <svg id="chart" width="600" height="410"> <g v-for="(value,
i) in chartData" :transform="`translate(0, ${i * 70})`"> <rect height="60" :width="value * 30"></rect> <text y="30" :x="value * 30 - 10">{{ value }}</text> </g> </svg> @callumacrae
Building a bar chart <svg id="chart" width="600" height="410"> <g v-for="(value,
i) in chartData" :transform="`translate(0, ${i * 70})`"> <rect height="60" :width="value * 30"></rect> <text y="30" :x="value * 30 - 10">{{ value }}</text> </g> </svg> #chart text { fill: white; font: 20px sans-serif; text-anchor: end; alignment-baseline: middle; } @callumacrae
/rect> lue }}</text> #chart text { fill: white; font: 20px
sans-serif; text-anchor: end; alignment-baseline: middle; } SVG text positioning text-anchor: start; Text @callumacrae
/rect> lue }}</text> #chart text { fill: white; font: 20px
sans-serif; text-anchor: end; alignment-baseline: middle; } SVG text positioning text-anchor: middle; Text
/rect> lue }}</text> #chart text { fill: white; font: 20px
sans-serif; text-anchor: end; alignment-baseline: middle; } SVG text positioning text-anchor: end; Text
#chart text { fill: white; font: 20px sans-serif; text-anchor: end;
alignment-baseline: middle; } SVG text positioning alignment-baseline: baseline; Text /rect> lue }}</text>
/rect> lue }}</text> #chart text { fill: white; font: 20px
sans-serif; text-anchor: end; alignment-baseline: middle; } SVG text positioning alignment-baseline: hanging; Text
/rect> lue }}</text> #chart text { fill: white; font: 20px
sans-serif; text-anchor: end; alignment-baseline: middle; } SVG text positioning alignment-baseline: middle; Text @callumacrae
#chart text { fill: white; font: 20px sans-serif; text-anchor: end;
alignment-baseline: middle; } Building a bar chart <svg id="chart" width="600" height="410"> <g v-for="(value, i) in chartData" :transform="`translate(0, ${i * 70})`"> <rect height="60" :width="value * 30"></rect> <text y="30" :x="value * 30 - 10">{{ value }}</text> </g> </svg> @callumacrae
Animating a bar chart @callumacrae
No @callumacrae
Not really @callumacrae
Not really • We can use enter transitions to add
new items • We can use list move transitions if the order were changing • Vue doesn't really help us transition state @callumacrae
@callumacrae
Animating a bar chart <svg id="chart" width="600" height="410"> <g v-for="(value,
i) in chartData" :transform="`translate(0, ${i * 70})`"> <rect height="60" :width="value * 30"></rect> <text y="30" :x="value * 30 - 10">{{ value }}</text> </g> </svg> @callumacrae
Animating a bar chart <svg id="chart" width="600" height="410"> <animated-bar v-for="(value,
i) in chartData" :transform="`translate(0, ${i * 70})`" :value="value"></animated-bar> </svg> Vue.component("animated-bar", { props: ["value"], template: ` <g> <rect height="60" :width="value * 30"></rect> <text y="30" :x="value * 30 - 10">{{ value }}</text> </g> `, }); @callumacrae
art ="410"> " * 70})`" lue * 30"></rect> - 10">{{
value }}</text> Tweening with GSAP new Vue({ el: "#app", data: { number: 0 }, mounted() { gsap.to(this.$data, { duration: 4, number: 1000 }); }, }); @callumacrae
art ="410"> " * 70})`" lue * 30"></rect> - 10">{{
value }}</text> Tweening with GSAP new Vue({ el: "#app", data: { number: 0 }, mounted() { gsap.to(this.$data, { duration: 4, number: 1000 }); }, }); @callumacrae
Animating a bar chart <svg id="chart" width="600" height="410"> <animated-bar v-for="(value,
i) in chartData" :transform="`translate(0, ${i * 70})`" :value="value"></animated-bar> </svg> Vue.component("animated-bar", { props: ["value"], template: ` <g> <rect height="60" :width="value * 30"></rect> <text y="30" :x="value * 30 - 10">{{ value }}</text> </g> `, }); @callumacrae
Animating a bar chart Vue.component("animated-bar", { props: ["value"], template: `
<g> <rect height="60" :width="value * 30"></rect> <text y="30" :x="value * 30 - 10">{{ value }}</text> </g> `, }); @callumacrae
Animating a bar chart Vue.component("animated-bar", { props: ["value"], template: `
<g> <rect height="60" :width="value * 30"></rect> <text y="30" :x="value * 30 - 10">{{ value }}</text> </g> `, computed: { width() { return this.value * 30; }, }, }); @callumacrae
Animating a bar chart Vue.component("animated-bar", { props: ["value"], template: `
<g> <rect height="60" :width="width"></rect> <text y="30" :x="width - 10">{{ value }}</text> </g> `, computed: { width() { return this.value * 30; }, }, }); @callumacrae
Animating a bar chart Vue.component("animated-bar", { props: ["value"], template: `
<g> <rect height="60" :width="width"></rect> <text y="30" :x="width - 10">{{ value }}</text> </g> `, data: () => ({ tweenedValue: 0 }), computed: { width() { return this.value * 30; }, }, }); @callumacrae
Animating a bar chart Vue.component("animated-bar", { props: ["value"], template: `
<g> <rect height="60" :width="width"></rect> <text y="30" :x="width - 10">{{ value }}</text> </g> `, data: () => ({ tweenedValue: 0 }), computed: { width() { return this.value * 30; }, }, watch: { value() { gsap.to(this.$data, { duration: 0.6, tweenedValue: this.value }); }, }, }); @callumacrae
Animating a bar chart Vue.component("animated-bar", { props: ["value"], template: `
<g> <rect height="60" :width="width"></rect> <text y="30" :x="width - 10">{{ value }}</text> </g> `, data: () => ({ tweenedValue: 0 }), computed: { width() { return this.tweenedValue * 30; }, }, watch: { value() { gsap.to(this.$data, { duration: 0.6, tweenedValue: this.value }); }, }, }); @callumacrae
Vue.component("animated-bar", { props: ["value"], template: ` <g> <rect height="60" :width="width"></rect>
<text y="30" :x="width - 10">{{ value }}</text> </g> `, data: () => ({ tweenedValue: 0 }), computed: { width() { return this.tweenedValue * 30; }, }, watch: { value() { gsap.to(this.$data, { duration: 0.6, tweenedValue: this.value }); }, }, }); Animating a bar chart @callumacrae
Vue.component("animated-bar", { props: ["value"], template: ` <g> <rect height="60" :width="width"></rect>
<text y="30" :x="width - 10">{{ Math.round(tweenedValue) }}</text> </g> `, data: () => ({ tweenedValue: 0 }), computed: { width() { return this.tweenedValue * 30; }, }, watch: { value() { gsap.to(this.$data, { duration: 0.6, tweenedValue: this.value }); }, }, }); Animating a bar chart @callumacrae
So what else can we do? @callumacrae
https://www.reddit.com/r/dataisbeautiful/comments/fxe484/oc_rating_of_the_office_episodes_according_to/
https://www.reddit.com/r/dataisbeautiful/comments/fwy7dj/oc_the_remarkable_decline_in_child_mortality/
https://www.reddit.com/r/dataisbeautiful/comments/fqqzki/worst_episode_ever_the_most_commonly_rated_shows/
<path d="M 10,10 L 50,100 L 200,50 L 240,30 L
300,60"></path> SVG paths - Vue?
SVG paths - Vue? https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d12
SVG paths - Vue? https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d12
SVG paths - d3!
SVG paths - d3! Vue.component("chart-line", { props: ["data"], template: `<path
:d="pathString"></path>`, computed: { pathString() { return d3.line()(this.data); }, }, }); <chart-line :data="[[0, 50], [100, 80], [200, 40], [300, 60], [400, 30]]" ></chart-line>
SVG paths - d3! Vue.component("chart-line", { props: ["data"], template: `<path
:d="pathString"></path>`, computed: { pathString() { return d3.line()(this.data); }, }, }); <chart-line :data="[[0, 50], [100, 80], [200, 40], [300, 60], [400, 30]]" ></chart-line>
Thank you @callumacrae