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
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
Jakarta EE meets AI
ivargrimstad
0
160
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
250
Better Code Design in PHP
afilina
PRO
0
130
Outline View in SwiftUI
1024jp
1
330
Jakarta EE meets AI
ivargrimstad
0
690
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
2k
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
540
Amazon Qを使ってIaCを触ろう!
maruto
0
420
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1366
200k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
RailsConf 2023
tenderlove
29
900
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!