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
90
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
320
You Might Not Need Vuex
ntepluhina
1
1.3k
Other Decks in Programming
See All in Programming
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
ニーリーにおけるプロダクトエンジニア
nealle
0
840
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
770
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Writing Fast Ruby
sferik
628
62k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
A better future with KSS
kneath
238
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
The Invisible Side of Design
smashingmag
301
51k
KATA
mclloyd
30
14k
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!