Skip to main content
100%

Violin Plot

✓ Published0🌍 Public
TTerence Lin
Last edited Apr 6, 2022
Created on Apr 6, 2022
Forked from D3 Starter

This violin plot displays the distribution of Nvidia RTX 3070 restock wait times in minutes across different stores (primarily Amazon), using a smoothed kernel-density-like curve for each chipset group. The chart is built with D3.js v4, reading CSV data and rendering as an SVG. It computes histograms per group via `d3.histogram()`, nests the data with `d3.nest()`, and draws the violin shapes using `d3.area()` with a Catmull-Rom curve for smoothing, with the y-axis fixed from 0 to 60 minutes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Violin Plot + Box Plot v3

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.

AaiMojica10
70% match
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
66% 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
66% 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
65% 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
65% 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
64% 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
64% 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
62% match