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
Datadog APM におけるトレース収集の流れ及び Retention Filters のはなし / datadog-apm-trace-retention-filters
k6s4i53rx
0
320
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
現場で役立つAPIデザイン
nagix
29
10k
FastConnect の冗長性
ocise
1
9.6k
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
6.5k
RSNA2024振り返り
nanachi
0
500
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
360
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
170
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.5k
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
Featured
See All Featured
Optimizing for Happiness
mojombo
376
70k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
The Language of Interfaces
destraynor
156
24k
The World Runs on Bad Software
bkeepers
PRO
67
11k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Scaling GitHub
holman
459
140k
Adopting Sorbet at Scale
ufuk
74
9.2k
Typedesign – Prime Four
hannesfritz
40
2.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
The Art of Programming - Codeland 2020
erikaheidi
53
13k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
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