-
Notifications
You must be signed in to change notification settings - Fork 365
/
histogram.js
205 lines (181 loc) · 8.37 KB
/
histogram.js
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
import React from "react";
import TitleAndDescription from "../components/TitleAndDescription";
import Layout from "../components/Layout";
import Container from "react-bootstrap/Container";
import Contact from "../components/Contact";
import Row from "react-bootstrap/Row";
import ChartImageContainer from "../components/ChartImageContainer";
import ChartFamilySection from "../components/ChartFamilySection";
import { Link } from "gatsby";
import { Matplotlib, Seaborn } from "../components/MiscellaneousLogos"
import { Col } from "react-bootstrap";
import CodeChunk from "../components/CodeChunk"
import ChartImage from "../components/ChartImage";
import Spacing from "../components/Spacing";
const chartDescription =
"<p>A <a href='https://www.data-to-viz.com/graph/histogram.html'>Histogram</a> represents the distribution of a numeric variable for one or several groups. The values are split in bins, each bin is represented as a bar. This page showcases many histograms built with python, using both the <code>seaborn</code> and the <code>matplotlib</code> libraries.</p>";
const quickCode = `# library & dataset
import seaborn as sns
df = sns.load_dataset('iris')
# Plot the histogram thanks to the distplot function
sns.distplot( a=df["sepal_length"], hist=True, kde=False, rug=False )
`
const quickCodeMatplotlib = `# library & dataset
import matplotlib.pyplot as plt
hours = [17, 20, 22, 25, 26, 27, 30, 31, 32, 38, 40, 40, 45, 55]
# Initialize layout
fig, ax = plt.subplots(figsize = (9, 9))
#plot
ax.hist(hours, bins=5, edgecolor="black");
`
export default function ViolinPlot() {
return (
<Layout title="Histogram" isTocEnabled seoDescription="A collection of histogram examples made with Python, coming with explanation and reproducible code">
<TitleAndDescription
title="Histogram"
description={chartDescription}
/>
<Container>
<h2 id="Quick (Seaborn)">⏱ Quick start (Seaborn)</h2>
<Row className="align-items-center">
<Col md={6}>
<p><code>Seaborn</code> is definitely the best library to quickly build a histogram thanks to its <code>distplot()</code>.</p><p>Note the importance of the <code>bins</code> parameter: try several values to see which represents your data the best. 🔥</p>
</Col>
<Col md={6}>
<Link to={"/20-basic-histogram-seaborn"}>
<ChartImage imgName="20_Basic_Histogram_seaborn2"
caption="The most basic histogram one can make with python and seaborn" />
</Link>
</Col>
</Row>
<CodeChunk>{quickCode}</CodeChunk>
</Container>
<Spacing />
<Container>
<h2 id="Seaborn"><Seaborn />Histogram charts with <code>Seaborn</code></h2>
<p>
<code>Seaborn</code> is a python library allowing to make better
charts easily. It is well adapted to build histogram thanks to
its <code>distplot</code> function. The following charts will guide you
through its usage, going from a very{" "}
<Link to="">basic histogram</Link> to something much more{" "}
<Link to="">customized</Link>.
</p>
<Row>
<ChartImageContainer
imgName="20_Basic_Histogram_seaborn1"
caption="The most basic histogram with seaborn. It adds a density on top by default"
linkTo="/20-basic-histogram-seaborn"
/>
<ChartImageContainer
imgName="20_Basic_Histogram_seaborn2"
caption="Play with the bin parameter to control the number of bars"
linkTo="/20-basic-histogram-seaborn"
/>
<ChartImageContainer
imgName="21_Display_Rug_and_distribution_on_hist1"
caption="Remove the density chart on top of the seaborn histogram"
linkTo="/21-control-rug-and-density-on-seaborn-histogram"
/>
<ChartImageContainer
imgName="21_Display_Rug_and_distribution_on_hist2"
caption="Add rug on top of the histogram"
linkTo="/21-control-rug-and-density-on-seaborn-histogram"
/>
<ChartImageContainer
imgName="21_Display_Rug_and_distribution_on_hist3"
caption="Customize the rug: color, size and more"
linkTo="/21-control-rug-and-density-on-seaborn-histogram"
/>
<ChartImageContainer
imgName="21_Display_Rug_and_distribution_on_hist4"
caption="Customize the appearance of the density chart displayed on top of the histogram"
linkTo="/21-control-rug-and-density-on-seaborn-histogram"
/>
<ChartImageContainer
imgName="24_Histogram_with_boxplot_on_top"
caption="How to split the chart window to display a boxplot on top of the histogram"
linkTo="/24-histogram-with-a-boxplot-on-top-seaborn"
/>
<ChartImageContainer
imgName="25_Histogram_of_several_variables1"
caption="Compare the distribution of several groups on the same chart"
linkTo="/25-histogram-with-several-variables-seaborn"
/>
<ChartImageContainer
imgName="25_Histogram_of_several_variables2"
caption="Use small multiple to compare the distribution of several groups"
linkTo="/25-histogram-with-several-variables-seaborn"
/>
<ChartImageContainer
imgName="82_seaborn_jointplot1"
caption="Histogram can be added around a scatterplot to show each variable distributions"
linkTo="/82-marginal-plot-with-seaborn"
/>
<ChartImageContainer
imgName="82_seaborn_jointplot6"
caption="Histogram can be added around a 2d density chart to show x and y variable distributions"
linkTo="/82-marginal-plot-with-seaborn"
/>
</Row>
</Container>
<Spacing />
<Container>
<h2 id="Quick (matplotlib)"><Matplotlib/> Quick start (Matplotlib)</h2>
<Row className="align-items-center">
<Col md={6}>
<p><Link to="/matplotlib">Matplotlib</Link> can also build decent histograms easily. It provides a <code>hist()</code> function that
accept a vector of numeric values as input.</p>
<p>It also provides all the options you can think of to customize the binning and the genreral appearance.</p>
</Col>
<Col md={6}>
<Link to={"/basic-histogram-in-matplotlib"}>
<ChartImage imgName="basic-histogram-in-matplotlib"
caption="The most basic histogram one can make with python and matplotlib" />
</Link>
</Col>
</Row>
<CodeChunk>{quickCodeMatplotlib}</CodeChunk>
</Container>
<Spacing />
<Container>
<h2 id="Matplotlib"><Matplotlib />Histograms with <code>Matplotlib</code></h2>
<p>
As usual <Link to="/matplotlib">matplotlib</Link> is perfectly skilled to build nice histogram, but require
some more work camparing to <Link to="/seaborn">seaborn</Link> to get a good looking figure.
</p>
<p>The examples below should help you to get started with matplotlib histograms. They go from
a very <Link to="/basic-histogram-in-matplotlib">basic version</Link> and then show how to customize it, like adding <Link to="/basic-histogram-in-matplotlib">annotation</Link>.
</p>
<Row>
<ChartImageContainer
imgName="basic-histogram-in-matplotlib"
caption="The most basic histogram with matplotlib."
linkTo="/basic-histogram-in-matplotlib"
/>
<ChartImageContainer
imgName="basic-histogram-in-matplotlib2"
caption="Reduce chart opacity and add annotation (median represented in vertical line)"
linkTo="/basic-histogram-in-matplotlib"
/>
<ChartImageContainer
imgName="density-mirror-histogram"
caption="Mirror density chart to compare the distribution of 2 variables"
linkTo="/density-mirror"
/>
</Row>
</Container>
<Spacing />
<div className="greySection" id="related">
<Container>
<ChartFamilySection chartFamily="distribution" />
</Container>
</div>
<Spacing />
<Container>
<Contact />
</Container>
<Spacing />
</Layout >
);
}