Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Vue.js and SVG

Avatar for Callum Macrae Callum Macrae
April 09, 2020
Technology
120
0

Vue.js and SVG

https://codepen.io/callumacrae/pen/oyXXWR

Avatar for Callum Macrae

Callum Macrae

April 09, 2020

More Decks by Callum Macrae

See All by Callum Macrae
Climate change and the tech community
Avatar for Callum Macrae callumacrae
0
770
Data Visualisation With Vue.js
Avatar for Callum Macrae callumacrae
0
260
Building with Gulp
Avatar for Callum Macrae callumacrae
1
260

Other Decks in Technology

See All in Technology
夫婦で子育てするための育児標準化
Avatar for コドモン開発チーム codmoninc
PRO
0
430
Rustuna: Rustによる高速なOptuna実装
Avatar for Preferred Networks pfn
PRO
0
200
Gemini Intelligence 入門 ― AppFunctions と Gemini Nano
Avatar for takuro abe takuroabe
0
290
Persisting Massive Data with Rails ~Designing for 60 billion rows, and fighting the bottlenecks~ Railsで挑む大量データ永続化 〜600億件を永続化するための設計とボトルネックとの戦い〜
Avatar for Shoichi Ochi occhi
0
730
スプシの手作業からの解脱 ~更新はClaude Codeに、見せ方と使い方はGASアプリに任せる~
Avatar for KentaroFujii kentarofujii
0
160
AI導入は済んだ。次は統制を作り替える番だ_AI×開発組織 Summit 2026
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
320
TinyGoでオブザーバビリティ？OpenTelemetryはTinyGoで使えるのか / Is OpenTelemetry available in TinyGo environment?
Avatar for ymotongpoo ymotongpoo
2
140
Browser Spec: Testing Hotwire with Ruby
Avatar for Masayoshi Takahashi takahashim
1
130
M5Stackで作る BLEマウス GPSログの世界
Avatar for tomokusaba tomokusaba
PRO
0
440
無理せず続ける、子育てエンジニアの学び
Avatar for コドモン開発チーム codmoninc
PRO
0
960
事業成長とデータ活用を止めないためのマネジメントへ挑戦
Avatar for Noriaki Hiraki hiracky16
0
400
DWH の限界突破！ AI エージェント向け爆速リアルタイムデータ基盤 ClickHouse
Avatar for jozono jozono
1
490

Featured

See All Featured
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
360
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
250
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.4k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
560
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.3k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
1.1k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.2k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
570
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.4k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
1.1k

Transcript

  1. Vue.js and SVG @callumacrae

  2. Hi, I’m Callum @callumacrae Things I love: • SVG •

    Animation • Vue.js

  3. Building a bar chart @callumacrae

  4. 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

  5. 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

  6. 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

  7. 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

  8. 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

  9. 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

  10. 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

  11. Building a bar chart @callumacrae

  12. 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

  13. 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

  14. 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

  15. 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

  16. 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

  17. 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

  18. /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

  19. /rect> lue }}</text> #chart text { fill: white; font: 20px

    sans-serif; text-anchor: end; alignment-baseline: middle; } SVG text positioning text-anchor: middle; Text

  20. /rect> lue }}</text> #chart text { fill: white; font: 20px

    sans-serif; text-anchor: end; alignment-baseline: middle; } SVG text positioning text-anchor: end; Text

  21. #chart text { fill: white; font: 20px sans-serif; text-anchor: end;

    alignment-baseline: middle; } SVG text positioning alignment-baseline: baseline; Text /rect> lue }}</text>

  22. /rect> lue }}</text> #chart text { fill: white; font: 20px

    sans-serif; text-anchor: end; alignment-baseline: middle; } SVG text positioning alignment-baseline: hanging; Text

  23. /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

  24. #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

  25. Animating a bar chart @callumacrae

  26. No @callumacrae

  27. Not really @callumacrae

  28. 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

  29. @callumacrae

  30. 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

  31. 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

  32. 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

  33. 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

  34. 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

  35. 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

  36. 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

  37. 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

  38. 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

  39. 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

  40. 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

  41. 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

  42. 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

  43. So what else can we do? @callumacrae

  44. https://www.reddit.com/r/dataisbeautiful/comments/fxe484/oc_rating_of_the_office_episodes_according_to/

  45. https://www.reddit.com/r/dataisbeautiful/comments/fwy7dj/oc_the_remarkable_decline_in_child_mortality/

  46. https://www.reddit.com/r/dataisbeautiful/comments/fqqzki/worst_episode_ever_the_most_commonly_rated_shows/

  47. <path d="M 10,10 L 50,100 L 200,50 L 240,30 L

    300,60"></path> SVG paths - Vue?

  48. SVG paths - Vue? https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d12

  49. SVG paths - Vue? https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d12

  50. SVG paths - d3!

  51. 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>

  52. 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>

  53. Thank you @callumacrae