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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--danfojs CDN -->
<script src="https://cdn.jsdelivr.net/npm/danfojs@0.1.2/dist/index.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="plot_div"></div>
<script>
s = new dfd.Series([20, 30, 40, 23, 40, 3, 50, 34, 67])
s.plot("plot_div").box()
</script>
</body>
</html>

Box plots on a DataFrame

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--danfojs CDN -->
<script src="https://cdn.jsdelivr.net/npm/danfojs@0.1.2/dist/index.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="plot_div"></div>
<script>
dfd.read_csv("https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv")
.then(df => {
sub_df = df.loc({ columns: ["Age", "Fare"] })
sub_df.plot("plot_div").box()
}).catch(err => {
console.log(err);
})
</script>
</body>
</html>

Box plot for selected columns in a DataFrame

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--danfojs CDN -->
<script src="https://cdn.jsdelivr.net/npm/danfojs@0.1.2/dist/index.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="plot_div"></div>
<script>
dfd.read_csv("https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv")
.then(df => {
df.plot("plot_div").box({x: "Survived", y: "Age"})
}).catch(err => {
console.log(err);
})
</script>
</body>
</html>

Configuring your plots

danfo.js plotting uses Plotly.js as its backend for plotting. This means you have all the configuration, flexibility and interactiveness of Plotly.

All customization on the plot can be passed as an object of key-value pairs to the config parameter. For example:

var layout = {
title: 'A sample plot',
xaxis: {
title: 'X',
},
yaxis: {
title: 'Y',
}
}
df.plot("div_tag").box({layout: layout})

For more configuration options for Box Plots, see the Plotly style doc.