Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to build beautiful Vuesualizations

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

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
Software Architecture
hschwentner
6
2.1k
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
270
第3回 Snowflake 中部ユーザ会 - dbt × Snowflake ハンズオン
hoto17296
4
360
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
Spring gRPC について / About Spring gRPC
mackey0225
0
220
負債になりにくいCSSをデザイナとつくるには？
fsubal
9
2.3k
Introduction to kotlinx.rpc
arawn
0
630
Writing documentation can be fun with plugin system
okuramasafumi
0
120
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
[Fin-JAWS 第38回 ～re:Invent 2024 金融re:Cap～]FaultInjectionServiceアップデート＠pre:Invent2024
shintaro_fukatsu
0
400

Featured

See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
YesSQL, Process and Tooling at Scale
rocio
171
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Why Our Code Smells
bkeepers
PRO
335
57k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
A better future with KSS
kneath
238
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
RailsConf 2023
tenderlove
29
1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k

Transcript

  1. How to build beautiful Vuesualizations

  2. Why visualize your data?

  3. 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

  4. Shirley Wu’s Film Flowers

  5. Vue.js Core Team Member I am Natalia Tepluhina Google Developer

    Expert Senior Frontend Engineer @N_Tepluhina

  6. So, what is D3.js?

  7. Charts

  8. Custom visualisations

  9. DOM Manipulation Select elements Insert/remove nodes Change style, class, text,

    HTML etc.

  10. Vue can make it!

  11. Let’s build a Vueniverse!

  12. (I really hope one day it will be that big)

  13. Build a star Step 01 Walkthrough Step 02 Scale star

    properties Step 03 Add dataset

  14. Star math

  15. Star math

  16. Star math

  17. Star math

  18. Scaling 1…1000 Domain 1…250 Range

  19. Scaling Repo stars Issues Contributors Star radius Star color Star

    rays

  20. Hierarchy & Pack

  21. You can find me at: @N_Tepluhina Thanks!