Data visualization to expand your skills as a creator

A presentation slide for BOOST/PLAY/MEASURE(BPM), organized by Creative Economy Agency (Public Organization) in Thailand in collaboration with FabCafe Bangkok on Saturday, 29 April, 2023.

2023年4月29日（土）タイのCreative Economy Agency（公的機関）がFabCafe Bangkokと共同で開催する「BOOST/PLAY/MEASURE（BPM）」でのプレゼンテーションスライドです。

Transcript

1. Data visualization
   to expand your skills as a creator
   Yuichi Yazaki
   

   View Slide

2. Who are you?
   

   View Slide

3. ✓ Data visualization practitioner/
   researcher based in Japan.
   
   
   ✓ A part-time faculty member at
   3 universities of arts
   ✓ Co-founder of the community
   "Data Visualization Japan".
   Yuichi Yazaki
   

   View Slide

4. “The Potential of Urban Science: Where Urban Science and Technology Are Now”
   https://utokyony.adm.u-tokyo.ac.jp/news/2022/03/sustainable-urban-development-en/
   

   View Slide

5. “The Potential of Urban Science: Where Urban Science and Technology Are Now”
   https://utokyony.adm.u-tokyo.ac.jp/news/2022/03/sustainable-urban-development-en/
   

   View Slide

6. The exhibition "Visible x Invisible ─ Big Data and Next Generation Information Representation"
   https://tub.tamabi.ac.jp/exhibitions/2027/
   https://youtu.be/Q6G59NIX7Bs?t=124
   

   View Slide

7. The exhibition "Visible x Invisible ─ Big Data and Next Generation Information Representation"
   https://tub.tamabi.ac.jp/exhibitions/2027/
   https://youtu.be/Q6G59NIX7Bs?t=124
   

   View Slide

8. Judgit!
   https://judgit.net/
   

   View Slide

9. View Slide

10. Open Data Day Logo Generator
    https://opendataday.org/
    https://odd.structure-and-representation.com/
    https://speakerdeck.com/n1n9/open-data-day-logo-generator?slide=48
    

    View Slide

11. What is
    
    
    data visualization?
    

    View Slide

12. ✓ Data and representation are
    inextricably linked
    
    
    ✓ Something that can be visualized in
    real time through coding or tools.
    
    
    ✓ Not necessarily coding required!
    

    View Slide

13. Visualization
    
    
    of sports data
    

    View Slide

14. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    Icons by Icons8
    Box-score data Tracking data Meta data
    State of the Art of Sports Data Visualization
    Statistical summary of match
    results
    Collect accurate
    spatio-temporal data
    about players and equipment
    in play in real time
    Rules, stadium capacity,
    physical characteristics
    of players, social media activity during
    games,
    weather and sponsors
    https://www.semanticscholar.org/paper/State-of-the-Art-of-Sports-Data-Visualization-Perin-Vuillemot/b7e06145821a4dce0b630e6dedcd659a17cf9a0f
    3 Types of Sports Data
    

    View Slide

15. Tracking data
    

    View Slide

16. Tracking data
    Events and Trajectories Players’ Point of View
    3rd Person view.
    Tracks player position on the
    fi
    1st Person view.
    1. Viewers relive the play
    
    
    2. Feedback loop for the player him/
    herself
    Icons by Icons8
    State of the Art of Sports Data Visualization
    https://www.semanticscholar.org/paper/State-of-the-Art-of-Sports-Data-Visualization-Perin-Vuillemot/b7e06145821a4dce0b630e6dedcd659a17cf9a0f
    

    View Slide

17. Tracking data
    Events and
    Trajectories
    3rd Person view
    

    View Slide

18. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    "Forms" by Memo Akten
    https://www.memo.tv/works/forms/
    https://youtu.be/oXJO5hB72bw?t=119
    

    View Slide

19. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    "Fencing tracking and visualization system" by Rhizomatiks
    https://research.rhizomatiks.com/s/works/fencing_tracking/en.html
    

    View Slide

20. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    https://togetter.com/li/1824764
    "Hakone Ekiden 3D" by Akihiko Kusanagi
    https://github.com/nagix/hakone-ekiden
    

    View Slide

21. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    https://motion-gallery.net/projects/3dda-nakagin/
    "Nakagin Capsule Tower Building" by 3D Digital Archive Project
    https://www.youtube.com/watch?v=Pxm9ZVgpwEk
    

    View Slide

22. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    "PhotoViz" by Nicholas Felton
    http://feltron.com/PhotoViz.html
    

    View Slide

23. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    "Toronto Raptors at Atlanta Hawks" by Pelle Cass
    https://www.instagram.com/p/CIQmvMYggZN/
    

    View Slide

24. Players’
    Point of View
    tracking data
    1st Person view
    

    View Slide

25. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    "How Mariano Rivera Dominates Hitters" by New York Times
    https://www.nytimes.com/video/sports/1247468158551/how-mariano-rivera-dominates-hitters.html
    

    View Slide

26. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    "Corona Perspectives" by Espadaysantacruz Studio
    https://www.espadaysantacruz.com/projects/corona-perspectives
    https://www.espadaysantacruz.com/projects/every-match-is-a-masterpiece
    

    View Slide

27. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    "Reactor for Awareness in MotionʢRAMʣ" by YCAM
    https://special.ycam.jp/ram/
    

    View Slide

28. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    "Chinatown: Time Travel Through a New York Gem" by New York Times
    https://www.nytimes.com/interactive/2020/12/02/arts/design/chinatown-virtual-walk-tour.html
    

    View Slide

29. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    

    View Slide

30. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    RealityScan
    https://www.capturingreality.com/
    

    View Slide

31. What we can gain from
    data visualization?
    

    View Slide

32. ✓ Visual understanding of data
    
    
    ✓ Can be used for real-time feedback
    
    
    ✓ Gain a bird's eye view
    ✓ Can be used for other data sets.
    

    View Slide

33. Any Tips?
    

    View Slide

34. CSV
    
    
    comma separated values
    

    View Slide

35. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    Every cyclist and stage of the Tour de France
    https://docs.google.com/spreadsheets/d/1rBtySRFsdrQTkEip9y5lq-DQepqpVVQo6Y-XUaGzVj8/edit?usp=sharing
    https://github.com/thomascamminady/LeTourDataSet
    

    View Slide

36. JSON
    
    
    JavaScript Object Notation
    

    View Slide

37. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    https://jsoncrack.com/
    

    View Slide

38. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    JSON Crack
    https://jsoncrack.com/
    

    View Slide

39. https://openre
    fi
    ne.org/
    Open Re
    fi
    ne
    

    View Slide

40. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    Creative Coding Data Visualization
    by media artist by computer scientist
    

    View Slide

41. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    Creative Coding Data Visualization
    

    View Slide

42. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    Creative Coding Data Visualization
    Nature's Algorithms tracking data
    

    View Slide

43. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    D3.js Random Value Viewer
    http://structure-and-representation.com/works/randomViewer/
    

    View Slide

44. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    "I.5: Perlin Noise - The Nature of Code" by The Coding Train
    https://youtu.be/8ZEMLCnn8v0?t=660
    ɹPerlin Noise
    

    View Slide

45. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    "Coding Train Live 162: Flocking Simulation("Boids")" by The Coding Train
    https://www.youtube.com/live/qtUV-DoSOpk?feature=share&t=4401
    ɹBoids (Flocking)
    https://github.com/nature-of-code/noc-examples-p5.js
    

    View Slide

46. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    Easing functions
    https://easings.net/
    ɹEasings.net
    

    View Slide

47. Ok, how do we
    
    
    get started?
    

    View Slide

48. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    If you are graphic designer ...
    SVG
    
    
    Scalable Vector Graphics
    

    View Slide

49. https://www.rawgraphs.io/
    

    View Slide

50. Work by Tama Art University student
    

    View Slide

51. Work by Tama Art University student
    

    View Slide

52. https://
    fl
    ourish.studio/
    https://help.
    fl
    ourish.studio/article/44-bar-chart-race-an-overview
    https://
    fl
    ourish.studio/examples/
    https://help.
    fl
    ourish.studio/article/353-sports-race-an-overview
    

    View Slide

53. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    If you are motion graphic designer ...
    TouchDesigner
    https://derivative.ca/
    

    View Slide

54. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    If you are motion graphic designer ...
    "Ping-pong ball trajectory" by Yugo Minomo
    https://derivative.ca/community-post/tutorial/contents-creation-image-processing-techniques-touchdesigner/62784
    https://www.instagram.com/p/Bz3GPd8jt8x/
    

    View Slide

55. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    If you are motion graphic designer ...
    "Touch Designer tutorial" by Scott Allen
    https://scottallen.ws/tau/pe2020/5_dat#%E6%8E%88%E6%A5%AD%E5%86%85%E8%AA%B2%E9%A1%8C
    

    View Slide

56. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    If you are motion graphic designer ...
    "supersymmetry" by Ryoji Ikeda
    https://www.ycam.jp/archive/works/supersymmetry/
    

    View Slide

57. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    If you are 3d designer ...
    Houdini
    https://www.sidefx.com/products/houdini/
    

    View Slide

58. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    "Veri
    fi
    cation Corona budget 77 trillion yen" by NHK (Japanese TV station)
    https://youtu.be/uQlNZ5bxOA0?t=31
    

    View Slide

59. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    "Tutorial: HoudiniͰData Visualization" by hasegawa_t
    https://qiita.com/hasegawa_t/items/ad7fa5d67bdd9f7b864a
    

    View Slide

60. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    "YouTube channel" by Junichiro Horikawa
    https://www.youtube.com/c/JunichiroHorikawa
    

    View Slide

61. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    "Tutorial: VIS 2020: Scienti
    fi
    c Visualization in Houdini" by several researchers
    https://www.youtube.com/watch?v=J0_D5ykF9V4&ab_channel=IEEEVisualizationConference
    

    View Slide

62. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    If you are clothing designer ...
    "A data-driven fashion collection" by Giorgia Lupi
    http://giorgialupi.com/giorgia-lupi-otherstories
    

    View Slide

63. ˜/PUBUJPO--$ BMMSJHIUTSFTFSWFE
    If you are clothing designer ...
    "OBSERVE, COLLECT, DRAW! - A Visual Journal" by Giorgia Lupi & Stefanie Posavec
    http://giorgialupi.com/observe-collect-draw
    

    View Slide

64. Expand your skills
    
    
    as a creator
    
    
    with data visualization!
    

    View Slide

65. View Slide