-
Notifications
You must be signed in to change notification settings - Fork 23
/
index.html
155 lines (149 loc) · 11.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="shortcut icon" href="favicon.ico"/>
<title>Visual Vocabulary ft. Vega</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="There are so many ways to visualise data – how do we know which one to pick? Click on the coloured categories below to decide which data relationship is most important in your story, then look at the different types of chart within the category to form some initial ideas about what might work best. This list is not meant to be exhaustive, nor a wizard, but is a useful starting point for making informative and meaningful data visualisations">
<!-- Twitter card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@gramener">
<meta name="twitter:creator" content="@PratapVardhan">
<meta name="twitter:url" content="https://gramener.github.io/visual-vocabulary-vega/">
<meta name="twitter:title" content="Visual Vocabulary - Vega Edition">
<meta name="twitter:description" content="There are so many ways to visualise data – how do we know which one to pick? Click on the coloured categories below to decide which data relationship is most important in your story, then look at the different types of chart within the category to form some initial ideas about what might work best. This list is not meant to be exhaustive, nor a wizard, but is a useful starting point for making informative and meaningful data visualisations">
<meta name="twitter:image" content="https://gramener.github.io/visual-vocabulary-vega/assets/full-mix.png">
<!--facebook open graph-->
<meta property="og:title" content="Visual Vocabulary - Vega Edition">
<meta property="og:url" content="https://gramener.github.io/visual-vocabulary-vega/">
<meta property="og:description" content="There are so many ways to visualise data – how do we know which one to pick? Click on the coloured categories below to decide which data relationship is most important in your story, then look at the different types of chart within the category to form some initial ideas about what might work best. This list is not meant to be exhaustive, nor a wizard, but is a useful starting point for making informative and meaningful data visualisations">
<meta property="og:image" content="https://gramener.github.io/visual-vocabulary-vega/assets/full-mix.png">
<link rel="stylesheet" href="css/style.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-135627304-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-135627304-2');
</script>
</head>
<body>
<div class="main"></div>
<!-- templates -->
<script class="index" type="text/html">
<%= APP.T.header({APP}) %>
<div class="container-fluid">
<div class="row pt-2">
<div class="col-12 col-md-7">
<h2>Visual Vocabulary<span class="sm3"> - Vega Edition</span></h2>
</div>
<div class="col-12 col-md-5 sm1 text-muted text-right">
<%= APP.T.social({APP}) %>
<p class="d-md-block d-none mb-0">Inspired by Financial Times's
<a class="font-weight-bold text-muted" href="https://ft.com/vocabulary">Visual Vocabulary<a> &
<a class="font-weight-bold text-muted" href="http://www.vizwiz.com/2018/07/visual-vocabulary.html">Andy Kriebel's ft.</a>
</p>
<p class="font-weight-bold">Click any section below to view the charts</p>
</div>
</div>
<p class="sm1 text-muted">There are so many ways to visualise data - how do we know which one to pick? Click on a category below to decide which data relationship is most important in your story, then look at the different types of charts within the category to form some initial ideas about what might work best. This list is not meant to be exhaustive, nor a wizard, but is a useful starting point for making informative and meaningful data visualisations.</p>
<% _.each(_.chunk(APP.data.indexlist, 3), row => { %>
<div class="row">
<% _.each(row, item => { %>
<a class="col col-md-4 col-12 px-2 text-decoration-none text-muted" href="#/<%= item.type %>/">
<h2 style="color:<%= item.color %>;border-top: 10px solid;"><%= item.type %></h2>
<p><%= item.desc %></p>
</a>
<% }) %>
</div>
<% }) %>
<%= APP.T.credit({APP}) %>
</div>
</script>
<script class="panel" type="text/html">
<%= APP.T.header({APP}) %>
<div class="container-fluid position-relative">
<% var filter = (APP.path=='FullList')?{}:{type: APP.path} %>
<% var metas = _.filter(APP.data.indexlist, filter) %>
<% _.each(metas, meta => { %>
<% var charts = _.filter(APP.data.index, {type: meta.type}) %>
<h1 style="color:<%= meta.color %>;" class="mt-2"><%= meta.type %></h2>
<p style="border-bottom: 10px solid <%= meta.color %>;" class="pb-2"><%= meta.desc %></p>
<% _.each(_.groupBy(charts, 'row'), row => { %>
<div class=row>
<% _.each(row, item => { %>
<% var size = Math.floor(12 / row.length) %>
<div class="box col col-12 col-md-<%= size %>">
<p class="font-weight-bold mt-1 my-0"><%= item.name %></p>
<p class="mb-1 sm1"><%= item.desc %></p>
<span class="posteditor cursor-pointer d-none font-weight-bold p-1 pos-tr position-absolute sm2 text-monospace">Edit</span>
<div class="vegachart scrollbar" data-vg="spec/<%= item.id %>.json">
<div class="placeholder"></div>
</div>
</div> <!--.box -->
<% }) %>
</div> <!--.row -->
<% }) %>
<% }) %>
<% if (APP.path == 'FullList') { %>
<%= APP.T.credit({APP}) %>
<% } else { %>
<div class="float-right mb-1"><%= APP.T.social({APP}) %></div>
<% } %>
</div>
</script>
<script class="header" type="text/html">
<div class="bg-light border-bottom mt-n1 px-2">
<% var headers = APP.data.indexlist.concat({type: 'FullList'}) %>
<a class="border-right px-2 ml-n1 sm1 text-muted text-decoration-none text-nowrap" href="#">Visual Vocabulary</a>
<% _.each(headers, item => { %>
<% var selected = (item.type == APP.path)?'text-dark font-weight-bold bg-color6':'text-muted' %>
<a class="border-right px-3 ml-n1 sm1 text-decoration-none text-nowrap <%= selected %>"
style="border-bottom: 0.3rem solid <%= item.color %>;" href="#/<%= item.type %>/"><%= item.type %></a>
<% }) %>
</div>
</script>
<script class="credit" type="text/html">
<div class="border py-2 row sm2 text-muted">
<div class="col col-12 col-md-8">
<div class="font-weight-bolder">CREATED BY</div>
<div><a class="text-muted" href="https://twitter.com/PratapVardhan">Pratap Vardhan | @PratapVardhan</a></div>
<div class="font-weight-bolder">CREDITS</div>
<div><a class="text-muted" href="https://vega.github.io/">Vega Authors & Community</a>, <a class="text-muted" href="https://gramener.com/">Gramener</a></div>
<div><a class="text-muted" href="https://gramener.github.io/visual-vocabulary-vega/">https://gramener.github.io/visual-vocabulary-vega/</a></div>
<div><a class="text-muted" href="https://github.com/gramener/visual-vocabulary-vega/">https://github.com/gramener/visual-vocabulary-vega/</a></div>
</div>
<div class="col col-12 col-md-4">
<div class="font-weight-bolder">INSPIRED BY</div>
<div><a class="text-muted" href="https://twitter.com/VizWizBI">Andy Kriebel | @VizWizBI (design / data)</a></div>
<div>FT Graphics: <span class="sm1">Alan Smith; Chris Campbell; Ian Bott; Liz Faunce; Graham Parrish; Billy Ehrenberg-Shannon; Paul McCallum; Martin Stabe</span></div>
<div>Visual Vocabulary: ft.com/vocabulary</div>
<%= APP.T.social({APP}) %>
</div>
</div>
</script>
<script class="social" type="text/html">
<% var url = encodeURI('https://gramener.github.io/visual-vocabulary-vega/') %>
<% var text = encodeURI('There are many ways to visualize data - how do we know which one to pick? \nVisual Vocabulary - Vega Edition helps you pick one! ') %>
<% var size = 16 %>
<div>
<a href="https://twitter.com/intent/tweet?url=<%= url %>&text=<%= text %>%20via%20@Gramener%20@pratapvardhan&hashtags=dataviz" class="text-decoration-none" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="<%= size %>" height="<%= size %>" viewBox="0 0 24 24" style=" fill:#000000;"><path d="M 24 4.300781 C 23.101563 4.699219 22.199219 5 21.199219 5.101563 C 22.199219 4.5 23 3.5 23.398438 2.398438 C 22.398438 3 21.398438 3.398438 20.300781 3.601563 C 19.300781 2.601563 18 2 16.601563 2 C 13.898438 2 11.699219 4.199219 11.699219 6.898438 C 11.699219 7.300781 11.699219 7.699219 11.800781 8 C 7.699219 7.800781 4.101563 5.898438 1.699219 2.898438 C 1.199219 3.601563 1 4.5 1 5.398438 C 1 7.101563 1.898438 8.601563 3.199219 9.5 C 2.398438 9.398438 1.601563 9.199219 1 8.898438 C 1 8.898438 1 8.898438 1 9 C 1 11.398438 2.699219 13.398438 4.898438 13.800781 C 4.5 13.898438 4.101563 14 3.601563 14 C 3.300781 14 3 14 2.699219 13.898438 C 3.300781 15.898438 5.101563 17.300781 7.300781 17.300781 C 5.601563 18.601563 3.5 19.398438 1.199219 19.398438 C 0.800781 19.398438 0.398438 19.398438 0 19.300781 C 2.199219 20.699219 4.800781 21.5 7.5 21.5 C 16.601563 21.5 21.5 14 21.5 7.5 C 21.5 7.300781 21.5 7.101563 21.5 6.898438 C 22.5 6.199219 23.300781 5.300781 24 4.300781 "></path></svg>
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=<%= url %>" class="text-decoration-none" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="<%= size %>" height="<%= size %>" viewBox="0 0 24 24" style=" fill:#000000;"><path d="M19,3H5C3.895,3,3,3.895,3,5v14c0,1.105,0.895,2,2,2h7.621v-6.961h-2.343v-2.725h2.343V9.309 c0-2.324,1.421-3.591,3.495-3.591c0.699-0.002,1.397,0.034,2.092,0.105v2.43h-1.428c-1.13,0-1.35,0.534-1.35,1.322v1.735h2.7 l-0.351,2.725h-2.365V21H19c1.105,0,2-0.895,2-2V5C21,3.895,20.105,3,19,3z"></path></svg>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=<%= url %>&title=<%= text %>" class="text-decoration-none" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="<%= size %>" height="<%= size %>" viewBox="0 0 24 24" style=" fill:#000000;"><path d="M19,3H5C3.895,3,3,3.895,3,5v14c0,1.105,0.895,2,2,2h14c1.105,0,2-0.895,2-2V5C21,3.895,20.105,3,19,3z M9,17H6.477v-7H9 V17z M7.694,8.717c-0.771,0-1.286-0.514-1.286-1.2s0.514-1.2,1.371-1.2c0.771,0,1.286,0.514,1.286,1.2S8.551,8.717,7.694,8.717z M18,17h-2.442v-3.826c0-1.058-0.651-1.302-0.895-1.302s-1.058,0.163-1.058,1.302c0,0.163,0,3.826,0,3.826h-2.523v-7h2.523v0.977 C13.93,10.407,14.581,10,15.802,10C17.023,10,18,10.977,18,13.174V17z"></path></svg>
</a>
</div>
</script>
<!-- templates -->
<script src="https://cdn.jsdelivr.net/npm/underscore@1.9.2/underscore.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega@5.9.1/build/vega.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-tooltip@0.20.1/build/vega-tooltip.min.js"></script>
<script src="script.js"></script>
</body></html>