Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
How to build beautiful Vuesualizations
Natalia Tepluhina
November 28, 2019
Programming
0
48
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
290
You Might Not Need Vuex
ntepluhina
1
880
Other Decks in Programming
See All in Programming
Oracle REST Data Service: APEX Office Hours
thatjeffsmith
0
960
開発速度を5倍早くするVSCodeの拡張機能を作った
purp1eeeee
2
170
Java アプリとAWS の良い関係 - AWS でJava アプリを実行する一番簡単な方法教えます / AWS for Javarista
kanamasa
2
1.3k
engineer
spacemarket
0
5k
マルチプロダクト×非構造化データ×機械学習を支えるデータ信頼性
akino
0
170
Client-Side Field-Level Encryption for Apache Kafka Connect @ VoxxedDays Luxembourg 2022
hpgrahsl
0
120
JetpackCompose 導入半年で感じた 改善点
spbaya0141
0
110
BASE BANKチームの技術選定と歴史 / how to decide technology selection for startup
budougumi0617
0
1.6k
JSのウェブフレームワークで高速なルーターを実装する方法
usualoma
1
1.9k
Cross Deviceチームにおけるスマートテレビアプリ開発ってどんな感じ?
cokaholic
0
120
設計の学び方:自分流のススメ
masuda220
PRO
10
7.6k
Improving Developer Experience Through Tools and Techniques 2022
krzysztofzablocki
0
1.3k
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Designing Experiences People Love
moore
130
22k
Why Our Code Smells
bkeepers
PRO
324
55k
Code Review Best Practice
trishagee
43
9.3k
Why You Should Never Use an ORM
jnunemaker
PRO
47
7.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
950
KATA
mclloyd
7
8.7k
Automating Front-end Workflow
addyosmani
1351
200k
Making Projects Easy
brettharned
98
4.3k
The Art of Programming - Codeland 2020
erikaheidi
32
11k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
Navigating Team Friction
lara
175
11k
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!