Hello VX

100%

✓ Published1🌍 Public

Last edited Oct 11, 2019

Created on Oct 11, 2019

Forked from 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`.

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

93% match

Loading thumbnail…

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`.

Mmirojanuario

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…

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

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

Loading thumbnail…

SVG

This example shows two labeled line charts, “Home” and “Away,” tracking a numeric value across eight time steps, with hover interactions highlighting each line and its points. The visualization is built with React and D3 v5, using `d3.scaleLinear` for axes, `d3.line` for path generation, and SVG elements for rendering. Circles mark individual data points and show their values on hover, while lines increase in opacity and stroke width on mouseover. The chart includes bottom and left axes generated with `d3.axisBottom` and `d3.axisLeft`, and all transitions use D3’s `.transition()` and `.duration()` methods.

VVishwas2629

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

65% match

Loading thumbnail…

NVD3

This example demonstrates an interactive multi-bar chart built with the NVD3 library, rendered through Vue.js and rCharts. The visualization uses SVG with animation to display categorical data across grouped bars, featuring hover effects that change bar opacity and display tooltips with detailed values. The chart includes standard NVD3 components such as axes, legend, and brush functionality, all styled through the included CSS. The base64-encoded stylesheet defines the visual appearance, including tooltip formatting, bar coloring, and SVG element styling. The implementation leverages NVD3's built-in chart types for grouped bar displays, with the rCharts wrapper providing the R-to-JavaScript bridge.

JJverma

65% match