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

How to build beautiful Vuesualizations

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
信頼性の目標を誰も求めてない
Avatar for Shuma shubox
0
500
巨大モノリシックアプリ モダン化大作戦
Avatar for Ryomm ktcryomm
0
140
標準パッケージに uuid が追加された 背景から見る Go らしい意思決定 / go_127_uuid_decision
Avatar for convto convto
4
3.3k
AgentCore CLI で進化した AWS での AI エージェントの作り方 : 必要な機能を必要な時に
Avatar for Takahiro Kubo icoxfog417
PRO
1
160
Gmail/Google DriveをトリガーにAIエージェントを動かそう！ / Run AI agents with Gmail/Google Drive as triggers!
Avatar for Har1101 har1101
3
480
XP祭りでしか伝わらないフリップネタ #xpjug
Avatar for bayashi murabayashi
0
110
デプロイ直後のレイテンシスパイクを調べたら、 Railsの仕様にたどり着いた
Avatar for naohisa nhsykym
0
110
Laravelのアプリケーションをどこにデプロイするか #ツナギメオフライン.9
Avatar for akase244 akase244
0
120
初心者DevRelとして参加者だった私が、DevRel Talks!#2に登壇するまでにしてきたこと
Avatar for Rai sokohirai
0
340
Building an Out-of-Order CPU
Avatar for Latte72 latte72
1
730
PHPプロジェクトの結合バランスを可視化する #php_night
Avatar for Takuma Kajikawa kajitack
0
230
Webプラットフォームで議論されているセキュリティ課題 / Security issues being discussed on Web Platforms
Avatar for petamoriken / 森建 petamoriken
0
260

Featured

See All Featured
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
42k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
53k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
490
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
11k
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
1.1k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.8k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
360
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
440
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2.6k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k

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!