Data visualization to expand your skills as a creator

Slide 1

Slide 1 text

Data visualization to expand your skills as a creator Yuichi Yazaki

Slide 2

Slide 2 text

Who are you?

Slide 3

Slide 3 text

✓ 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

Slide 4

Slide 4 text

“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/

Slide 5

Slide 5 text

“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/

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Judgit! https://judgit.net/

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

What is data visualization?

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Visualization of sports data

Slide 14

Slide 14 text

/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

Slide 15

Slide 15 text

Tracking data

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Tracking data Events and Trajectories 3rd Person view

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

/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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Players’ Point of View tracking data 1st Person view

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

/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

Slide 29

Slide 29 text

/PUBUJPO--$ BMMSJHIUTSFTFSWFE

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

What we can gain from data visualization?

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Any Tips?

Slide 34

Slide 34 text

CSV comma separated values

Slide 35

Slide 35 text

/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

Slide 36

Slide 36 text

JSON JavaScript Object Notation

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

/PUBUJPO--$ BMMSJHIUTSFTFSWFE Creative Coding Data Visualization

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

/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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Ok, how do we get started?

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

https://www.rawgraphs.io/

Slide 50

Slide 50 text

Work by Tama Art University student

Slide 51

Slide 51 text

Work by Tama Art University student

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

/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/

Slide 55

Slide 55 text

/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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

/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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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