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
StarlingMonkeyを触ってみた話 - 2024冬
syumai
3
270
コンテナをたくさん詰め込んだシステムとランタイムの変化
makihiro
1
140
クリエイティブコーディングとRuby学習 / Creative Coding and Learning Ruby
chobishiba
0
3.9k
ドメインイベント増えすぎ問題
h0r15h0
2
360
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
280
Kaigi on Railsに初参加したら、その日にLT登壇が決定した件について
tama50505
0
100
「Chatwork」Android版アプリを 支える単体テストの現在
okuzawats
0
180
MCP with Cloudflare Workers
yusukebe
2
220
テストケースの名前はどうつけるべきか?
orgachem
PRO
0
140
php-conference-japan-2024
tasuku43
0
330
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
410
Androidアプリのモジュール分割における:x:commonを考える
okuzawats
1
140
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
How STYLIGHT went responsive
nonsquared
95
5.2k
Testing 201, or: Great Expectations
jmmastey
40
7.1k
Statistics for Hackers
jakevdp
796
220k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
450
Navigating Team Friction
lara
183
15k
Six Lessons from altMBA
skipperchong
27
3.5k
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!