More Related Content
Similar to Design engineering with d3+react with-speaker-notes (20)
Recently uploaded (20)
Design engineering with d3+react with-speaker-notes
- 2. I fell in love with data visualizations: - They’re cool looking - It’s technical - Information is conveyed quickly
- 3. Inspiration A few examples of the first interactive web projects that made me want to learn more...
- 4. The Pudding / Shirley Wu. “So I went through every single line in Hamilton (twice 😱 ) and recorded who sang each line, as well as who that line may have been directed towards. I've noted every phrase that was sung more than once across more than one song, and grouped them into broad themes*. You can find my lovingly (obsessively) curated data here. To explore the data, I created a visual tool to filter the lines by any combination of characters, conversations, and themes. The insights were amazing, and I'm excited to share with you both the visual tool and my analysis of Hamilton with it.”
- 5. Storiesbehindaline.com -> interactive data viz on paths migrants took to Italy. No photos were used, only the stories told and the path. Data journalism, telling a story.
- 6. https://www.washingtonpost.com/graphics/2018/national/segregation-us-cities/?utm_t erm=.d19521252b33 Segregation in US cities. At the bottom author states “The project analysis was done mostly in node.js with some work in PostGIS. While several technologies were used in this project, special thanks goes to Mapbox’s helpful suite of tools and d3.js.”... But with a little digging on twitter, I also found that the project used “react, redux, async/await and streams”
- 8. Tools of the trade There is a lot of data viz technology out there.
- 10. What you need to say create a radial tree in Tableau: code it up yourself http://www.datablick.com/blog/2015/10/12/radial-trees-in-tableau-by-chris-demartini
- 11. Well d3 does it too https://beta.observablehq.com/@mbostock/d3-radial-tidy-tree
- 12. Here we go. This is why I’m focusing on React + D3.
- 13. “The hardest problem in javascript is finding whatever clicks for you and using it and happily ignoring the rest”
- 14. Remember the following: - React owns the DOM (Document Object Model) - D3 calculates properties “Let’s get rid of the hard stuff and move forward.”
- 15. Workflow process
- 16. “Let’s get rid of the hard stuff and move forward.”
- 17. D3 by itself “Let’s get rid of the hard stuff and move forward.”
- 18. How to go from this ^ To this!! ---> “Let’s get rid of the hard stuff and move forward.”
- 19. // initial circles created with radius and fill color var node = d3.select("#circles") .append("g") .selectAll("circle") .data(data) .enter().append("circle") .attr("r",function(d) { if (d.season === 1) { return 6; } else if (d.season === 2) { return 9; } }) .attr("fill",function(d) { return d.color; }) “Let’s get rid of the hard stuff and move forward.”
- 20. // use force Simulation and force Collide to randomly place the circles var simulation = d3.forceSimulation(data) .force("charge", d3.forceCollide().radius(5)) .force("r", d3.forceRadial(function(d) { if (d.season === 1) { return 50; } else if (d.season === 2) { return 100; } else if (d.season === 3) { return 150; } else if (d.season === 4) { return 200; } })) .on("tick", ticked); “Let’s get rid of the hard stuff and move forward.”
- 21. “Let’s get rid of the hard stuff and move forward.”
- 22. Now bring in React... “Let’s get rid of the hard stuff and move forward.”
- 23. You can “black box” the D3/React interaction…super simple, functional, but not really a solution! At this point we went to Lorraine’s codepen to look at some example forked projects. “Let’s get rid of the hard stuff and move forward.” React-D3-Axis for blackbox model….
- 24. You can “black box” the D3/React interaction…or really make each technology do what it’s best at doing! Remember, D3 should calculate. React should render. 3 steps - Set up the D3 objects - When a React component updates, update the D3 objects - Output SVG in render React color band example for the
- 25. Now, go and make useful, attractive, and fast web applications. Thank you!!
- 26. Resources for additional React + D3 tutorials and lessons: Book: Interactive Data Visualization for the Web by Scott Murrary Frontend Masters course on D3+React by Shirley Wu E-Book: React + D3V4 by Swizec Teller