Box Plots
Make a box plot from DataFrame columns.
Make a box-and-whisker plot from DataFrame columns, optionally grouped by some other columns. A box plot is a method for graphically depicting groups of numerical data through their quartiles.

Examples

Boxplot for a Series Object

React
Browser
App.jsx
1
import { useEffect } from 'react';
2
import './App.css';
3
import { Series } from "danfojs-nightly";
4
5
function App() {
6
7
useEffect(() => {
8
const s = new Series([20, 30, 40, 23, 40, 3, 50, 34, 67]);
9
s.plot("plot_div").box();
10
}, [])
11
12
return (
13
<div className="App">
14
<header className="App-header">
15
<div id="plot_div"></div>
16
</header>
17
</div>
18
);
19
}
20
21
export default App;
Copied!
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/bundle.js"></script>
7
<title>Document</title>
8
</head>
9
10
<body>
11
<div id="plot_div"></div>
12
13
<div id="plot_div"></div>
14
<script>
15
const s = new dfd.Series([20, 30, 40, 23, 40, 3, 50, 34, 67]);
16
s.plot("plot_div").box();
17
</script>
18
</body>
19
</html>
Copied!

Box plots on a DataFrame

React
Browser
App.jsx
1
import { useEffect } from 'react';
2
import './App.css';
3
import { Series, readCSV } from "danfojs-nightly";
4
5
function App() {
6
7
useEffect(() => {
8
readCSV("https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv")
9
.then(df => {
10
11
const sub_df = df.loc({ columns: ["Age", "Fare"] })
12
sub_df.plot("plot_div").box()
13
14
}).catch(err => {
15
console.log(err);
16
})
17
}, [])
18
19
return (
20
<div className="App">
21
<header className="App-header">
22
<div id="plot_div"></div>
23
</header>
24
</div>
25
);
26
}
27
28
export default App;
Copied!
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/bundle.js"></script>
7
<title>Document</title>
8
</head>
9
10
<body>
11
<div id="plot_div"></div>
12
13
<div id="plot_div"></div>
14
<script>
15
dfd
16
.readCSV(
17
"https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv"
18
)
19
.then((df) => {
20
const sub_df = df.loc({ columns: ["Age", "Fare"] });
21
sub_df.plot("plot_div").box();
22
})
23
.catch((err) => {
24
console.log(err);
25
});
26
</script>
27
</body>
28
</html>
Copied!

Box plot for selected columns in a DataFrame

React
Browser
App.jsx
1
import { useEffect } from 'react';
2
import './App.css';
3
import { Series, readCSV } from "danfojs-nightly";
4
5
function App() {
6
7
useEffect(() => {
8
readCSV("https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv")
9
.then(df => {
10
11
df.plot("plot_div").box({
12
config: {
13
x: "Survived", y: "Age"
14
},
15
layout: {
16
title: "Box Plot"
17
}
18
})
19
}).catch(err => {
20
console.log(err);
21
})
22
}, [])
23
24
return (
25
<div className="App">
26
<header className="App-header">
27
<div id="plot_div"></div>
28
</header>
29
</div>
30
);
31
}
32
33
export default App;
Copied!
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/bundle.js"></script>
7
<title>Document</title>
8
</head>
9
10
<body>
11
<div id="plot_div"></div>
12
13
<div id="plot_div"></div>
14
<script>
15
dfd
16
.readCSV(
17
"https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv"
18
)
19
.then((df) => {
20
df.plot("plot_div").box({ config: { x: "Survived", y: "Age" } });
21
})
22
.catch((err) => {
23
console.log(err);
24
});
25
</script>
26
</body>
27
</html>
Copied!
To customize your plots, see the Configuring your plot page
Last modified 4mo ago