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
61
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
640
Data Visualisation With Vue.js
callumacrae
0
230
Building with Gulp
callumacrae
1
230
Other Decks in Technology
See All in Technology
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1k
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
データの品質が低いと何が困るのか
kzykmyzw
6
1k
アジャイル開発とスクラム
araihara
0
160
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
720
事業継続を支える自動テストの考え方
tsuemura
0
300
AndroidデバイスにFTPサーバを建立する
e10dokup
0
240
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.5k
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
130
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Speed Design
sergeychernyshev
25
780
Into the Great Unknown - MozCon
thekraken
35
1.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
GitHub's CSS Performance
jonrohan
1030
460k
Optimizing for Happiness
mojombo
376
70k
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