Violin Plots
Make a violin plot from DataFrame columns, optionally grouped by some other columns. A violin plot is a method for graphically depicting groups of numerical data through their quartiles. See also Box Plot​
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").violin()
10
​
11
}, [])
12
​
13
return (
14
<div className="App">
15
<header className="App-header">
16
<div id="plot_div"></div>
17
</header>
18
</div>
19
);
20
}
21
​
22
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.min.js"></script>
8
<title>Document</title>
9
</head>
10
​
11
<body>
12
​
13
<div id="plot_div"></div>
14
<script>
15
​
16
s = new dfd.Series([20, 30, 40, 23, 40, 3, 50, 34, 67])
17
s.plot("plot_div").violin()
18
19
</script>
20
</body>
21
​
22
</html>
Copied!
.png?alt=media)
Box plots on a DataFrame
React
Browser
App.jsx
1
import { useEffect } from 'react';
2
import './App.css';
3
import { readCSV } from "danfojs-nightly";
4
​
5
function App() {
6
​
7
useEffect(() => {
8
readCSV(
9
"https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv"
10
)
11
.then((df) => {
12
const sub_df = df.loc({ columns: ["Age", "Fare"] });
13
sub_df.plot("plot_div").violin();
14
})
15
.catch((err) => {
16
console.log(err);
17
});
18
}, [])
19
​
20
return (
21
<div className="App">
22
<header className="App-header">
23
<div id="plot_div"></div>
24
</header>
25
</div>
26
);
27
}
28
​
29
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.min.js"></script>
8
<title>Document</title>
9
</head>
10
​
11
<body>
12
​
13
<div id="plot_div"></div>
14
<script>
15
​
16
dfd.read_csv("https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv")
17
.then(df => {
18
​
19
sub_df = df.loc({ columns: ["Age", "Fare"] })
20
sub_df.plot("plot_div").violin()
21
​
22
}).catch(err => {
23
console.log(err);
24
})
25
​
26
</script>
27
</body>
28
​
29
</html>
Copied!
.png?alt=media)
Box plot for selected columns in a DataFrame
React
Browser
App.jsx
1
import { useEffect } from 'react';
2
import './App.css';
3
import { readCSV } from "danfojs-nightly";
4
​
5
function App() {
6
​
7
useEffect(() => {
8
readCSV(
9
"https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv"
10
)
11
.then((df) => {
12
df.plot("plot_div").violin({ config: { x: "Survived", y: "Age" }, layout: { title: "Violin Plot" } });
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
df.plot("plot_div").violin({ config: { x: "Survived", y: "Age" } });
21
})
22
.catch((err) => {
23
console.log(err);
24
});
25
</script>
26
</body>
27
</html>
Copied!
.png?alt=media)
Last modified 1mo ago