Histograms
Draw one histogram of the DataFrame’s columns, or single histogram for Series
A histogram is a representation of the distribution of data. This function groups the values of all given Series in the DataFrame into bins
Examples
Histogram of a Column in a DataFrame
In the example below, we make an histogram from the
Age column in the titanic dataset.React
Browser
1
import { useEffect } from 'react';
2
import './App.css';
3
import { 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['Age'].plot("plot_div").hist()
12
13
}).catch(err => {
14
console.log(err);
15
})
16
}, [])
17
18
return (
19
<div className="App">
20
<header className="App-header">
21
<div id="plot_div"></div>
22
</header>
23
</div>
24
);
25
}
26
27
export default App;
Copied!
1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
<meta charset="UTF-8" />
6
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/bundle.js"></script>
8
9
<title>Document</title>
10
</head>
11
12
<body>
13
<div id="plot_div"></div>
14
15
<div id="plot_div"></div>
16
<script>
17
dfd.readCSV("https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv")
18
.then(df => {
19
20
df['Age'].plot("plot_div").hist()
21
22
}).catch(err => {
23
console.log(err);
24
})
25
</script>
26
</body>
27
28
</html>
Copied!
.png?alt=media)
Customized Histogram plots on DataFrame
React
Browser
1
import { useEffect } from 'react';
2
import './App.css';
3
import { 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 layout = {
12
bargap: 0,
13
bargroupgap: 0.1,
14
title: "Histogram of two columns stacked",
15
xaxis: { title: "Value" },
16
yaxis: { title: "Count" }
17
}
18
19
const sub_df = df.loc({ columns: ["Fare", "Age"] })
20
sub_df.plot("plot_div").hist({ layout })
21
22
}).catch(err => {
23
console.log(err);
24
})
25
}, [])
26
27
return (
28
<div className="App">
29
<header className="App-header">
30
<div id="plot_div"></div>
31
</header>
32
</div>
33
);
34
}
35
36
export default App;
37
a
Copied!
1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
<meta charset="UTF-8">
6
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/bundle.min.js"></script>
8
<title>Document</title>
9
</head>
10
11
<body>
12
13
<div id="plot_div"></div>
14
<script>
15
dfd.readCSV("https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv")
16
.then(df => {
17
18
const layout = {
19
bargap: 0,
20
bargroupgap: 0.1,
21
title: "Histogram of two columns stacked",
22
xaxis: { title: "Value" },
23
yaxis: { title: "Count" }
24
}
25
26
const sub_df = df.loc({ columns: ["Fare", "Age"] })
27
sub_df.plot("plot_div").hist({ layout })
28
29
}).catch(err => {
30
console.log(err);
31
})
32
33
</script>
34
</body>
35
36
</html>
Copied!
.png?alt=media)
Last modified 1mo ago