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.3k
Other Decks in Programming
See All in Programming
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
350
Domain-Driven Transformation
hschwentner
2
1.9k
DROBEの生成AI活用事例 with AWS
ippey
0
140
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
170
Ruby on cygwin 2025-02
fd0
0
150
Rails アプリ地図考 Flush Cut
makicamel
1
120
『品質』という言葉が嫌いな理由
korimu
0
170
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
180
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
130
Software Architecture
hschwentner
6
2.1k
GoとPHPのインターフェイスの違い
shimabox
2
200
PHP ステートレス VS ステートフル 状態管理と並行性 / php-stateless-stateful
ytake
0
110
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
35
1.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Automating Front-end Workflow
addyosmani
1368
200k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Writing Fast Ruby
sferik
628
61k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
A Philosophy of Restraint
colly
203
16k
Being A Developer After 40
akosma
89
590k
Site-Speed That Sticks
csswizardry
4
390
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!