Skip to main content
SimilarExport ZIP
100%

Hello VX

✓ Published0🌍 Public
Mmirojanuario
Last edited Mar 29, 2020
Created on Mar 29, 2020
Forked from Hello VX

This example shows a tooltip-interactive violin and box plot for five categories of generated statistics, rendered as an SVG with a gradient background and horizontal pattern fill for the violin densities. Built with React and the VX library, it uses `@vx/stats` for the `ViolinPlot` and `BoxPlot` components, `@vx/scale` for band and linear scales, and `@vx/pattern` for the line texture. Hovering over box plot elements triggers a tooltip via `withTooltip` from `@vx/tooltip`, displaying min, max, or full box plot statistics. Data comes from `genStats` in `@vx/mock-data`.

AI-generated description

React starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello VX

A gradient-filled SVG chart combines violin and box plots for five groups of generated statistics. The visualization uses React with @vx components, including ViolinPlot and BoxPlot, to display distributions alongside quartile summaries. Tooltips appear when hovering over box plot elements, revealing min, max, and median values via the withTooltip higher-order component. Data comes from genStats mock data, with scales created by scaleBand and scaleLinear.

CCurran Kelleher
91% match
Loading thumbnail…

Hello VX

This example shows a gradient-background chart combining violin plots with overlaid box plots for five groups of generated statistical data. The visualization uses `@vx/stats` components (`ViolinPlot`, `BoxPlot`) with scales from `@vx/scale`, and renders as SVG. Hovering over box plot elements triggers tooltips via `@vx/tooltip`, revealing min, max, or full quartile statistics. Data comes from `@vx/mock-data`’s `genStats` function, styled with `@vx/gradient` and `PatternLines`.

AAreum Jo
91% match
Loading thumbnail…

Cars Report

A dashboard displays a violin plot and box plot for five car data groups, showing distribution ranges, medians, quartiles, and outliers. Rendered as an SVG with React, it uses @vx/scale for band and linear scales, @vx/stats for the ViolinPlot and BoxPlot components, and @vx/gradient for background coloring. Hover interactions on box plot elements trigger tooltips via @vx/tooltip, revealing specific statistical values. The data is generated from @vx/mock-data's genStats function.

AAvinash kumar
75% 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
67% match
Loading thumbnail…

Fork of Interactive barchart

This example shows an interactive histogram of humidity data, rendered as vertical bars in an SVG using D3 v5 within a React setup. The bars are colored cornflower blue and turn purple on hover, with a dashed line marking the mean humidity. A tooltip appears on mouseover, displaying the exact humidity range and day count for each bin. The chart also includes labeled axes and a styled tooltip with a pointer arrow.

Cchalasanigayaetiri@gmail.com
67% 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
67% 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
66% match
Loading thumbnail…

VCtAxes

This example presents a two-panel visualization of Valorant Champions Tour player statistics from a CSV dataset. A horizontal bar chart compares performance metrics for different agents, while an animated scatter plot shows the correlation between selected metrics, such as kills, deaths, and assists. Interactive dropdown menus let users switch the metric displayed in the bar chart and choose which variables to plot on the scatter plot's X and Y axes. The visualization uses D3 v7 with ES6 modules, including `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `transition().duration()` for the animated circles.

Ddaniel
66% match