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
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
560
Formの複雑さに立ち向かう
bmthd
1
860
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
Ruby on cygwin 2025-02
fd0
0
150
SpringBoot3.4の構造化ログ #kanjava
irof
2
1k
時計仕掛けのCompose
mkeeda
1
300
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
110
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
540
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
230
Open source software: how to live long and go far
gaelvaroquaux
0
640
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
仕様変更に耐えるための"今の"DRY原則を考える / Rethinking the "Don't repeat yourself" for resilience to specification changes
mkmk884
5
820

Featured

See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Adopting Sorbet at Scale
ufuk
74
9.2k
Typedesign – Prime Four
hannesfritz
40
2.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
550
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
A designer walks into a library…
pauljervisheath
205
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k

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!