Violin Plot + Box Plot v2

100%

Violin Plot + Box Plot v2

✓ Published0🌍 Public

Last edited Jun 17, 2019

Created on Jun 17, 2019

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.

AI-generated description

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

Features:

Responsive design, chart size adjusts with screen
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)

See this live on bl.ocks.org here.

Previous version: Reusable Violin + Box Plot

forked from <a href='http://bl.ocks.org/jonpage/'>jonpage</a>'s block: <a href='http://bl.ocks.org/jonpage/b1733c893d9de56bf45f'>Violin Plot + Box Plot v2</a>

mit Licensed

Similar vizzes

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…

Boxplot testing

This example demonstrates interactive box plots that visualize the distribution of selected numeric columns, optionally grouped by a categorical variable through dropdown menus. It shows quartiles, medians, and outliers, with tooltips revealing exact values on hover. The visualization is built with React and D3 v5, using `d3.nest()` to compute summary statistics and `d3.scaleLinear` for the y-axis. Rendered as SVG with animated transitions, box plots and outlier circles respond to mouse events, highlighting the interquartile range while dimming others.

SSchmittYannic

76% match

Loading thumbnail…

test2

This example presents interactive boxplots for four data groups, allowing viewers to switch between linear and log10 scales and toggle individual columns. The boxplot elements—including IQR boxes, median lines, whiskers, and outlier points—are rendered as SVG shapes with animation. The visualization is built with D3 v5, using `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisLeft` to compute and draw the statistical summaries. A tooltip appears on mouseover of the median line, while Bootstrap buttons and custom checkboxes manage the scale and column selections.

SSchmittYannic

76% match

Loading thumbnail…

Boxplot in D3

This boxplot visualization displays the distribution of a dataset through a series of vertical box-and-whisker plots, with each plot summarizing key statistics such as the median, quartiles, and potential outliers. The chart is rendered using the D3.js library, specifically leveraging `d3.select` to append SVG elements and `d3.scaleLinear` for the y-axis mapping. Data values are drawn using SVG `rect` and `line` elements, while axes are annotated via `d3.axisLeft`. The example emphasizes standard boxplot conventions, with whiskers extending to the most extreme data points within 1.5 times the interquartile range, and individual outliers plotted as circle markers.

RRiya Mathur

75% match

Loading thumbnail…

Boxplots V2

This example shows a set of boxplots for multiple numerical columns from a small dataset. Users can toggle checkboxes to include or exclude columns, and the chart updates with an animated transition. The visualization is built with React and D3 v5, using `d3.quantile` to compute quartiles, `d3.scaleLinear` and `d3.scaleBand` for axes, and SVG with a custom tooltip that displays summary statistics on hover. Data is hardcoded in the script.

SSchmittYannic

75% match

Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This example demonstrates four chart types—scatter plot, pie chart, line chart, and area chart—built with D3.js and rendered as SVG. Each chart visualizes a cricket dataset fetched as a CSV from a GitHub gist, mapping runs against strike rates, and runs across years. The code uses `d3.csvParse`, `d3.scaleLinear`, `d3.pie`, `d3.arc`, `d3.line`, and `d3.area` to construct the visualizations. All charts are appended directly to the page body, with scales and color schemes defined inline for each plot.

Ssdarsi2404@gmail.com

75% match

Loading thumbnail…

Visualizing Distributions

This example compares four chart types for visualizing a single data distribution: swarm plot, pile plot, histogram, and boxplot. Using d3.forceChart, the swarm and pile plots position individual data points with a force-directed layout, while the histogram aggregates counts into bins via d3.layout.histogram, and the boxplot summarizes quartiles using d3.scale.quantile. All charts render as SVG within a shared grid, sharing the same y-axis scale for direct comparison. The underlying data comes from 700 random log-normal values.

MMorganhaoyu

75% match

Loading thumbnail…

Table

This interactive visualization gallery presents a collection of chart types, including bar charts, pie charts, line charts, and scatter plots, all built using D3.js v5. Each chart is rendered as an SVG element and can be selected from a dropdown menu, with the underlying data displayed in a preview table. The example uses various D3 APIs such as `d3.scaleBand`, `d3.axisBottom`, and `d3.pie` to create the visualizations, with some charts featuring animation and tooltip interactions. Data is loaded from a CSV file and processed by the dashboard module.

JJoker-tr

75% match