Comment on page
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
In the example below, we make an histogram from the
Age
column in the titanic dataset.React
Browser
import { useEffect } from 'react';
import './App.css';
import { readCSV } from "danfojs-nightly";
function App() {
useEffect(() => {
readCSV("https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv")
.then(df => {
df['Age'].plot("plot_div").hist()
}).catch(err => {
console.log(err);
})
}, [])
return (
<div className="App">
<header className="App-header">
<div id="plot_div"></div>
</header>
</div>
);
}
export default App;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/bundle.js"></script>
<title>Document</title>
</head>
<body>
<div id="plot_div"></div>
<div id="plot_div"></div>
<script>
dfd.readCSV("https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv")
.then(df => {
df['Age'].plot("plot_div").hist()
}).catch(err => {
console.log(err);
})
</script>
</body>
</html>
.png?alt=media&token=9267b3dd-f968-4376-9236-0efb84871963)
React
Browser
import { useEffect } from 'react';
import './App.css';
import { readCSV } from "danfojs-nightly";
function App() {
useEffect(() => {
readCSV("https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv")
.then(df => {
const layout = {
bargap: 0,
bargroupgap: 0.1,
title: "Histogram of two columns stacked",
xaxis: { title: "Value" },
yaxis: { title: "Count" }
}
const sub_df = df.loc({ columns: ["Fare", "Age"] })
sub_df.plot("plot_div").hist({ layout })
}).catch(err => {
console.log(err);
})
}, [])
return (
<div className="App">
<header className="App-header">
<div id="plot_div"></div>
</header>
</div>
);
}
export default App;
a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/bundle.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="plot_div"></div>
<script>
dfd.readCSV("https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv")
.then(df => {
const layout = {
bargap: 0,
bargroupgap: 0.1,
title: "Histogram of two columns stacked",
xaxis: { title: "Value" },
yaxis: { title: "Count" }
}
const sub_df = df.loc({ columns: ["Fare", "Age"] })
sub_df.plot("plot_div").hist({ layout })
}).catch(err => {
console.log(err);
})
</script>
</body>
</html>
.png?alt=media&token=21652915-f2f9-4c26-a969-5717ecf18bc5)
Last modified 1yr ago