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 KOBA789 koba789
14
8k
AI OCR API on Lambdaを Datadogで可視化してみた
Avatar for Nealle nealle
0
180
decksh - a little language for decks
Avatar for Anthony Starks ajstarks
4
21k
マイコンでもRustのtestがしたい その２/KernelVM Tokyo 18
Avatar for Toshifumi NISHINAGA tnishinaga
2
2.3k
CSC305 Summer Lecture 12
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
130
Infer入門
Avatar for r1ru riru
4
1.6k
あなたとJIT, 今すぐアセンブ ル
Avatar for monochrome sisshiki1969
1
730
RDoc meets YARD
Avatar for Masafumi Okura okuramasafumi
2
130
コンテキストエンジニアリング Cursor編
Avatar for kinopee kinopeee
1
710
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
Avatar for Mirrativ mirrativ
2
270
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
Avatar for shunghsiyu shunghsiyu
0
470
あのころの iPod を どうにか再生させたい
Avatar for orumin orumin
2
2.5k

Featured

See All Featured
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
695
190k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
790
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
268
13k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
183
54k
Navigating Team Friction
Avatar for Lara Hogan lara
189
15k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k

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!