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
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
200
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
Amazon Qを使ってIaCを触ろう!
maruto
0
410
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.2k
AWS Lambdaから始まった Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
260
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.5k
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
200
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
2
1.2k
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
1.2k
Featured
See All Featured
Speed Design
sergeychernyshev
25
620
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Thoughts on Productivity
jonyablonski
67
4.3k
We Have a Design System, Now What?
morganepeng
50
7.2k
Visualization
eitanlees
145
15k
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
Agile that works and the tools we love
rasmusluckow
327
21k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Scaling GitHub
holman
458
140k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
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!