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
69
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
680
Data Visualisation With Vue.js
callumacrae
0
240
Building with Gulp
callumacrae
1
230
Other Decks in Technology
See All in Technology
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
fujie
0
270
スタックチャン家庭用アシスタントへの道
kanekoh
0
120
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
200
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.7k
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
120
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
マルチプロダクト環境におけるSREの役割 / SRE NEXT 2025 lunch session
sugamasao
1
730
Data Engineering Study#30 LT資料
tetsuroito
1
180
Digitization部 紹介資料
sansan33
PRO
1
4.5k
CDK Toolkit Libraryにおけるテストの考え方
smt7174
1
550
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
390
推し書籍📚 / Books and a QA Engineer
ak1210
0
140
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Side Projects
sachag
455
42k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
For a Future-Friendly Web
brad_frost
179
9.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Producing Creativity
orderedlist
PRO
346
40k
Designing for Performance
lara
610
69k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Automating Front-end Workflow
addyosmani
1370
200k
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