KDE Joyplot w/ rugplot x axis

100%

KDE Joyplot w/ rugplot x axis

✓ Published0🌍 Public

Last edited Jan 18, 2018

Created on Jan 18, 2018

A KDE joyplot displays the smoothed probability distributions of three chemical measurement groups (BmdA, BmdB, BmdC) as stacked density curves, with a rug plot along the x-axis for each group. The chart highlights distribution shape, spread, and differences across the three response variables. The visualization is built with D3 v4 and Underscore.js, using `d3.area` with Catmull-Rom curve interpolation to render each KDE path, `kernelDensityEstimator` and `kernelEpanechnikov` functions to compute densities, and orange tick marks beneath each curve to show individual data points. The SVG output uses a band scale for the y-axis grouping and linear scales for both x and density values.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Joyplot Update Pattern

This example demonstrates a joyplot update pattern, visualizing the distribution of three chemical response metrics (BmdA, BmdB, BmdC) across 50 chemicals using stacked kernel density estimates and rug plots. Each row in the SVG represents one metric, with a filled density curve drawn using D3’s area generator and a rug plot of individual data points marked as orange lines. The y-axis uses a band scale to separate the three distributions, while the x-axis maps the measured values. The code uses d3.v4 with SVG rendering, and includes an interactive tooltip library via d3-tip, though no explicit interaction is shown.

JJoshAddington

83% match

Loading thumbnail…

Untitled

This example visualizes the distribution of probability estimates from eight verbal uncertainty phrases (such as “Almost Certainly” and “Almost No Chance”) using kernel density estimation. Each smoothed density curve is colored with a viridis scale based on the group mean, revealing differences in central tendency and spread across categories. The visualization uses D3 v4 to load CSV data from GitHub, compute the means, and render the densities as SVG paths. The kernel density estimator applies an Epanechnikov kernel, while axes, gridlines, and labels are drawn with `d3.axisBottom`, `d3.axisLeft`, and the `d3.scaleSequential` with `d3.interpolateViridis`.

SSimone

69% 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

68% match

Loading thumbnail…

Joyplot

This joyplot shows the distribution of sports and leisure activity participation across the day, with each activity rendered as a filled, layered density curve. The x-axis maps time of day in 5-minute increments, while the y-axis encodes the proportion of participants. Each activity—such as Running—is represented by a separate row, with curves offset vertically and partially overlapping to create the classic “joyplot” ridgeline effect. The SVG rendering uses smooth paths to show the peaks and troughs of participation, making it easy to compare daily rhythms like morning and evening workouts, midday hobbies, and late-night outings. The chart is built with D3 v4 and the underlying data comes from the American Time Use Survey.

JJoshAddington

67% match

Loading thumbnail…

Sample Distribution (Histogram/Kernel/CDF)

This interactive tool visualizes the statistical distribution of a numeric dataset using multiple complementary representations: a histogram, kernel density estimate, cumulative distribution function (CDF), and a rug plot. Users can adjust histogram bin width and toggle between linear and log2 value scales, while enabling the CDF adds a secondary y-axis. The visualization renders with SVG, supports zooming via click-drag on the x-axis, and is animated with transitions. It uses D3.js for scales, layouts, and SVG manipulation, with data loaded from a JSON file.

MMorganhaoyu

67% match

Loading thumbnail…

Sample Distribution (Histogram/Kernel/CDF)

MMorganhaoyu

67% match

Loading thumbnail…

Untitled

A kernel density estimation chart displays the distribution of price data from a CSV file, with a smooth green curve showing density across a 0-1000 price range. The visualization uses D3 v6 methods including `scaleLinear`, `axisBottom`, `axisLeft`, and a custom `kernelDensityEstimator` with an Epanechnikov kernel. The SVG rendering is built within a React framework, with axes positioned via margins, and the density curve generated using `d3.line` with `curveBasis` smoothing.

Ssubratanp

67% match

Loading thumbnail…

weighted KDE + Voronoï maps

This visualization combines a weighted kernel density estimation (KDE) with Voronoi maps to depict the distribution of waiting times between eruptions of the Old Faithful geyser. The KDE curve and histogram bins are rendered with D3.js, while each bin is filled with a Voronoi map whose cell areas encode the weight of individual data points. The weighted KDE is computed using a custom `kernelDensityEstimator` with a scaled Epanechnikov kernel, and the Voronoi maps are generated via the `d3.voronoiMap` plugin, which is adapted to maintain fixed x-coordinates during computation. Interactive controls allow toggling of the standard and weighted overlays, and hovering reveals details about individual cells or bins.

KKcnarf

65% match