Vue and D3: A Chart Waiting To Happen

For a while now, D3.js has been the go-to JavaScript library for creating custom data visualizations. However, it's sometimes perceived as difficult to get started with or unsuitable for small projects. In this talk I will show you how combining D3 and Vue can make your quest for the perfect data visualization a whole lot easier.

Transcript

1. A Chart Waiting
 To Happen +
3. 001 INTRODUCTION HI, I’M SIMON
4. 001 INTRODUCTION I WORK WITH COMPANIES
5. 001 INTRODUCTION I WORK WITH COMPANIES
6. 001 INTRODUCTION THE PROBLEM
7. 001 INTRODUCTION THE PROBLEM
8. 001 INTRODUCTION THE PROBLEM
9. 001 INTRODUCTION DATA DRIVEN DOCUMENTS
10. 001 INTRODUCTION DATA DRIVEN DOCUMENTS “A JavaScript library 
 for manipulating documents 
 based on data”
11. 001 INTRODUCTION DATA DRIVEN DOCUMENTS
12. 001 INTRODUCTION DATA DRIVEN DOCUMENTS
13. 001 INTRODUCTION DATA DRIVEN DOCUMENTS
14. 001 INTRODUCTION DATA DRIVEN DOCUMENTS
15. 001 INTRODUCTION DATA DRIVEN DOCUMENTS
16. Let’s write some code
17. 002 LET’S WRITE SOME CODE D3’S SYNTAX // Add a <g> element for every data point
 const leaf = svg.selectAll('g').data(circles) // Append a styled <circle> to every <g> element
 leaf
 .append('circle')
 .attr('id', d => d.data.id)
 .attr('r', d => d.r)
 .attr('fill-opacity', 0.7)
 .attr('fill', d => d.data.color)
18. 002 LET’S WRITE SOME CODE D3’S SYNTAX This doesn’t feel right 
 in a Vue.js project
19. 002 LET’S WRITE SOME CODE BASE DATA const flowers = [ { name: 'Roses', amount: 25, color: '#cc2936' }, { name: 'Tulips', amount: 40, color: '#f2c640' }, { name: 'Daisies', amount: 15, color: '#2a93d4' }, { name: 'Narcissuses', amount: 9, color: '#F7AD0A' } ]
20. 002 LET’S WRITE SOME CODE THE FLOWER SHOP
21. 002 LET’S WRITE SOME CODE VUE COMPONENT <template>
 <svg width="500" height="500">
 We want those circles here.
 </svg>
 </template> <script>
 export default {
 data() {
 return {
 flowers: [
 ...
 ]
 }
 }
 }
 </script>
22. 002 LET’S WRITE SOME CODE WORKFLOW 1. Render a circle for every flower 2. Size the circles 3. Give each circle the right color 4. Find the best position for each circle
23. 002 LET’S WRITE SOME CODE CIRCLE PACKING
24. 002 LET’S WRITE SOME CODE PACK LAYOUT
25. 002 LET’S WRITE SOME CODE WHAT D3 EXPECTS const formattedData = { name: 'Top Level', children: [ { name: 'Flower name', amount: amount, color: 'color', parent: 'Top Level' }, ... ] }
26. 002 LET’S WRITE SOME CODE WHAT D3 EXPECTS transformedFlowerData() { return { name: 'Top Level', children: this.flowers.map(flower => ({ ...flower, parent: 'Top Level' })) } } const flowers = [ { name: 'Roses', amount: 25, color: '#cc2936' }, { name: 'Tulips', amount: 40, color: '#f2c640' }, { name: 'Daisies', amount: 15, color: '#2a93d4' }, { name: 'Narcissuses', amount: 9, color: '#F7AD0A' } ]
27. 002 LET’S WRITE SOME CODE D3 DOES ITS MAGIC import { hierarchy, pack } from 'd3-hierarchy' layoutData() { // Generate a D3 hierarchy const rootHierarchy = hierarchy(this.transformedFlowerData) .sum(d => d.size) .sort((a, b) => { return b.value - a.value }) // Pack the circles inside the viewbox return pack() .size([500, 500]) .padding(10)(rootHierarchy) }
28. 002 LET’S WRITE SOME CODE D3 DOES ITS MAGIC <template> <svg width="500" height="500"> <g v-for="flower in layoutData.children" :key="flower.data.name" :style="{ transform: `translate(${flower.x}px, ${flower.y}px)` }" > <circle :r=“flower.r” :fill=“flower.data.color” /> </g> </svg> </template>
29. 002 LET’S WRITE SOME CODE STYLING <template> <svg width="500" height="500"> <g class="flower" v-for="flower in layoutData.children" :key="flower.data.name" :style="{ transform: `translate(${flower.x}px, ${flower.y}px)` }" > <circle class=“flower__circle" :r=“flower.r" :fill=“flower.data.color" /> <text class=“flower__label”> {{ flower.data.name }} </text> </g> </svg> </template> <style> ... </style>
30. 002 LET’S WRITE SOME CODE SMOOTH TRANSITIONS .flower { transition: transform 0.1s ease-in-out; } .flower__circle { transition: r 0.1s ease-in-out; }
31. Conclusion
32. 003 CONCLUSION CAVEATS 1. Performance with big data sets 2. Not better for every kind of chart 3. Some features of D3 are 
 harder to integrate
33. 003 CONCLUSION QUICK WINS 1. Your code stays close to the result 2. Experimenting is easy and fast 3. Your code blends nicely with Vue.js code 4. Your code is approachable 5. The web is just the start
34. Thank you! Simon Wuyts simonwuyts.com Find my slides on Twitter ‒ @simonwuyts