Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to build beautiful Vuesualizations

Avatar for Natalia Tepluhina Natalia Tepluhina
November 28, 2019
Programming
0
95

How to build beautiful Vuesualizations

This is a talk about how to visualize your data with D3.js and Vue.js framework

Avatar for Natalia Tepluhina

Natalia Tepluhina

November 28, 2019
Tweet

More Decks by Natalia Tepluhina

See All by Natalia Tepluhina
All you need is Apollo Client
Avatar for Natalia Tepluhina ntepluhina
0
330
You Might Not Need Vuex
Avatar for Natalia Tepluhina ntepluhina
1
1.3k

Other Decks in Programming

See All in Programming
Windows on Ryzen and I
Avatar for 瀬尾佳隆 seosoft
0
410
脱 雰囲気実装！ AgentCoreを良い感じに WEBアプリケーションに組み込むために
Avatar for Takuya Yonezawa takuyay0ne
3
400
野球解説AI Agentを開発してみた - 2026/02/27 LayerX社内LT会資料
Avatar for Shinichi Nakagawa shinyorke
PRO
0
370
PHP でエミュレータを自作して Ubuntu を動かそう
Avatar for memory m3m0r7
PRO
2
150
Codexに役割を持たせる 他のAIエージェントと組み合わせる実務Tips
Avatar for o8n o8n
4
1.4k
モダンOBSプラグイン開発
Avatar for Kaito Udagawa umireon
0
180
PHPで TLSのプロトコルを実装してみる
Avatar for higaki higaki_program
0
500
Migration to Signals, Signal Forms, Resource API, and NgRx Signal Store @Angular Days 03/2026 Munich
Avatar for Manfred Steyer manfredsteyer
PRO
0
170
夢の無限スパゲッティ製造機 -実装篇- #phpstudy
Avatar for hideki kinjyo o0h
PRO
0
160
Angular-Apps smarter machen mit Gen AI: Lokal und offlinefähig - Hands-on Workshop!
Avatar for Christian Liebel christianliebel
PRO
0
140
へんな働き方
Avatar for Yusuke Wada yusukebe
6
2.8k
おれのAgentic Coding 2026/03
Avatar for TsukasaSekiguchi tsukasagr
1
110

Featured

See All Featured
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.5k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
160
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
820
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
230
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
48k
Done Done
Avatar for chrislema chrislema
186
16k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
230
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
950
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
290

Transcript

  1. How to build beautiful Vuesualizations

  2. Why visualize your data?

  3. A B C Content A 100 200 400 Content B

    $67,000 $56,000 $78,000 Content C 4500 60000 $8,000 Who could resist tables

  4. Shirley Wu’s Film Flowers

  5. Vue.js Core Team Member I am Natalia Tepluhina Google Developer

    Expert Senior Frontend Engineer @N_Tepluhina

  6. So, what is D3.js?

  7. Charts

  8. Custom visualisations

  9. DOM Manipulation Select elements Insert/remove nodes Change style, class, text,

    HTML etc.

  10. Vue can make it!

  11. Let’s build a Vueniverse!

  12. (I really hope one day it will be that big)

  13. Build a star Step 01 Walkthrough Step 02 Scale star

    properties Step 03 Add dataset

  14. Star math

  15. Star math

  16. Star math

  17. Star math

  18. Scaling 1…1000 Domain 1…250 Range

  19. Scaling Repo stars Issues Contributors Star radius Star color Star

    rays

  20. Hierarchy & Pack

  21. You can find me at: @N_Tepluhina Thanks!