Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to build beautiful Vuesualizations

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Natalia Tepluhina Natalia Tepluhina
November 28, 2019
Programming
100
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
自動化したのに回らないテスト運用の壁ーAI時代の品質責任と生産性
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
0
120
komatsuna「分散システムにおけるバグ分析手法」
Avatar for こまつな komatsunaqa
0
150
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
480
AWS DevOps AgentのAzure接続機能を検証して見えた活用法／Use Cases Verified for the AWS DevOps Agent's Azure Connectivity Feature
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
0
180
2年かけて Deno に DOMMatrix を実装した話 / How I implemented DOMMatrix in Deno over two years
Avatar for petamoriken / 森建 petamoriken
0
190
【やさしく解説 設計編・中級 #6】良いアーキテクチャとは ～ 一本の登り道の、行き先 ～
Avatar for HideyukiKitao panda728
PRO
0
200
React本体のコードリーディング
Avatar for high-g high_g_engineer
1
120
Laravelで学ぶ Webアプリケーションチューニング入門/web_application_tuning_101
Avatar for Ryo Tomidokoro hanhan1978
4
1.5k
テーブルをDELETEした
Avatar for yuzneri yuzneri
0
130
ビデオ通話が繋がる0.2秒で何が起きているのか
Avatar for Miyamoto Naoyuki supurazako
2
160
【SRE NEXT 2026 Lunch Session】一人目専任SREの立ち上げを加速する ― AIと進めたオンボーディングで2分を0.04秒にした話
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
0
3.3k
PostgreSQL 18で考えるUUID主キー
Avatar for Kazuhiro Seo kazuhiro1982
0
450

Featured

See All Featured
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
230
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
740
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.5k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
9.9k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
3
380
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.7k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
11
39k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
290
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
860
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.6k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.3k

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!