-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
272 lines (262 loc) · 15.7 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
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
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
<!DOCTYPE html>
<html>
<head>
<!-- Primary Meta Tags -->
<title>Python Data Vizualization Cookbok</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="Python Data Vizualization Cookbok">
<meta name="description"
content="A free and interactive cookbook with code samples from pandas, matplotlib, seaborn, and plotly, Python's most popular data visualization libraries.">
<meta name="keywords" content="data viz cookbook">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://dataviz.dylancastillo.co/">
<meta property="og:title" content="Python Data Vizualization Cookbok">
<meta property="og:description"
content="A free and interactive cookbook with code samples from pandas, matplotlib, seaborn, and plotly, Python's most popular data visualization libraries.">
<meta property="og:image" content="https://dataviz.dylancastillo.co/assets/images/meta-img.jpg">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://dataviz.dylancastillo.co/">
<meta property="twitter:title" content="Python Data Visualization Cookbook">
<meta property="twitter:description"
content="A free and interactive cookbook with code samples from pandas, matplotlib, seaborn, and plotly, Python's most popular data visualization libraries.">
<meta property="twitter:image" content="https://dataviz.dylancastillo.co/assets/images/meta-img.jpg">
<meta name="twitter:creator" content="@_dylancastillo" />
<link rel="icon" type="image/x-icon" href="./assets/images/favicon.ico">
<link rel="stylesheet" href="./assets/built/style.css" />
<link rel="stylesheet" href="./assets/built/pyscript.css" />
<script defer src="./assets/built/plotly-2.14.0.min.js"></script>
<script defer src="./assets/built/pyscript.js"></script>
<py-env>
- matplotlib
- numpy
- pandas
- seaborn
- plotly
</py-env>
</head>
<body body class="min-h-screen bg-rose-50" x-data="radioData()">
<h2 class="text-bgray-800 text-center font-bold text-6xl pt-6">👨🍳 📙 📊</h2>
<h1 class="text-bgray-800 text-center font-bold text-4xl pb-6 pt-2">Python Data Viz Cookbook</h1>
<div class="flex flex-row flex-wrap gap-4 justify-center py-5">
<div class="order-2 md:order-1">
<select id="chart-type" x-on:change="update_repl"
class="bg-stone-50 border border-stone-300 text-stone-900 text-sm rounded-lg focus:ring-rose-500 focus:border-rose-500 block p-2.5">
<option value="">Choose a graph</option>
<option value="Bar Chart">Bar Chart</option>
<option value="Box Plot">Box Plot</option>
<option value="Donut Chart">Donut Chart</option>
<option value="Grouped Bar Chart">Grouped Bar Chart</option>
<option value="Histogram">Histogram</option>
<option selected value="Line Chart">Line Chart</option>
<option value="Pair Plot">Pair Plot</option>
<option value="Pie Chart">Pie Chart</option>
<option value="Scatter Plot">Scatter Plot</option>
<option value="Stacked Area Chart">Stacked Area Chart</option>
<option value="Stacked Bar Chart">Stacked Bar Chart</option>
<option value="Strip Plot">Strip Plot</option>
</select>
</div>
<div class="order-1 md:order-2">
<div class="
inline-flex
p-1
pr-0
bg-rose-100
rounded-lg
overflow-hidden
">
<template x-for="library in libraries">
<label :for="library.id" class="
block
px-2
py-1
rounded-lg
cursor-pointer
hover:bg-rose-400 hover:text-white
mr-1
" :class="selectedLibrary === library.value ? 'bg-rose-500 text-white': ''">
<input type="radio" class="hidden" :id="library.id" :value="library.value" :name="name"
x-model="selectedLibrary" @click="update_repl" />
<div x-text="library.label"></div>
</label>
</template>
</div>
</div>
</div>
<script type='text/javascript'>
function plot_js(json_fig) {
var figure = JSON.parse(json_fig);
var div = document.createElement("div");
div.id = "output-" + (document.querySelectorAll('div[id^="output-"]').length + 1).toString();
document.getElementById("output").appendChild(div);
Plotly.newPlot(div.id, figure.data, figure.layout, {
displayModeBar: false,
});
}
function update_initial_df(df_html) {
var div = document.createElement("div");
var initial_div = document.getElementById("initial-df-output");
div.id = "initial-df-table"
div.innerHTML = df_html;
initial_div.innerHTML = "";
initial_div.appendChild(div);
} {
modeBarButtonsToRemove: ['toImage']
}
</script>
<py-script src="./scripts/script.py" output="initial-df-output"></py-script>
<div id="copy-code-prefix" hidden></div>
<div class="flex flex-row flex-wrap justify-center gap-6 py-5 px-0 md:px-10">
<div class="w-[400px] md:w-[600px]" id="container-code">
<div
class="flex flex-row align-middle justify-between p-4 bg-stone-50 rounded-t-xl border border-stone-200 font-bold text-sm">
<div class="py-1 px-2">
REPL
</div>
<!-- copy to clibpard button -->
<div class="float-right">
<button class="bg-rose-500 hover:bg-rose-400 text-white font-bold py-1 px-2 rounded-lg"
@click="copy_to_clipboard">Copy to clipboard</button>
</div>
</div>
<div class="bg-white rounded-b-xl border border-stone-200 p-4 overflow-x-auto" id="container-repl">
<py-repl std-out="output" id="output-repl">df.head()</py-repl>
</div>
</div>
<div class="w-[400px] md:w-[600px] " id="container-results" x-data="{ tab: 'graph' }">
<div class="py-5 px-4 bg-stone-50 rounded-t-xl border border-stone-200 font-bold text-sm">
Output
</div>
<ul class="flex text-sm font-medium text-stone-400 bg-stone-800 border border-stone-200">
<li class="w-full">
<a href="#" class="inline-flex p-2 w-full group" aria-current="page" :class="{'active text-white bg-rose-600 hover:text-stone-200': tab === 'initial-df',
'hover:border-stone-300 hover:text-stone-300': tab !== 'initial-df' }"
@click.prevent="tab = 'initial-df'">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
class="w-5 h-5 mr-1">
<path fill-rule="evenodd"
d="M.99 5.24A2.25 2.25 0 013.25 3h13.5A2.25 2.25 0 0119 5.25l.01 9.5A2.25 2.25 0 0116.76 17H3.26A2.267 2.267 0 011 14.74l-.01-9.5zm8.26 9.52v-.625a.75.75 0 00-.75-.75H3.25a.75.75 0 00-.75.75v.615c0 .414.336.75.75.75h5.373a.75.75 0 00.627-.74zm1.5 0a.75.75 0 00.627.74h5.373a.75.75 0 00.75-.75v-.615a.75.75 0 00-.75-.75H11.5a.75.75 0 00-.75.75v.625zm6.75-3.63v-.625a.75.75 0 00-.75-.75H11.5a.75.75 0 00-.75.75v.625c0 .414.336.75.75.75h5.25a.75.75 0 00.75-.75zm-8.25 0v-.625a.75.75 0 00-.75-.75H3.25a.75.75 0 00-.75.75v.625c0 .414.336.75.75.75H8.5a.75.75 0 00.75-.75zM17.5 7.5v-.625a.75.75 0 00-.75-.75H11.5a.75.75 0 00-.75.75V7.5c0 .414.336.75.75.75h5.25a.75.75 0 00.75-.75zm-8.25 0v-.625a.75.75 0 00-.75-.75H3.25a.75.75 0 00-.75.75V7.5c0 .414.336.75.75.75H8.5a.75.75 0 00.75-.75z"
clip-rule="evenodd" />
</svg>Initial DataFrame
</a>
</li>
<li class="w-full">
<a href="#" class="inline-flex p-2 w-full group" :class="{'active text-white bg-rose-600 hover:text-stone-200': tab === 'graph',
'hover:border-stone-300 hover:text-stone-300': tab !== 'graph' }"
@click.prevent="tab = 'graph'">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
class="mr-1 w-5 h-5">
<path fill-rule="evenodd"
d="M4.25 2A2.25 2.25 0 002 4.25v11.5A2.25 2.25 0 004.25 18h11.5A2.25 2.25 0 0018 15.75V4.25A2.25 2.25 0 0015.75 2H4.25zM15 5.75a.75.75 0 00-1.5 0v8.5a.75.75 0 001.5 0v-8.5zm-8.5 6a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5zM8.584 9a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5a.75.75 0 01.75-.75zm3.58-1.25a.75.75 0 00-1.5 0v6.5a.75.75 0 001.5 0v-6.5z"
clip-rule="evenodd" />
</svg>
Graph
</a>
</li>
</ul>
<div>
<div class="bg-white rounded-b-xl border-x bg-border-stone-200 p-10 overflow-x-auto" id="output"
:class="{'block': tab === 'graph', 'hidden': tab !== 'graph'}">
</div>
<div class="bg-white rounded-b-xl border-x bg-border-stone-200 p-10 overflow-x-auto"
:class="{'block': tab === 'initial-df', 'hidden': tab !== 'initial-df'}" id="initial-df-output">
</div>
</div>
</div>
</div>
<div class="text-center my-6" id="footer">
<div class="text-blue-600">
<a href="#" class="hover:text-blue-500" id="about">About</a>
|
<a href="https://twitter.com/_dylancastillo" class="hover:text-blue-500">Get in touch</a>
|
<a href="https://github.com/dylanjcastillo/python-dataviz-cookbook/issues" class="hover:text-blue-500">Send
Feedback</a>
</div>
</div>
<div class="hidden overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center"
id="modal-id">
<div class="relative w-auto my-6 mx-auto max-w-2xl overflow-hidden">
<div class="border-0 rounded-lg shadow-lg relative flex flex-col bg-white outline-none focus:outline-none">
<!--header-->
<div
class="flex items-start justify-between p-4 bg-stone-50 rounded-t-xl border border-stone-200 font-bold text-sm">
<h3 class="text-sm font-semibold">
About
</h3>
<button
class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-stone-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center "
id="close-modal">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!--body-->
<div class="relative p-6 flex-auto overflow-y-auto max-h-[500px] mb-4">
<p class="pb-2 text-2xl leading-relaxed text-bgray-800">Why did I develop this cookbook?
</p>
<p class="text-base leading-relaxed text-gray-500">
The answer is simple: there aren't any!
<br><br>
Tbh there are some cheat sheets available but they're usually just a bunch of code that's
difficult to copy and modify as needed.
<br><br>
I thought I could make something more useful: an interactive data
visualization cookbook where you could find what you needed with easy and try the code snippets
right away. Instead of wasting time trying to understand how a piece of code works, you can
simply test it yourself in the browser.
<br><br>
As a data professional, you'll undoubtedly come across pandas, matplotlib, seaborn or plotly at
some point — and learning how to use these library will surely help you in your career. But with
so much functionality, they can be overwhelming for those just getting started.
<br><br>
That's why I created this interactive cookbook. It'll show you how to create basic line
charts, bar charts, stacked area charts, histograms, and other common types of graphs using
pandas, matplotlib, seaborn, and plotly. You can try out the code snippets right in the browser
and adapt them to your own data.
This cookbook is the perfect way to simplify the complexity of
all of these data visualization libraries and quickly get up to speed.
<br><br>
So whether you're just starting out in data science or are looking for a refresher, this
cookbook can be a great asset. Be sure to bookmark it for future reference!
<br><br>
Please reach out if you have <a href="https://twitter.com/_dylancastillo"
class="text-blue-600 hover:text-blue-500">questions</a> or <a
href="https://github.com/dylanjcastillo/python-dataviz-cookbook/issues"
class="text-blue-600 hover:text-blue-500">feedback</a>.
<br><br>
Happy coding!
</p>
</div>
</div>
</div>
</div>
<div class="hidden opacity-25 fixed inset-0 z-40 bg-black" id="modal-id-backdrop"></div>
<div x-data="{ lightbox: false, imgModalSrc : '', imgModalAlt : '', imgModalDesc : '' }">
<div x-show="lightbox"
@lightbox.window="lightbox = true; imgModalSrc = $event.detail.imgModalSrc; imgModalDesc = $event.detail.imgModalDesc;">
<div x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform scale-90"
x-transition:enter-end="opacity-100 transform scale-100"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100 transform scale-100"
x-transition:leave-end="opacity-0 transform scale-90"
class="fixed inset-0 z-50 flex items-center justify-center w-full p-2 overflow-hidden bg-black bg-opacity-75 h-100">
<div @click.away="lightbox = ''" class="">
<img class="" :src="imgModalSrc" :alt="imgModalAlt">
</div>
</div>
</div>
</div>
<script src="./assets/built/index.js"></script>
<script src="https://cdn.usefathom.com/script.js" data-site="XMNWLSRC" defer></script>
</body>
</html>