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

How to build beautiful Vuesualizations

Natalia Tepluhina
November 28, 2019
Programming
0
75

How to build beautiful Vuesualizations

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

Natalia Tepluhina

November 28, 2019
Tweet

More Decks by Natalia Tepluhina

See All by Natalia Tepluhina
All you need is Apollo Client
ntepluhina
0
310
You Might Not Need Vuex
ntepluhina
1
1.2k

Other Decks in Programming

See All in Programming
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
870
asdf-ecspresso作って 友達が増えた話 / Fujiwara Tech Conference 2025
koluku
0
1.4k
令和7年版 あなたが使ってよいフロントエンド機能とは
mugi_uno
10
5.2k
盆栽転じて家具となる / Bonsai and Furnitures
aereal
0
1.9k
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
0
150
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
770
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
1.1k
PicoRubyと暮らす、シェアハウスハック
ryosk7
0
220
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
940
Оптимизируем производительность блока Казначейство
lamodatech
0
950
Alba: Why, How and What's So Interesting
okuramasafumi
0
210
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
1.4k

Featured

See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.5k
Navigating Team Friction
lara
183
15k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Scaling GitHub
holman
459
140k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to train your dragon (web standard)
notwaldorf
89
5.8k

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!