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

How to build beautiful Vuesualizations

D2a706fe1f598d26a6a2ae246ff551ce?s=47 Natalia Tepluhina
November 28, 2019
Programming
0
48

How to build beautiful Vuesualizations

This is a talk about how to visualize your data with D3.js and Vue.js framework

D2a706fe1f598d26a6a2ae246ff551ce?s=128

Natalia Tepluhina

November 28, 2019
Tweet

More Decks by Natalia Tepluhina

See All by Natalia Tepluhina
All you need is Apollo Client
D2a706fe1f598d26a6a2ae246ff551ce?s=48 ntepluhina
0
290
You Might Not Need Vuex
D2a706fe1f598d26a6a2ae246ff551ce?s=48 ntepluhina
1
880

Other Decks in Programming

See All in Programming
Oracle REST Data Service: APEX Office Hours
0ed10d1154c696886ca483fe827cb299?s=48 thatjeffsmith
0
960
開発速度を5倍早くするVSCodeの拡張機能を作った
D7da604883d0056673358ed111aa9ec3?s=48 purp1eeeee
2
170
Java アプリとAWS の良い関係 - AWS でJava アプリを実行する一番簡単な方法教えます / AWS for Javarista
1370bcc20551cb822f51b212201de303?s=48 kanamasa
2
1.3k
engineer
E6706306bf41c5a5675e7296ecdb4103?s=48 spacemarket
0
5k
マルチプロダクト×非構造化データ×機械学習を支えるデータ信頼性
9b95bbde8856da418c299333b312da3f?s=48 akino
0
170
Client-Side Field-Level Encryption for Apache Kafka Connect @ VoxxedDays Luxembourg 2022
744f1c2c6cbea2ff5104b0ac512936bd?s=48 hpgrahsl
0
120
JetpackCompose 導入半年で感じた 改善点
2f2c6995048700e9175943d868df4974?s=48 spbaya0141
0
110
BASE BANKチームの技術選定と歴史 / how to decide technology selection for startup
Eb6be531bcfaa99714d8d3b48665a5a9?s=48 budougumi0617
0
1.6k
JSのウェブフレームワークで高速なルーターを実装する方法
6e34bfefc3edbe746ac7a71ca6635309?s=48 usualoma
1
1.9k
Cross Deviceチームにおけるスマートテレビアプリ開発ってどんな感じ？
95f926465b1c71fbb49850c5b6223c4d?s=48 cokaholic
0
120
設計の学び方：自分流のススメ
8f84b7d8869ef6005d89b378e8661f7c?s=48 masuda220
PRO
10
7.6k
Improving Developer Experience Through Tools and Techniques 2022
A6942d4cbda185db86d1323f837ad2de?s=48 krzysztofzablocki
0
1.3k

Featured

See All Featured
Principles of Awesome APIs and How to Build Them.
B47b288784fda77a94aeb234ca743c24?s=48 keavy
113
15k
Designing Experiences People Love
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
130
22k
Why Our Code Smells
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
324
55k
Code Review Best Practice
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
43
9.3k
Why You Should Never Use an ORM
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
47
7.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
15
950
KATA
E9221b172e78e888355fa2fe4541b595?s=48 mclloyd
7
8.7k
Automating Front-end Workflow
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1351
200k
Making Projects Easy
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
98
4.3k
The Art of Programming - Codeland 2020
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
32
11k
Designing on Purpose - Digital PM Summit 2013
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
106
5.6k
Navigating Team Friction
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k

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!