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
96
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
[BalkanRuby 2026] Drop your app/services!
Avatar for Vladimir Dementyev palkan
3
640
SPMマルチモジュールで テストカバレッジを取得する技法
Avatar for yosshi yosshi4486
0
110
20年以上続くプロダクトでも使い続けられる静的解析ツールを求めて
Avatar for Atsushi Matsuo matsuo_atsushi
0
160
運用エージェントは "作る" から "育てる" へ - 記憶と自己進化の3層設計パターン / self-evolving-agents-three-layer-agent-design
Avatar for geeawa gawa
10
1k
開発体験を左右するライブラリの API 設計 - GraphQL スキーマ構築ライブラリから考える #tskaigi
Avatar for izumin5210 izumin5210
2
470
CLIであることを活かしたGitHub Copilot CLI活用術 / GitHub Copilot CLI Pro Tips & Tricks
Avatar for Naoya.i nao_mk2
1
580
AIエージェントと協働するCLI開発 — BunとOpenClawで学んだこと
Avatar for よしこ yoshikouki
1
200
20260514 - build with ai 2026 - build LINE Bot with Gemini CLI
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
460
Modding RubyKaigi for Myself
Avatar for yui-knk yui_knk
0
390
新規プロダクトを高速で生み出すハーネスエンジニアリング
Avatar for Ryohei Ikegami seanchas116
3
250
AlarmKitで明後日起きれるアラームアプリを作る
Avatar for Trickart trickart
0
140
Sans tests, vos agents ne sont pas fiables
Avatar for Nathan Abondance nabondance
0
150

Featured

See All Featured
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
310
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.9k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.3k
HDC tutorial
Avatar for Michiel Stock michielstock
2
670
Claude Code のすすめ
Avatar for schroneko schroneko
67
220k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
550
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.3k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
400
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.2k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
510
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
190

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!