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

How to build beautiful Vuesualizations

Avatar for Natalia Tepluhina 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

Avatar for Natalia Tepluhina

Natalia Tepluhina

November 28, 2019
Tweet

More Decks by Natalia Tepluhina

See All by Natalia Tepluhina
All you need is Apollo Client
Avatar for Natalia Tepluhina ntepluhina
0
320
You Might Not Need Vuex
Avatar for Natalia Tepluhina ntepluhina
1
1.3k

Other Decks in Programming

See All in Programming
🔨 小さなビルドシステムを作る
Avatar for Mutsuha Asada momeemt
4
690
Processing Gem ベースの、2D レトロゲームエンジンの開発
Avatar for tokujiros tokujiros
2
130
Design Foundational Data Engineering Observability
Avatar for suci sucitw
3
200
1から理解するWeb Push
Avatar for Minoru Takeuchi dora1998
7
1.9k
アルテニア コンサル／ＩＴエンジニア向け 採用ピッチ資料
Avatar for ALTENIR altenir
0
110
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
Avatar for Takeshi Hagikura thagikura
0
170
そのAPI、誰のため？ Androidライブラリ設計における利用者目線の実践テクニック
Avatar for mkeeda mkeeda
2
2.8k
FindyにおけるTakumi活用と脆弱性管理のこれから
Avatar for adachi.ryo rvirus0817
0
540
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
Avatar for Tomoki Kobayashi temoki
0
350
CJK and Unicode From a PHP Committer
Avatar for てきめん tekimen youkidearitai
PRO
0
110
楽して成果を出すためのセルフリソース管理
Avatar for clipnote clipnote
0
190
OSS開発者という働き方
Avatar for ANDPAD inc andpad
5
1.7k

Featured

See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
139
34k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
55
6.5k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
8
530
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.6k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.1k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k

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!