Danfo.js
Getting Started
API Reference
Contributing Guide
Github
Search…
Danfo.js Documentation
Getting Started
API reference
General Functions
Input/Output
Series
Dataframe
Configuration Options
Plotting
Timeseries Plots
Violin Plots
Box Plots
Tables
Pie Charts
Histograms
Scatter Plots
Bar Charts
Line Charts
Customizing your plots
Groupby
User Guides
Building Data Driven Applications with Danfo.js - Book
Contributing Guide
Release Notes
Powered By
GitBook
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!
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!
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!
To customize your plots, see the
Configuring your plot page
​
Previous
Timeseries Plots
Next
Box Plots
Last modified
1mo ago
Copy link
Contents
Examples
Boxplot for a Series Object
Box plots on a DataFrame
Box plot for selected columns in a DataFrame