Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
How to build beautiful Vuesualizations
Search
Natalia Tepluhina
November 28, 2019
Programming
0
89
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
Share
More Decks by Natalia Tepluhina
See All by Natalia Tepluhina
All you need is Apollo Client
ntepluhina
0
320
You Might Not Need Vuex
ntepluhina
1
1.3k
Other Decks in Programming
See All in Programming
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
220
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
120
VS Code Update for GitHub Copilot
74th
1
420
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
230
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
370
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
エラーって何種類あるの?
kajitack
5
310
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
C++20 射影変換
faithandbrave
0
540
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
390
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
570
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Docker and Python
trallard
44
3.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Unsuck your backbone
ammeep
671
58k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Practical Orchestrator
shlominoach
188
11k
How to Ace a Technical Interview
jacobian
277
23k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Transcript
How to build beautiful Vuesualizations
Why visualize your data?
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
Shirley Wu’s Film Flowers
Vue.js Core Team Member I am Natalia Tepluhina Google Developer
Expert Senior Frontend Engineer @N_Tepluhina
So, what is D3.js?
Charts
Custom visualisations
DOM Manipulation Select elements Insert/remove nodes Change style, class, text,
HTML etc.
Vue can make it!
Let’s build a Vueniverse!
(I really hope one day it will be that big)
Build a star Step 01 Walkthrough Step 02 Scale star
properties Step 03 Add dataset
Star math
Star math
Star math
Star math
Scaling 1…1000 Domain 1…250 Range
Scaling Repo stars Issues Contributors Star radius Star color Star
rays
Hierarchy & Pack
You can find me at: @N_Tepluhina Thanks!