Tweet
Tweet

Slide 1

Slide 1 text

How to build beautiful Vuesualizations

Slide 2

Slide 2 text

Why visualize your data?

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Shirley Wu’s Film Flowers

Slide 5

Slide 5 text

Vue.js Core Team Member I am Natalia Tepluhina Google Developer Expert Senior Frontend Engineer @N_Tepluhina

Slide 6

Slide 6 text

So, what is D3.js?

Slide 7

Slide 7 text

Charts

Slide 8

Slide 8 text

Custom visualisations

Slide 9

Slide 9 text

DOM Manipulation Select elements Insert/remove nodes Change style, class, text, HTML etc.

Slide 10

Slide 10 text

Vue can make it!

Slide 11

Slide 11 text

Let’s build a Vueniverse!

Slide 12

Slide 12 text

(I really hope one day it will be that big)

Slide 13

Slide 13 text

Build a star Step 01 Walkthrough Step 02 Scale star properties Step 03 Add dataset

Slide 14

Slide 14 text

Star math

Slide 15

Slide 15 text

Star math

Slide 16

Slide 16 text

Star math

Slide 17

Slide 17 text

Star math

Slide 18

Slide 18 text

Scaling 1…1000 Domain 1…250 Range

Slide 19

Slide 19 text

Scaling Repo stars Issues Contributors Star radius Star color Star rays

Slide 20

Slide 20 text

Hierarchy & Pack

Slide 21

Slide 21 text

You can find me at: @N_Tepluhina Thanks!