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
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
5
730
バグを見つけた?それAppleに直してもらおう!
uetyo
0
180
創造的活動から切り拓く新たなキャリア 好きから始めてみる夜勤オペレーターからSREへの転身
yjszk
1
130
rails statsで大解剖 🔍 “B/43流” のRailsの育て方を歴史とともに振り返ります
shoheimitani
2
940
Androidアプリのモジュール分割における:x:commonを考える
okuzawats
1
140
たのしいparse.y
ydah
3
120
これでLambdaが不要に?!Step FunctionsのJSONata対応について
iwatatomoya
2
3.7k
情報漏洩させないための設計
kubotak
3
340
Beyond ORM
77web
7
960
Semantic Kernelのネイティブプラグインで知識拡張をしてみる
tomokusaba
0
180
htmxって知っていますか?次世代のHTML
hiro_ghap1
0
340
Keeping it Ruby: Why Your Product Needs a Ruby SDK - RubyWorld 2024
envek
0
190
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
A Philosophy of Restraint
colly
203
16k
Statistics for Hackers
jakevdp
796
220k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Gamification - CAS2011
davidbonilla
80
5.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
A designer walks into a library…
pauljervisheath
204
24k
How to train your dragon (web standard)
notwaldorf
88
5.7k
GitHub's CSS Performance
jonrohan
1030
460k
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!