Skip to main content
SimilarExport ZIP
100%

test2

✓ Published0🌍 Public
SSchmittYannic
Last edited Aug 16, 2020
Created on Aug 16, 2020

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.

AI-generated description

BarChart code from https://jsfiddle.net/matehu/w7h81xz2/ and Code of Toolkit from http://bl.ocks.org/1Cr18Ni9/bfadecc96183c48d13b7b90bcf358a61

MIT Licensed

Similar vizzes

Loading thumbnail…

test 3

This example shows an interactive boxplot of a small dataset with two columns, allowing users to toggle between a linear and a log10 scale for the y-axis. The visualization uses D3 v5 within a React framework, rendering SVG elements with animated transitions. Key D3 APIs include `scaleLinear`, `scaleLog`, `scaleBand`, `quantile`, and axis components like `axisBottom` and `axisLeft`. The code computes quartiles and whiskers, and removes outlier circles when switching scales. A tooltip appears on hover over the boxplot.

SSchmittYannic
89% 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
85% 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
84% match
Loading thumbnail…

first boxplot

This example demonstrates a classic boxplot visualization of a numeric dataset, highlighting the median, interquartile range, whiskers, and any potential outliers. The chart computes the five-number summary using `d3.quantile` and draws the box, median line, and whiskers as SVG shapes, with circles marking values beyond 1.5 times the interquartile range. The y-axis is rendered with `d3.axisLeft`, and the scaling is handled by `d3.scaleLinear`. The dataset is hardcoded in the script, and the entire visualization is built with React and D3 v5, outputting to SVG.

SSchmittYannic
80% match
Loading thumbnail…

Boxplot mit Buttons

This example shows a boxplot of a fixed dataset, with buttons to toggle between a linear and a base-10 logarithmic scale for the y-axis. It highlights how the choice of scale affects the visual representation of quartiles, median, and whiskers, while also demonstrating out-of-scale outliers. The visualization is built with React and D3 v5, using `d3.quantile` for summary statistics, `d3.scaleLinear` and `d3.axisLeft` for the axes, and SVG transitions to animate the boxplot's redraw when the scale changes.

SSchmittYannic
80% match
Loading thumbnail…

multiple boxplots with Scale changing buttons and Deselection options through checkboxes... toolkit broken

This example displays multiple boxplots for four categories of numeric data, with controls to switch the y-axis between linear and log10 scales. Users can toggle entire categories on and off using dynamically generated checkbox labels. The visualization renders as SVG and uses d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis. A tooltip is partially implemented but not functional; the code references d3.v5 and is adapted from an external bar chart and toolkit example.

SSchmittYannic
80% match
Loading thumbnail…

test

This example presents a multi-panel dashboard for exploring artist data, including a circular barplot that visualizes the distribution of music genres for a selected artist, with interactive tooltips and hover effects. Additional plots display language information derived from field arrays. The visualization uses D3 version 6, employing scales such as `scaleBand` and `scaleRadial` along with the `d3.arc` function to generate the circular bars. Data is fetched asynchronously from a REST API, and elements are rendered using SVG with mouse event handlers for interactivity.

JJuliette
76% match
Loading thumbnail…

Fork of first boxplot

This visualization shows a single boxplot of a small dataset, with the median line, interquartile range box, and whiskers extending to the most extreme non-outlier points. Outliers beyond the 1.5×IQR fence are rendered as small circles. The chart is built with D3 v5, using `d3.scaleLinear` for the y-axis, `d3.quantile` to compute quartiles and median, and `d3.axisLeft` for the tick labels. The box, whiskers, and outlier circles are drawn as SVG elements within a React application.

Ddaniel
76% match