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
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
Share
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
ゼロからの、レトロゲームエンジンの作り方
tokujiros
3
1.1k
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
1.1k
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
3.4k
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
440
Vue.jsでiOSアプリを作る方法
hal_spidernight
0
110
盆栽転じて家具となる / Bonsai and Furnitures
aereal
0
2.1k
shadcn/uiを使ってReactでの開発を加速させよう!
lef237
0
350
선언형 UI에서의 상태관리
l2hyunwoo
0
270
Swiftコンパイラ超入門+async関数の仕組み
shiz
0
190
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
260
DMMオンラインサロンアプリのSwift化
hayatan
0
230
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
6
1.5k
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
260
Rails Girls Zürich Keynote
gr2m
94
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Navigating Team Friction
lara
183
15k
Speed Design
sergeychernyshev
25
750
Automating Front-end Workflow
addyosmani
1367
200k
Fireside Chat
paigeccino
34
3.2k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
KATA
mclloyd
29
14k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
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!