-
Notifications
You must be signed in to change notification settings - Fork 8
Expand file tree
/
Copy pathmaking_figures.html
More file actions
296 lines (191 loc) · 7.39 KB
/
making_figures.html
File metadata and controls
296 lines (191 loc) · 7.39 KB
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
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
<!DOCTYPE html>
<html>
<head>
<title>figures</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="fonts/quadon/quadon.css">
<link rel="stylesheet" href="fonts/gentona/gentona.css">
<link rel="stylesheet" href="slides_style.css">
<script type="text/javascript" src="assets/plotly/plotly-latest.min.js"></script>
</head>
<body>
<textarea id="source">
name:opening
## Making Better Figures in Python
Jaewon Chung | Johns Hopkins University
[Jupyter Notebook](https://nbviewer.jupyter.org/github/neurodata/talks/blob/master/making_figures.ipynb)
<img src="images/neurodata_purple.png" style="height:250px; float:right;"/>
<br><br><br><br><br><br><br><br><br><br>
<!--
<img src="images/funding/jhu_bme_blue.png" STYLE="HEIGHT:95px;"/>
-->
.foot[[j1c@jhu.edu](mailto:j1c@jhu.edu) | <http://neurodata.io/talks/> | [@j1chung](https://twitter.com/j1chung)]
---
### Jovo's Checklist for Figures
- Guidelines for how figures should look for publication
- Cover code to help meet guidelines
.footnote[Checklist Link = [Bits and Brains](https://bitsandbrains.io/2018/09/08/figures.html)]
---
### Matplotlib
- Useful for making publication ready figures
- Ultimate flexibility, difficult to learn
- Documentation is lengthy
.footnote[Talk Link = [neurodata.io/talks/making_figures.html](neurodata.io/talks/making_figures.html)]
--
### Seaborn
- Built on top of Matplotlib
- Many parameters are set
- Handy functions for making figures look great
.footnote[Talk Link = [neurodata.io/talks/making_figures.html](neurodata.io/talks/making_figures.html)]
---
### Anatomy of a Matplotlib Figure
- Figure object : container for Axes objects
- Axes object : container for all plotting elements, axis, etc.
<div style="text-align:center">
<img src="images/making_figures/anatomy.png" style="height:400px; float:center;" />
</div>
.footnote[Figure from [Matplotlib Tutorial](https://github.com/rougier/matplotlib-tutorial#figures-subplots-axes-and-ticks)]
---
### plt.subplots()
- Utility wrapper for single and multipanel plots
- Some useful arguments
- figsize : Figure dimension (width, height) in inches.
- nrows : # of rows of subplots
- ncols : # of cols of subplots
- constrained_layout : Removes as much empty space as possible between subplots
- Returns a Figure object and array of Axes objects with shape (ncols, nrows)
<br>
<p style="text-align:center;font-size:33px">
fig, ax = plt.subplots(ncols=2, figsize=(10, 5), constrained_layout=True)
</p>
---
### plt.subplots()
<div style="text-align:center">
<img src="images/making_figures/subplots.png" style="height:400px; float:center;" />
</div>
.footnote[Figure from [Matplotlib Examples](https://matplotlib.org/gallery/subplots_axes_and_figures/gridspec_and_subplots.html#sphx-glr-gallery-subplots-axes-and-figures-gridspec-and-subplots-py)]
---
### Example Figure
<p style="text-align:center;font-size:29px">
fig, ax = plt.subplots(figsize=(10, 6))<br>
ax.scatter(X, Y)
</p>
<br>
<div style="text-align:center">
<img src="images/making_figures/example.png" style="height:300px; float:center;" />
</div>
---
### Text Legibility (#6)
- Use seaborn's context manager
- Automatically scales all font sizes
<br><br><br>
<p style="text-align:center;font-size:43px">
import seaborn as sns
sns.set_context("talk")
</p>
---
### Text Legibility (#6)
Without seaborn's context
<div style="text-align:center">
<img src="images/making_figures/context_off.png" style="height:220px; float:center;" />
</div>
---
### Text Legibility (#6)
With seaborn's context
<div style="text-align:center">
<img src="images/making_figures/context_on.png" style="height:220px; float:center;" />
</div>
---
### Multipanel plots - shared axis (#11)
- Both x-axis and y-axis can be set to share the same range, ticks, and scale.
- Can be set to "row", "col", or True (all axes objects share same range, ticks, and scale).
- Helps comparisons when range might differ
<br><br><br>
<p style="text-align:center;font-size:30px">fig, axes = plt.subplots(ncols=2, nrows=2, sharey=True, sharex=True)</p>
---
### Multipanel plots - shared axis (#11)
Without shared x and y-axis
<div style="text-align:center">
<img src="images/making_figures/shared_axis_off.png" style="height:480px; float:center;" />
</div>
---
### Multipanel plots - shared axis (#11)
With shared x and row-wise shared y-axis
<div style="text-align:center">
<img src="images/making_figures/shared_axis_on.png" style="height:480px; float:center;" />
</div>
---
### Figure and Axis (#4 + #5)
- ax.set_title("Insert Title Here") - title placed right above axes
- fig.suptitle("Insert Title Here") - larger and placed above all axes titles
- ax.set_xlabel("Insert Axis Label") - sets the x-axis label
- ax.set_ylabel("Insert Axis Label") - sets the y-axis label
--
<br>
<div style="text-align:center">
<img src="images/making_figures/titles.png" style="height:250px; float:center;" />
</div>
---
### Color maps (#3)
- Use diverging color bars only when appropriate
- seaborn has "palette" or "cmap", matplotlib has "cmap" arguments
- [List of colormaps ](https://matplotlib.org/tutorials/colors/colormaps.html)
--
<div style="text-align:center">
<img src="images/making_figures/colorbars.png" style="height:300px; float:center;" />
</div>
---
class: middle
# .center[Other useful bits]
---
### Saving figures
Use savefig() method in Figure object.
Useful arguments:
- bbox_inches='tight' - saves the tighest bounding box of the entire images
- dpi=300 - default is 72, which is low
- fname - end the file with desired
<p style="text-align:center;font-size:35px">fig.savefig(fname="output.png", dpi=300, bbox_inches='tight')</p>
---
### Latex for Matplotlib
- Can use latex for text if available on computer
<br><br><br>
<p style="text-align:center;font-size:35px">
import matplotlib<br>
matplotlib.rcParams ['text.usetex'] = True
</p>
---
### Latex for Matplotlib
<br>
<div style="text-align:center">
<img src="images/making_figures/latex.png" style="height:300px; float:center;" />
</div>
.footnote[Figure from [Matplotlib Examples](https://matplotlib.org/gallery/text_labels_and_annotations/tex_demo.html)]
---
### Moving legends
- Legends are placed within subplots by default
- Legends can be moved outside
- Shown in [Jupyter notebook](https://nbviewer.jupyter.org/github/neurodata/talks/blob/master/making_figures.ipynb) Example 1
</textarea>
<!-- <script src="https://gnab.github.io/remark/downloads/remark-latest.min.js"></script> -->
<script src="remark-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/contrib/auto-render.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css">
<script type="text/javascript">
var options = {};
var renderMath = function () {
renderMathInElement(document.body);
// or if you want to use $...$ for math,
renderMathInElement(document.body, {
delimiters: [ // mind the order of delimiters(!?)
{ left: "$$", right: "$$", display: true },
{ left: "$", right: "$", display: false },
{ left: "\\[", right: "\\]", display: true },
{ left: "\\(", right: "\\)", display: false },
]
});
}
var slideshow = remark.create(options, renderMath);
</script>
</body>
</html>