diff --git a/src/pages/boxplot.js b/src/pages/boxplot.js
index cbc26d71b0..1e4c8af735 100644
--- a/src/pages/boxplot.js
+++ b/src/pages/boxplot.js
@@ -223,9 +223,15 @@ export default function Boxplot() {
linkTo="/509-introduction-to-swarm-plot-in-matplotlib"
/>
diff --git a/src/pages/candlestick.js b/src/pages/candlestick.js
index a9d148ae3e..9452a1217d 100644
--- a/src/pages/candlestick.js
+++ b/src/pages/candlestick.js
@@ -7,7 +7,7 @@ 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 { Matplotlib, Seaborn , Plotly} from '../components/MiscellaneousLogos';
import { Button, Col } from 'react-bootstrap';
import CodeChunk from '../components/CodeChunk';
import ChartImage from '../components/ChartImage';
@@ -132,6 +132,48 @@ export default function Boxplot() {
diff --git a/src/pages/histogram.js b/src/pages/histogram.js
index 22e0bfa1dc..d4f7f5c0e3 100644
--- a/src/pages/histogram.js
+++ b/src/pages/histogram.js
@@ -14,8 +14,27 @@ import ChartImage from '../components/ChartImage';
import Spacing from '../components/Spacing';
import { SEO } from '../components/SEO';
-const chartDescription =
- "A Histogram 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 seaborn
and the matplotlib
libraries.
";
+const chartDescription = (
+ <>
+
+ A Histogram{' '}
+ 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 the{' '}
+ most popular libraries like seaborn
and{' '}
+ matplotlib
.
+
+
+ Examples start with very simple, beginner-friendly histograms and
+ progressively increase in complexity. At the end of the page, some
+ polished & publication-ready histograms are provided, ready to be
+ used in your next project 🔥!
+
+ >
+);
const quickCode = `# library & dataset
import seaborn as sns
@@ -236,6 +255,11 @@ export default function Histogram() {
caption="Use small multiple to compare the distribution of several groups or several variables"
linkTo="/506-histogram-with-small-mutliples"
/>
+
diff --git a/src/pages/line-chart.js b/src/pages/line-chart.js
index 7bf9851974..c6a1e20ad7 100644
--- a/src/pages/line-chart.js
+++ b/src/pages/line-chart.js
@@ -276,13 +276,18 @@ export default function LinePlot() {
-
+
Line chart with Pandas
- If you are looking for easy-to-build line charts
- with Python, pandas is the
- library for you.
+ Pandas offers a simple and efficient way
+ to create line charts directly from DataFrames, eliminating the
+ need for complex data manipulation.
+
+
+ Its integration with Matplotlib
+ allows for extensive customization, making it a versatile choice for
+ quick data visualization tasks.
-
+
diff --git a/src/pages/matplotlib.js b/src/pages/matplotlib.js
index 99e95a3018..7a9b9de434 100644
--- a/src/pages/matplotlib.js
+++ b/src/pages/matplotlib.js
@@ -265,6 +265,11 @@ export default function Matplotlibs() {
caption="Control the height of the matplotlib title"
linkTo="/190-custom-matplotlib-title"
/>
+
@@ -317,6 +322,11 @@ export default function Matplotlibs() {
caption="Annotate with an equation"
linkTo="/193-annotate-matplotlib-chart"
/>
+
@@ -408,6 +418,11 @@ export default function Matplotlibs() {
caption="Increase the top margin to fit a title"
linkTo="/192-about-matplotlib-margins"
/>
+
diff --git a/src/pages/pandas.js b/src/pages/pandas.js
index 6172466c46..58a0afdb48 100644
--- a/src/pages/pandas.js
+++ b/src/pages/pandas.js
@@ -5,8 +5,9 @@ import Container from 'react-bootstrap/Container';
import Contact from '../components/Contact';
import Row from 'react-bootstrap/Row';
import ChartFamilySection from '../components/ChartFamilySection';
+import ChartImage from '../components/ChartImage';
import { Link } from 'gatsby';
-import { Plotly } from '../components/MiscellaneousLogos';
+import { Pandas } from '../components/MiscellaneousLogos';
import { Col } from 'react-bootstrap';
import CodeChunk from '../components/CodeChunk';
import Spacing from '../components/Spacing';
@@ -16,13 +17,44 @@ import ChartImageContainer from '../components/ChartImageContainer';
const chartDescription = (
<>
- Beyond its powerful data manipulation capabilities, Pandas offers
- convenient plotting methods, enabling users to visualize data directly
- from DataFrame and Series objects.
+ Pandas is a popular open-source Python
+ library used for data manipulation and analysis. It provides data structures and functions
+ that make working with structured data, such as tabular data (like Excel
spreadsheets or
+ SQL
tables), easy and intuitive.
+
+
+ Although not best known for this functionality, Pandas can be used to create graphs and visualize
+ data, thanks to its lightweight syntax and matplotlib functions.
>
);
+const quickCode = `# library
+import pandas as pd
+import matplotlib.pyplot as plt
+
+# Create data
+values=[12, 11, 9, 13, 14, 16, 14, 15, 18, 17, 19, 20]
+df=pd.DataFrame({'x': range(1,13), 'y': values })
+
+# plot
+df.plot('x', 'y')
+plt.show()
+`;
+
+const plotApi = `df.plot('x', 'y', kind='line')
+plt.show()
+`;
+
+const funcnameApi = `df.line('x', 'y')
+plt.show()
+`;
+
+const plotFuncnameApi = `df.plot.line('x', 'y')
+plt.show()
+`;
+
+
export default function Plotlys() {
return (
- This section is under construction and will be available soon.
+ ⏱ Quick start
+
+
+
+ Pandas
is the most famous python data
+ manipulation and cleaning library. However, it can also be used to
+ create charts and graphs. Pandas plotting features are a wrapper
+ around the matplotlib{' '}
+ library, which is the most popular python library for data visualization.
+
+
+ The plot
function is the most basic function to
+ create a chart with pandas. It is a wrapper around the{' '}
+ matplotlib.pyplot.plot
function.
+
+
+
+
+
+
+
+
+ {quickCode}
+
+
+
+
+
+
+
+ Three distinct syntaxes
+
+
+ There are 3 ways to build a chart with pandas: the{' '}
+ plot
method, the function name
method
+ (like line, bar or hist) and the plot + function name
method.
+
+
+ ➡️ plot method
+
+
+ In this case, we have to specify the kind
of chart we
+ want to create. The plot
method is a wrapper around the{' '}
+ matplotlib.pyplot.plot
function. The kind
{' '}
+ argument is used to specify the type of chart we want to create.
+
+ {plotApi}
+
+
+
+ ➡️ function name method
+
+
+ The function name method is a bit more straightforward. We just have
+ to call the right function name to create the chart we want. Matplotlib has
+ various functions to create different types of charts. For example, the
+ line
function is used to create line charts.
+
+
+ {funcnameApi}
+
+
+
+
+ ➡️ plot + function name method
+
+
+ This method is a combination of the previous two. We use the{' '}
+ plot
method and need the function name
+ right after it.
+
+
+ {plotFuncnameApi}
+
+
+
+
+
+ The function name
method is the most straightforward and
+ the one we recommend. Most posts on the gallery use this method.
+
+
+
+
+
+
+
+
+
+ Chart examples with Pandas
+
+
+ Pandas offers a wide range of nice charts. Here is a selection of
+ examples that you can find on the gallery. Click on the images to see the code!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -60,70 +240,6 @@ export default function Plotlys() {
);
}
-const quickCode = `# Load plotly
-import plotly.graph_objects as go
-
-# Sample data
-x = [1.5, 2.9, 3, 4.2, 5.6]
-y = [2.2, 13.3, 4.4, 55.3, 52.1]
-
-# Initialize a figure
-fig = go.Figure()
-
-# Add the scatter trace
-fig.add_trace(go.Scatter(
- x=x, # Variable in the x-axis
- y=y, # Variable in the y-axis
- mode='markers', # This explicitly states that we want our observations to be represented by points
-))
-
-# Show
-fig.show()
-`;
-
-const codeInstall = `pip install plotly`;
-const saveCode = `fig.write_html("the/path/to/chart-name.html")`;
-const embedCode = `
`;
-const plotlyExpressCode = `# import the plotly express library
-import plotly.express as px
-# Some dummy data
-categories = ['A', 'B', 'C', 'D', 'E']
-values = [15, 22, 18, 12, 28]
-
-# Plot
-fig = px.bar(
- x=categories,
- y=values,
-)
-
-fig.show()
-`;
-
-const plotlyGoCode = `# import the plotly graph objects lib
-import plotly.graph_objects as go
-
-# Some dummy data
-categories = ['A', 'B', 'C', 'D', 'E']
-values = [15, 22, 18, 12, 28]
-
-# Create a bar chart using the Graph Object API
-fig = go.Figure(data=[go.Bar(x=categories, y=values)])
-
-# Update layout
-fig.update_layout(
- title="Simple Bar Chart",
- xaxis_title="Categories",
- yaxis_title="Values")
-
-
-fig.show()
-`;
diff --git a/src/pages/scatter-plot.js b/src/pages/scatter-plot.js
index 84dc0d30de..7f92ede60f 100644
--- a/src/pages/scatter-plot.js
+++ b/src/pages/scatter-plot.js
@@ -340,6 +340,11 @@ export default function ScatterPlot() {
caption="How to compute and add a linear regression to a scatterplot with Python and matplotlib"
linkTo="/scatterplot-with-regression-fit-in-matplotlib"
/>
+
diff --git a/src/pages/statistics.js b/src/pages/statistics.js
index e33d73258f..56b3d5e128 100644
--- a/src/pages/statistics.js
+++ b/src/pages/statistics.js
@@ -112,6 +112,36 @@ export default function ViolinPlot() {
+
+ Hypothesis testing
+
+ Statistical hypothesis testing is a key technique in the realm of
+ data analysis.
+
+ The posts below explain how to display the results of your hypothesis
+ tests on your graphs, so as to represent your results in the most elegant
+ way possible.
+
+
+ We'll use the scipy library to run the tests and matplotlib
+ to display the results.
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/waffle-chart.js b/src/pages/waffle-chart.js
index b97edf0866..14b1889924 100644
--- a/src/pages/waffle-chart.js
+++ b/src/pages/waffle-chart.js
@@ -127,6 +127,21 @@ export default function Waffle() {
caption="Waffle chart with additionnal grouping and title"
linkTo="/541-waffle-chart-with-additionnal-grouping"
/>
+
+
+
diff --git a/static/graph/534-highly-customized-layout.png b/static/graph/534-highly-customized-layout.png
index 5d46bae5d9..b31e2709d9 100644
Binary files a/static/graph/534-highly-customized-layout.png and b/static/graph/534-highly-customized-layout.png differ
diff --git a/static/graph/551-student-t-test-visualization-1.png b/static/graph/551-student-t-test-visualization-1.png
new file mode 100644
index 0000000000..8d6be6738e
Binary files /dev/null and b/static/graph/551-student-t-test-visualization-1.png differ
diff --git a/static/graph/551-student-t-test-visualization-2.png b/static/graph/551-student-t-test-visualization-2.png
new file mode 100644
index 0000000000..3d8ec885b3
Binary files /dev/null and b/static/graph/551-student-t-test-visualization-2.png differ
diff --git a/static/graph/552-table-combined-with-plot.png b/static/graph/552-table-combined-with-plot.png
new file mode 100644
index 0000000000..8c24b85eb9
Binary files /dev/null and b/static/graph/552-table-combined-with-plot.png differ
diff --git a/static/graph/553-intro-candle-stick-plotly.png b/static/graph/553-intro-candle-stick-plotly.png
new file mode 100644
index 0000000000..b2b984d9f3
Binary files /dev/null and b/static/graph/553-intro-candle-stick-plotly.png differ
diff --git a/static/graph/554-custom-candle-stick-plotly.png b/static/graph/554-custom-candle-stick-plotly.png
new file mode 100644
index 0000000000..57cd463842
Binary files /dev/null and b/static/graph/554-custom-candle-stick-plotly.png differ
diff --git a/static/graph/555-candle-stick-with-moving-average-plotly.png b/static/graph/555-candle-stick-with-moving-average-plotly.png
new file mode 100644
index 0000000000..9582e077df
Binary files /dev/null and b/static/graph/555-candle-stick-with-moving-average-plotly.png differ
diff --git a/static/graph/558-waffle-bar-chart-1.png b/static/graph/558-waffle-bar-chart-1.png
new file mode 100644
index 0000000000..7b418624f2
Binary files /dev/null and b/static/graph/558-waffle-bar-chart-1.png differ
diff --git a/static/graph/558-waffle-bar-chart-2.png b/static/graph/558-waffle-bar-chart-2.png
new file mode 100644
index 0000000000..434ae95da2
Binary files /dev/null and b/static/graph/558-waffle-bar-chart-2.png differ
diff --git a/static/graph/558-waffle-bar-chart-3.png b/static/graph/558-waffle-bar-chart-3.png
new file mode 100644
index 0000000000..2ce2d4af62
Binary files /dev/null and b/static/graph/558-waffle-bar-chart-3.png differ
diff --git a/static/graph/quick-pandas.png b/static/graph/quick-pandas.png
new file mode 100644
index 0000000000..026385ad66
Binary files /dev/null and b/static/graph/quick-pandas.png differ
diff --git a/static/interactiveCharts/candlestick-plotly-basic-2.html b/static/interactiveCharts/candlestick-plotly-basic-2.html
new file mode 100644
index 0000000000..f48c223541
--- /dev/null
+++ b/static/interactiveCharts/candlestick-plotly-basic-2.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/interactiveCharts/candlestick-plotly-basic.html b/static/interactiveCharts/candlestick-plotly-basic.html
new file mode 100644
index 0000000000..ae327259c0
--- /dev/null
+++ b/static/interactiveCharts/candlestick-plotly-basic.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/interactiveCharts/candlestick-plotly-custom-2.html b/static/interactiveCharts/candlestick-plotly-custom-2.html
new file mode 100644
index 0000000000..963684722c
--- /dev/null
+++ b/static/interactiveCharts/candlestick-plotly-custom-2.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/interactiveCharts/candlestick-plotly-custom.html b/static/interactiveCharts/candlestick-plotly-custom.html
new file mode 100644
index 0000000000..32e981b909
--- /dev/null
+++ b/static/interactiveCharts/candlestick-plotly-custom.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/interactiveCharts/candlestick-plotly-moving-average-2.html b/static/interactiveCharts/candlestick-plotly-moving-average-2.html
new file mode 100644
index 0000000000..50e0391aaf
--- /dev/null
+++ b/static/interactiveCharts/candlestick-plotly-moving-average-2.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/interactiveCharts/candlestick-plotly-moving-average-3.html b/static/interactiveCharts/candlestick-plotly-moving-average-3.html
new file mode 100644
index 0000000000..7376f2402b
--- /dev/null
+++ b/static/interactiveCharts/candlestick-plotly-moving-average-3.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/interactiveCharts/candlestick-plotly-moving-average.html b/static/interactiveCharts/candlestick-plotly-moving-average.html
new file mode 100644
index 0000000000..6817f0db06
--- /dev/null
+++ b/static/interactiveCharts/candlestick-plotly-moving-average.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+
\ No newline at end of file