Skip to main content
100%

Violin Plot + Box Plot v3

✓ Published0🌍 Public
AaiMojica10
Last edited Dec 2, 2016
Created on Dec 2, 2016

This interactive chart combines violin plots with box plots to visualize the distribution of a numeric value across multiple year categories from a CSV dataset. The SVG-based visualization, built with D3 v3, uses kernel density estimation for accurate violin shapes and supports responsive resizing. It features modular chart types including box, notched box, violin, beeswarm, bean, and trendline variants, with extensive customization options for components like median lines, outliers, and violin resolution. The animation highlights transitions between chart types and style options, while CSS styling allows easy theme adjustments.

AI-generated description

An implementation of a reusable responsive distribution chart. Based on the concept outlined in Mike Bostocks blog post Towards Reusable Charts.

See this live on bl.ocks.org here.

Features:

  • Responsive design, chart size adjusts with screen <Open in new window to see example.>
  • Easily styled in CSS
  • Modular design supporting 3 types of charts
    • Box Plot
    • Notched Box Plot
    • Violin Plot
    • Beeswarm Plot
    • Bean Plot
    • Trendlines
  • Each chart type supports multiple options and styles such as
    • Box width
    • Show/Hide any component (median line, mean line, whiskers outliers, etc...)
    • Scatter Outliers
    • Notch style (traditional angled vs 90 degree cutouts)
    • Violin resolution and interpolation
    • Scatter style (random vs organized beeswarm)

Updated in V3:

  • Support for clamping the ViolinPlot or forcing it to extend beyond the normal range to create a closed Violin
  • New option to adjust the number of y axis ticks
  • Now uses Kernel Density Estimation intstead of histogram interpolation for more accurate violin plots.

Previous version: Reusable Violin + Box Plot V2

forked from <a href='http://bl.ocks.org/asielen/'>asielen</a>'s block: <a href='http://bl.ocks.org/asielen/92929960988a8935d907e39e60ea8417'>Violin Plot + Box Plot v3</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Violin Plot + Box Plot v2

This example showcases a responsive distribution chart that can display box plots, notched box plots, violin plots, bean plots, and beeswarm or scatter plots on the same dataset. Built with D3 v3, the visualization renders in SVG and supports interactive toggling between chart types via buttons. The chart uses a custom `makeDistroChart` function to modularly manage plot components, with options for styling, outlier display, and trend lines. Data is loaded from a CSV file with year and value columns, and the visualization includes tooltips and CSS-based responsive sizing.

AAjayyy
93% match
Loading thumbnail…

histogram and violin plotbox

This example combines histograms and violin plots to visualize gene expression distributions across multiple samples. The chart displays each gene as a rotated, mirrored histogram with a step-after interpolation, alongside a box plot showing quantiles and the mean. Built with D3 v3 and SVG, it uses `d3.scale.ordinal` and `d3.scale.linear` for axes, and `d3.quantile` for statistical summaries. The data comes from a JavaScript file containing sample expression values for each gene.

11Cr18Ni9
79% match
Loading thumbnail…

Final Project Violin Plot

This visualization shows the distribution of salaries across four experience levels, with each violin plot representing the density of salary data for entry-level, mid-level, senior, and executive roles. The chart includes a y-axis labeled in abbreviated dollar amounts and annotations displaying the mean salary for each category. The visualization is built with React and D3.js v6, using `d3.csv` to load salary data from a GitHub gist and `kernelDensityEstimator` with an Epanechnikov kernel to compute density estimates. The SVG rendering employs `d3.area` with Catmull-Rom curves to draw the violin shapes, while `d3.axisLeft` and `d3.axisBottom` create the axes. Interactive hover effects change the fill color of individual violins to orange.

DDuc Pham
78% match
Loading thumbnail…

Fork of Final Project Violin Plot

This example shows a violin plot of salary distributions across four experience levels (Entry-level, Mid-level, Senior, Executive) for data science roles, with mean salary annotations overlaid on each distribution. The visualization uses D3 v6 with an SVG renderer, employing `d3.rollups` to aggregate salary data, a kernel density estimator with an Epanechnikov kernel, and `d3.area` with Catmull-Rom curves to draw the symmetric violins. Data is loaded from a CSV hosted on GitHub, with interactive hover states that highlight each violin in orange.

DDuc Pham
78% match
Loading thumbnail…

Fork of Final Project Violin Plot

This visualization shows how reported salary distributions vary across four experience levels, using a violin plot to display the density of earnings for entry-level, mid-level, senior, and executive roles. The chart encodes salary on the vertical axis and experience category on the horizontal axis, with each violin’s width representing the estimated probability density of salaries within that group. The code builds the plot using D3.js v7, computing kernel density estimates via `kernelDensityEstimator` and the Epanechnikov kernel, and renders the shapes as SVG paths smoothed with `d3.curveCatmullRom`. Data is loaded from a remote CSV file containing survey responses.

DDuc Pham
76% match
Loading thumbnail…

Untitled

A violin plot displays the distribution of sepal length for three Iris species, with each species represented by a mirrored density curve. The chart is rendered as an SVG using D3 v4, loading data from a CSV file. The code uses `d3.histogram` to bin values, `d3.nest` for grouping by species, and `d3.area` with `d3.curveCatmullRom` to draw the smoothed violin shapes. Axes are created with `d3.axisLeft` and `d3.axisBottom`, and a linear scale maps bin counts to widths.

Ddaniel
75% match
Loading thumbnail…

Fork of Final Project Violin Plot

This visualization shows how salary distributions vary across four experience levels—Entry-level, Mid-level, Senior, and Executive—in a dataset of employee salaries. It uses kernel density estimation to create a smooth violin plot for each group, displaying the full range of salary values on the y-axis using a linear scale. The chart is rendered as an SVG using D3 v4, with axes and a title added directly to the SVG canvas. Data is loaded from an external CSV file and processed with d3.nest and d3.area to generate the symmetric density shapes.

DDuc Pham
75% match
Loading thumbnail…

Kernel Density Estimation to Violin Plot

This example starts with a histogram and kernel density estimation for the Old Faithful eruption wait times from R's faithful dataset, then morphs the density curve into a violin plot. The animation transitions the curve from a line into a mirrored area, scaling it to half height, and fades the histogram and axis. Built with D3 v3, it uses `d3.svg.area`, `d3.layout.histogram`, and `transition.attr` to animate the shape, demonstrating how a density estimate becomes a violin plot.

KKcnarf
74% match