Save 37% off PRO during our Black Friday Sale! »

Vue.js and SVG

Vue.js and SVG

Be13d7aa8512cf2b2068047f0006f8a5?s=128

Callum Macrae

April 09, 2020
Tweet

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