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
Six and a half ridiculous things to do with Quarkus
Avatar for Holly Cummins hollycummins
0
220
AIと人間の共創開発！OSSで試行錯誤した開発スタイル
Avatar for mae616 mae616
2
810
pnpm に provenance のダウングレード を検出する PR を出してみた
Avatar for mattsuu ryo_manba
1
160
One Enishi After Another
Avatar for Koji SHIMADA snoozer05
PRO
0
160
React Nativeならぬ"Vue Native"が実現するかも？_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
Avatar for Yuto Nagai(Future) yut0naga1_fa
2
1.6k
なんでRustの環境構築してないのにRust製のツールが動くの？ / Why Do Rust-Based Tools Run Without a Rust Environment?
Avatar for TOMIKAWA Sotaro ssssota
14
46k
CSC509 Lecture 08
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
260
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
Avatar for Masahiro Nishimi masahiro_nishimi
4
16k
CSC305 Lecture 11
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
280
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
Avatar for mazrean mazrean
0
110
Software Architecture
Avatar for Henning Schwentner hschwentner
6
2.3k
CSC509 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
270

Featured

See All Featured
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.9k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
44
7.8k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
185
22k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.3k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k

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!