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
76
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
WebDriver BiDiとは何なのか
yotahada3
1
140
チームリードになって変わったこと
isaka1022
0
190
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
SwiftUI Viewの責務分離
elmetal
PRO
0
150
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
Formの複雑さに立ち向かう
bmthd
1
720
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
Unity Android XR入門
sakutama_11
0
140
Featured
See All Featured
The Cult of Friendly URLs
andyhume
78
6.2k
Code Reviewing Like a Champion
maltzj
521
39k
Adopting Sorbet at Scale
ufuk
74
9.2k
Agile that works and the tools we love
rasmusluckow
328
21k
Done Done
chrislema
182
16k
BBQ
matthewcrist
86
9.5k
The Invisible Side of Design
smashingmag
299
50k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
What's in a price? How to price your products and services
michaelherold
244
12k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
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!