-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
191 lines (184 loc) · 10.4 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
<!DOCTYPE html>
<html>
<head>
<!-- Primary Meta Tags -->
<title>Pandas Cheat Sheet for Data Science</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="Pandas Cheat Sheet">
<meta name="description"
content="A free and interactive cheat sheet with code samples from pandas, Python's most popular data analysis library.">
<meta name="keywords" content="pandas cheatsheet, pandas cheat sheet, pandas">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://pandas.dylancastillo.co/">
<meta property="og:title" content="Pandas Cheat Sheet">
<meta property="og:description"
content="A free and interactive cheat sheet with code samples from pandas, Python's most popular data analysis library.">
<meta property="og:image" content="./assets/images/meta-img.jpg">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://pandas.dylancastillo.co/">
<meta property="twitter:title" content="Pandas Cheat Sheet">
<meta property="twitter:description"
content="A free and interactive cheat sheet with code samples from pandas, Python's most popular data analysis library.">
<meta property="twitter:image"
content="https://dylanjcastillo.github.io/pandas-cheatsheet/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/pyscript.js"></script>
<py-env>
- matplotlib
- numpy
- pandas
</py-env>
</head>
<body body class="min-h-screen bg-bgray-200">
<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">Pandas Cheat Sheet</h1>
<div class="flex flex-row flex-wrap gap-4 justify-center">
<div>
<select id="category"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5">
<option selected="">Choose a category</option>
<option value="aggregations">Aggregate data</option>
<option value="join_df">Join DataFrames</option>
<option value="manipulate">Manipulate data</option>
<option value="reshape">Reshape data</option>
<option value="subset_cols">Subset columns</option>
<option value="subset_rows">Subset rows</option>
<option value="subset_rows_cols">Subset rows & columns</option>
<option value="summarize">Summarize data</option>
</select>
</div>
<div>
<select id="operation"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5">
<option selected="">Choose an operation</option>
</select>
</div>
</div>
<py-script src="./scripts/script.py"></py-script>
<div class="grid gap-6 md:grid-cols-2 px-6 my-4">
<div class="container-main">
<details class="group open:rounded-none" open>
<summary
class="p-4 bg-gray-50 rounded-xl group-open:rounded-b-none group-open:rounded-t-xl border border-gray-200 font-bold text-xs">
REPL
</summary>
<div class="bg-white border-x bg-border-gray-200 pt-2 pb-6 overflow-x-auto" id="container-repl">
<py-repl std-out="output" std-err="errors" id="output-repl">df.head()</py-repl>
</div>
</details>
</div>
<div class="container-main">
<details class="group open:rounded-none" open>
<summary
class="p-4 bg-gray-50 rounded-xl group-open:rounded-b-none group-open:rounded-t-xl border border-gray-200 font-bold text-xs">
Warnings & Errors
</summary>
<div id="errors" class="min-h-[16px] bg-white border-x bg-border-gray-200 overflow-x-auto">
</div>
</details>
</div>
<div class="container-main">
<details class="group open:rounded-none" open>
<summary
class="p-4 bg-gray-50 rounded-xl group-open:rounded-b-none group-open:rounded-t-xl border border-gray-200 font-bold text-xs">
Initial
DataFrame
</summary>
<div id="initial" class="min-h-[16px] bg-white border-x bg-border-gray-200 px-4 py-2 overflow-x-auto">
</div>
</details>
</div>
<div class="container-main">
<details class="group open:rounded-none" open>
<summary
class="p-4 bg-gray-50 rounded-xl group-open:rounded-b-none group-open:rounded-t-xl border border-gray-200 font-bold text-xs">
Output
</summary>
<div id="output" class="min-h-[16px] bg-white border-x bg-border-gray-200 px-4 py-2 overflow-x-auto">
</div>
</details>
</div>
</div>
<py-repl std-out="initial" class="hidden" id="initial-repl">df_initial.head()</py-repl>
<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/pandas-cheatsheet/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-gray-50 rounded-t-xl border border-gray-200 font-bold text-xs">
<h3 class="text-sm font-semibold">
About
</h3>
<button
class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-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 do we need another Pandas cheat sheet?
</p>
<p class="text-base leading-relaxed text-gray-500">
The answer is simple: most cheat sheets are terrible!
<br><br>
They're just PDFs with a bunch of code that's difficult to copy and modify as needed.
<br><br>
I thought I could make something more useful for the community: an interactive pandas cheat
sheet where you could find and try the code snippets you needed right away. Instead of
attempting to decipher how a piece of code works, you can simply test it in the browser.
<br><br>
As a data professional, you'll undoubtedly come across pandas at some point — and learning how
to use this library is critical for your career. But with so much functionality, pandas can be
overwhelming for those just getting started.
<br><br>
This is why I've created this interactive pandas cheat sheet, covering everything from
generating subsets of rows and columns to reshaping data, dealing with duplicates and missing
data, aggregating data, joining data frames, and more. With code snippets that you can try
yourself in the browser, this cheat sheet is the perfect way to simplify the complexity of
pandas 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 pandas
cheat sheet will be an invaluable resource. 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/pandas-cheatsheet/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>
<script src="./assets/built/index.js" defer></script>
<script type="text/javascript">
function toggleModal(modalID) {}
</script>
</body>
</html>