-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdataviz_gallery.html
227 lines (198 loc) · 13.5 KB
/
dataviz_gallery.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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE HTML>
<!--
Editorial by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Datanous</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="shortcut icon" href="images\pugileFavicon16x16.jpg" type="image/x-icon" />
<script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
<script type="text/javascript">
var vizList = ["https://public.tableau.com/views/BeatlesAnalysis/BeatlesAnalysis",
"https://public.tableau.com/views/LOTR/LOTRSocial",
"https://public.tableau.com/views/Globalwarming_3/GlobalTemperatureontheRise",
"https://public.tableau.com/views/CallCenterDashboard_5/CallVolumeAnalysis",
"https://public.tableau.com/views/BusinessBoring-Nodialdemanddashboard/Businessdashboardsdonthavetobeboring-Heatdials",
"https://public.tableau.com/views/USPresidentialElections_5/Election",
"https://public.tableau.com/views/RealEstate-ExecutiveScorecard/NationalInsights",
"https://public.tableau.com/views/ResourcePlanning_0/ResourceWho",
"https://public.tableau.com/views/SuperstoreGlobalDashboard/Main",
"https://public.tableau.com/views/PointillisticArt/Pointillism?:embed=y&:display_count=yes",
"https://public.tableau.com/views/VisualVocabulary/VisualVocabulary"];
var viz,
vizLen = vizList.length,
vizCount = 0;
function createViz(vizPlusMinus) {
var vizDiv = document.getElementById("vizContainerGallery");
var options = {
hideTabs: true,
hideToolbar: true,
};
vizCount = vizCount + vizPlusMinus;
if (vizCount >= vizLen) {
// Keep the vizCount in the bounds of the array index.
vizCount = 0;
} else if (vizCount < 0) {
vizCount = vizLen - 1;
}
if (viz) { // If a viz object exists, delete it.
viz.dispose();
}
var vizURL = vizList[vizCount];
viz = new tableau.Viz(vizDiv, vizURL, options);
}
</script>
</head>
<body class="is-preload" onload="createViz(0);">
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main">
<div class="inner">
<!-- Header -->
<header id="header">
<a href="index.html" class="logo"><strong>Datanous</strong>: noēsis in a data world</a>
<ul class="icons">
<li><a href="https://www.linkedin.com/in/slprice" target="_blank" class="icon fa-linkedin-square"><span class="label">LinkedIn</span></a></li>
<li><a href="https://public.tableau.com/profile/stephen.price2086#!/" target="_blank" class="icon fa-area-chart"><span class="label">Tableau Public</span></a></li>
</ul>
</header>
<!-- Content -->
<section>
<header class="main">
<h1>Visual Analytics Gallery</h1>
<p><span class="icon fa-bar-chart"></span> A curated collection of Tableau Public visualizations</p>
</header>
<hr class="major"/>
<p><strong>Tableau Public</strong> is a world class repository of data visualizations. It is entirely open to the public for free and as a result it is an <strong><i>immense sandbox</i></strong> of treasures mixed in with a lot of trial and error. I always thought it would be a great idea to host a curated list of visualizations that I found particularly compelling or well designed. I have drawn tremendous inspiration from this community and I hope you will too.</p>
<h3>Instructions</h3>
<div class="box">
<p>Navigate through the gallery using the previous and next buttons.</p>
<p>Given that the authors featured in this gallery published their work with different sizings, for horizontally aligned visualizations sometimes you will have to scroll through a viz if it is larger than the window I have provided.</p>
<p>Note that many of these public visualizations have been published without mobile layouts or automatic sizing, therefore they may not display well on mobile devices. If that is the case I suggest visiting this page from a desktop or laptop computer.</p>
</div>
<div id="basicNavigation">
<button class="button primary" onclick="javascript:createViz(-1);">Prev</button>
<button class="button primary" onclick="javascript:createViz(1);">Next</button>
</div>
<div id="vizContainerGallery"></div>
<div id="basicNavigation">
<button class="button primary" onclick="javascript:createViz(-1);">Prev</button>
<button class="button primary" onclick="javascript:createViz(1);">Next</button>
</div>
<!-- Place holder for actual pagination -->
<!--<div>
<h4>Pagination</h4>
<ul class="pagination">
<li><span class="button disabled">Prev</span></li>
<li><a href="#" class="page active">1</a></li>
<li><a href="#" class="page">2</a></li>
<li><a href="#" class="page">3</a></li>
<li><span>…</span></li>
<li><a href="#" class="page">8</a></li>
<li><a href="#" class="page">9</a></li>
<li><a href="#" class="page">10</a></li>
<li><a href="#" class="button">Next</a></li>
</ul>
</div> -->
</section>
</div>
</div>
<!-- *****************Menu Bar******************* -->
<!-- Sidebar -->
<div id="sidebar" class="inactive">
<div class="inner">
<!-- Search -->
<section id="search" class="alt">
<form method="post" action="#">
<input type="text" name="query" id="query" placeholder="Search" />
</form>
</section>
<!-- Menu -->
<nav id="menu">
<header class="major">
<h2>Menu</h2>
</header>
<ul>
<li><a href="index.html">Homepage</a></li>
<li><a href="datanous_about.html">Datanous?</a></li>
<li><a href="about_author.html">About the Author</a></li>
<li>
<span class="opener">Analytics</span>
<ul>
<li><a href="dataviz_gallery.html">Visual Analytics Gallery</a></li>
<li><a href="tableauJSAPI.html">Tableau's JavaScript API</a></li>
</ul>
</li>
<li>
<span class="opener">Backend Stuff</span>
<ul>
<li><a href="#">Coming Soon</a></li>
</ul>
</li>
<li>
<span class="opener">Oil & Gas</span>
<ul>
<li><a href="well_logs.html">Tableau Well Logs</a></li>
<li><a href="#">Tableau Reflection Seismology</a></li>
</ul>
</li>
</ul>
</nav>
<!-- Section -->
<section>
<header class="major">
<h2>Featured Posts</h2>
</header>
<div class="mini-posts">
<article>
<a href="tableauJSAPI.html" class="image"><img src="images/Asset_Production_Report_1.jpg" alt="Tableau JavaScript API" /></a>
<p><strong>Tableau's JavaScript API</strong></br>Embed Tableau content on your website or application. Use JS functions to extend functionality. A great place to learn these skills from a no-nonsense author.</p>
</article>
<article>
<a href="well_logs.html" class="image"><img src="images/Well_Log_Flow.png" alt="Tableau Well Logs" /></a>
<p><strong>Tableau Well Logs</strong></br>Transform your .las files into a friendlier format. Use Tableau Prep to create a repository of all your logs and let visual magic happen in Tableau Desktop.</p>
</article>
<article>
<a href="dataviz_gallery.html" class="image"><img src="images/Call_Volume_Analysis_1.jpg" alt="Tableau JavaScript API" /></a>
<p><strong>Tableau Visual Gallery</strong></br>Tableau Public is a treasure trove of fantastic content. Given it's open nature and size sometimes a little guidance is needed. Here you will find a curated collection of my favorite data visualizations.</p>
</article>
</div>
<ul class="actions">
<li><a href="#" class="button">More</a></li>
</ul>
</section>
<!-- Section -->
<section>
<header class="major">
<h2>Get in touch</h2>
</header>
<p>Reach out to me via email. Feedback is always welcome and I appreciate you visiting my site.</p>
<ul class="contact">
<li class="fa-envelope-o"><a href="mailto:[email protected]">[email protected]</a></li>
<li class="fa-linkedin-square"><a href="https://www.linkedin.com/in/slprice" target="_blank">LinkedIn</a></li>
<li class="fa-area-chart"><a href="https://public.tableau.com/profile/stephen.price2086#!/" target="_blank">Tableau Public</a></li>
</ul>
</section>
<!-- Footer -->
<footer id="footer">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-nd/4.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">DataNous</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://stephen.excessblam.com/datanous/" property="cc:attributionName" rel="cc:attributionURL">Stephen Price</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/4.0/">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License</a>.
<p class="copyright">Design: <a href="https://html5up.net" target="_blank">HTML5 UP</a>.</p>
</footer>
</div>
</div>
<!-- *****************Menu Bar******************* -->
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>