Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

How to build beautiful Vuesualizations

Avatar for Natalia Tepluhina Natalia Tepluhina
November 28, 2019
Programming
110
0

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

More Decks by Natalia Tepluhina

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

Other Decks in Programming

See All in Programming
20260914 AIエージェント時代のPlatform Engineering　LLM基盤とプロダクトの責務境界線
Avatar for Taiki Kanzaki kanfab1
7
2.3k
Omarchy Tokyo やると聞いて UMPC 買ってセットアップしてきた
Avatar for Fumiaki MATSUSHIMA mtsmfm
0
190
モバイル交通系ICへのチャージ実例から考える、クロスプラットフォーム開発におけるiOS実機テスト設計とCI運用
Avatar for Yu Sugawara yusuga
1
560
モデルのリファクタリングが難しいと思ったら、そもそも複雑だったのはビジネス仕様だった ? / is-the-business-domain-the-real-complexity
Avatar for hatsu hatsu38
0
430
AI が書く Go コードの品質を劇的に向上させる Linter: “declscope”
Avatar for mpyw mpyw
0
450
Intent as Code
Avatar for Shoppingjaws shoppingjaws
6
1.1k
カツオ、ご期待ください
Avatar for saku_totomi suneo3476
0
120
KiroのSpecで「五目並べ」を作ってみる
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
310
wkhtmltopdfの次どうするか問題2026
Avatar for Shinichi Maeshima willnet
2
1.8k
テストを司るデーモンに会いに行く 〜隔離した仮想マシンでテストを通すまで〜
Avatar for Hidemune Takahashi h1d3mun3
1
600
アクセシビリティから考える情報設計
Avatar for high-g high_g_engineer
0
430
Everything will be SERVERLESS — 信じて運用した10年の経験値 / Everything Will be Serverless — Lessons Learned from 10 Years of Operational Experience
Avatar for shiro seike seike460
PRO
1
600

Featured

See All Featured
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
590
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.3k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
6.3k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
710
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
710
Abbi's Birthday
Avatar for Violet Bock coloredviolet
4
10k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
41k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
6k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
10
2.3k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.2k

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!