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

How to build beautiful Vuesualizations

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Natalia Tepluhina Natalia Tepluhina
November 28, 2019
Programming
97
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
運用エージェントは "作る" から "育てる" へ - 記憶と自己進化の3層設計パターン / self-evolving-agents-three-layer-agent-design
Avatar for geeawa gawa
12
3.1k
inferと仲良くなる10分間
Avatar for ryokatsuse ryokatsuse
1
270
サーバーレスで作る、動画データ管理基盤
Avatar for Keigo Ibaraki oyasumipants
0
290
AI駆動開発で崩れていくコードベースを立て直す
Avatar for Kyoko NR kyoko_nr_nr
1
390
AlarmKitで明後日起きれるアラームアプリを作る
Avatar for Trickart trickart
0
160
AI 時代のソフトウェア設計の学び方
Avatar for 増田 亨 masuda220
PRO
28
10k
自動レビューエンジンの実装と運用 ~レビューのない世界へ~
Avatar for Kanato kurukuru1999
2
280
[BalkanRuby 2026] Drop your app/services!
Avatar for Vladimir Dementyev palkan
3
710
分析エージェント精度向上における データアナリストの役割
Avatar for oura_shoya oura_shoya
0
130
These Five Tricks Can Make Your Apps Greener, Cheaper, & Nicer
Avatar for Holly Cummins hollycummins
0
230
tsserverとは何だったのか、これからどうなるのか
Avatar for Ryota Nakamura nowaki28
1
400
Copilot CLI の継戦能力を高める コンテキスト管理
Avatar for Nozomuts nozomutu
1
1.1k

Featured

See All Featured
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
Between Models and Reality
Avatar for mayunak mayunak
4
310
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.6k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
770
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
170
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
3.2k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
750
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.8k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
380
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.2k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.7k

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!