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

Other Decks in Programming

See All in Programming
Structured Concurrency, Scoped Values and Joiners in the JDK 25 26 27
Avatar for José josepaumard
1
140
(Re)make Regexp in Ruby: Democratizing internals for the JIT
Avatar for TSUYUSATO Kitsune makenowjust
3
980
継続的な負荷検証を目指して
Avatar for Kazuhiko Yamashita pyama86
0
120
【26新卒研修資料】TDD実装演習
Avatar for ディップ株式会社 dip_tech
PRO
0
160
【26新卒研修】OpenAPI/Swagger REST API研修
Avatar for ディップ株式会社 dip_tech
PRO
0
130
Firefoxにコントリビューションして得られた学び
Avatar for ken7253 ken7253
2
150
How We Practice Exploratory Testing in Iterative Development( #scrumniigata ) / 反復開発の中で、探索的テストをどう実施しているか
Avatar for teyamagu teyamagu
PRO
3
660
t *testing.T は どこからやってくるの？
Avatar for Kotaro Otaka otakakot
1
890
過去のレビュー知見をSkillsで資産化した話
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
1
1k
AI-DLC Deep Dive
Avatar for yuukiyo yuukiyo
9
5.5k
Kubernetesを使わない環境にもCloud Nativeなデプロイを実現する / Enabling Cloud Native deployments without the complexity of Kubernetes
Avatar for linyows linyows
1
130
Oxlintとeslint-plugin-react-hooks 明日から始められそう？
Avatar for t6adev t6adev
0
320

Featured

See All Featured
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.1k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.7k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
1k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
230
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
300
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k

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!