Yuanjie Tu: Embark on a Data Visualization Odyssey: Unraveling the Power of D3 | SIC 2024

Embark on a journey into the world of data visualization with this comprehensive D3 tutorial series! D3, renowned for its power to create flexible, interactive visualizations, can be daunting for beginners. While there are countless examples online, finding well-explained resources tailored to novice learners is a challenge. In response, this collection is designed to demystify D3 by addressing key learning barriers.

1. Embark on a data visualization odyssey: unravel the power of D3 Yuanjie (Tukey) Tu PhD, Transportation Engineering, Data Visualization

2. TASK: COUNT THE NUMBER OF SEVENS

3. 697042593474919 358728294954642 424439685400872 235689798144721

4. HOW MANY SEVENS DO YOU SEE?

5. TRY AGAIN: COUNT THE NUMBER OF SEVENS

6. 69 7 0425934 7 4919 358 7 28294954642 4244396854008 7 2 235689 7 98144 7 21

7. HOW MANY SEVENS DO YOU SEE?

8. 69 7 0425934 7 4919 358 7 28294954642 4244396854008 7 2 235689 7 98144 7 21

9. WHAT IS DATA VISUALIZATION?

10. Data visualization is the graphic representation of information and data . By using data encodings and visual elements, visualizations provide a way to see and understand trends, outliers , and patterns in data .

11. WHY VISUALIZE DATA?

12. Communicate Discover questions Answer questions Storytelling Analyze data to support reasoning For fun Shed new insights Record information Understand data Find patterns

13. Source: An interactive visualization of NYC street trees? (Cloudred, 2024)

14. Source: How has gun violence changed in your neighborhood? (New York Times, 2024)

15. Source: Is it better to rent or buy? A financial calculator (New York Times, 2024)

16. THE POWER OF D3.JS

17. D3.js is a JavaScript library for creating dynamic, interactive data visualization in web browsers . It leverages modern web standards such as HTML, SVG, and CSS to bring data to life in form of visual representations. D3 is famous for its interactivity, animations, and flexibility and customization.

18. INTRO TO D3 TUTORIAL COLLECTION

19. Source: D3 intro tutorial collection (Yuanjie Tu, 2024)

20. WHAT’S NEW?

21. Recreated examples from easy to hard

22. Code breakdown and structured instructions Source: Vanilla bar chart ( Yuanjie Tu, 2024)

23. Source: Animated bubble chart (Yuanjie Tu, 2024)

24. Source: Connected view: brushing and linking ( Yuanjie Tu, 2024)

25. Source: Build an interactive dashboard (Yunajie Tu, 2024)

26. Tutorials on creating visualization components

27. Curated learning resources

28. FUTURE STEPS Conceptual model for each visualization type Road map that connects various visualization types and components Personalized tutorials and debugging tools empowered by LLMs

29. QUESTIONS & COMMENTS

30. WHY NOT JUST ANALYZE THE DATA

31. Source: Same stats, different graphs

32. Source: Same stats, different graphs

33. TASK: COUNT THE NUMBER OF SEVENS

34. 69 7 0425934 7 491 7 356628294954642 4244396754008 7 2 2 7 5689398144 7 21

35. HOW MANY SEVENS DO YOU SEE?

36. TRY AGAIN: COUNT THE NUMBER OF SEVENS

37. 69 7 0425934 7 491 7 356628294954642 4244396 7 54008 7 2 2 7 5689398144 7 21

38. CAUTION: VISUALIZATIONS CAN BE DECEPTIVE

39. Source: Routers, 2014. Found in Pandey et al., CHI 2015