Prinsip Dasar dalam Membuat Web Visualisasi Data Interaktif

Transcript

1. Prinsip Dasar dalam Membuat Web Visualisasi Data Interaktif Doni Rubiagatra doni@zero-one-group.com WWWID LiveCamp - 18 April 2020
2. Doni Rubiagatra Co-Founder surabaya.py, Chairman PyCon 2019 Community Manager, Data Science Indonesia (East Java) Former Software Engineer kumparan Senior Software Engineer of Zero One Group
3. RENCANA HARI INI 01 PERTANYAAN YANG MUNCUL? 02 PRINSIP DASAR 03 MACAM TEKNOLOGI YANG DIGUNAKAN
4. Apa itu data visualisasi? Source: https://www.nytimes.com/interactive/2020/04/11/business/economy/coronavirus-us-economy-spending.html
5. Mengapa harus lewat kode / teknologi?
6. Mengapa harus interaktif?
7. Mengapa harus web? Source: https://www.nytimes.com/interactive/2020/04/07/technology/coronavirus-internet-use.html
8. Prinsip dasar?
9. Data Teknologi
10. Wujudkan pertanyaan
11. Wujudkan pertanyaan → Berapa banyak rasio meninggal / selamat berdasarkan Jenis Kelamin, Umur, Harga tiket? → Apakah menjadi Jomblo saat kejadian Titanic akan membuat rasio bertahan kalian meningkat?
12. Wujudkan pertanyaan → Bagaimana penjualan mobil pada Februari 2020? Apakah sama → Bagaimanakah Trend mobil pada 2020 → Apakah Indonesia menjadi surga mobil MPV?
13. Sumber Data → Spreadsheet → Database → API → Scraping / Crawling → Peta → Kaggle
14. Eksplorasi Data / Visualisasi
15. Eksplorasi Data / Visualisasi
16. Eksplorasi Data / Visualisasi
17. Eksplorasi Data / Visualisasi
18. Eksplorasi Data / Visualisasi
19. Eksplorasi Data / Visualisasi
20. Eksplorasi Data / Visualisasi
21. Eksplorasi Data / Visualisasi
22. Eksplorasi Data / Visualisasi
23. Sketsa → Kertas → Pensil → Ilustrutation → InDesign → Halaman Awasl merupakan pesan yang ingin kalian sampaikan
24. Perangkat Analitik Yang Sudah Tersedia Kalian Buat Sendiri Dengan Bahasa Pemograman Kesukaan kalian
25. Perangkat Analitik yang sudah tersedia → Terbatas dengan fitur yang disediakan → Bergantung teknologi yang digunakan. Bisa Berbayar (closed source). Atau ada yang Open Source → Data People In Mind
26. Perangkat Analitik yang sudah tersedia
27. Perangkat Analitik yang sudah tersedia
28. Kalian Buat Sendiri (Apasih Yang terjadi) 1. Memuat data ke dalam memori browser. 2. Mengikat data kepada elemen dokumen atau membuat yang baru. 3. Mengubah elemen tersebut menjadi visual yang telah ditetapkan 4. Transisi element terhadap setiap state yang dimasukkan pengguna
29. Kalian Buat Sendiri → Kalian bisa kembangkan sesuai fitur yang diinginkan → Mayoritas merupakan library dari bahasa pemograman yang ada di Web → Engineer People In Mind
30. Plotly (react-Javascript)
31. Dash (Python - Plotly)
32. Dash (Python - Plotly)
33. Dash (Python - Plotly)
34. REFERENCES • Dash Website Page • Storytelling with Data: A Data Visualization Guide for Business Professionals • Interactive Web-Based Data Visualization with R, plotly, and shiny (Chapman & Hall/CRC The R Series) • Interactive Data Visualization for the Web: An Introduction to Designing with D3 • Kaggle
35. Thanks for listening! Any questions? Twitter @rubiagatra #livecampid Doni Rubiagatra doni@zero-one-group.com WWWID LiveCamp - 18 April 2020 Prinsip Dasar dalam Membuat Web Visualisasi Data Interaktif