Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Ddaniel
Last edited Nov 30, 2023
Created on Nov 30, 2023
Forked from Hello VizHub

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.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example shows violin plots of sepal length distributions for three iris species, using a kernel density estimate to depict the shape of each group's data. The code loads the Iris dataset via `d3.csv`, then applies `d3.nest()` to group by species and computes densities with a custom `kernelDensityEstimator` using the Epanechnikov kernel. It renders the resulting smoothed areas as SVG paths with `d3.area()` and `d3.curveCatmullRom`, positioned using `d3.scaleBand` and `d3.scaleLinear` scales.

Ddaniel
90% match
Loading thumbnail…

Untitled

This example visualizes the distribution of sepal length across three iris species using a box plot with overlaid individual data points. Each species is represented by a vertical box showing the interquartile range, whiskers extending to the minimum and maximum values, and a line marking the median. Individual observations from the iris dataset are plotted as white circles with random jitter to reduce overlap. The visualization is rendered as an SVG using d3.v4, with summary statistics computed via `d3.nest` and `d3.quantile`, and scales and axes created using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom` and `d3.axisLeft`.

Jjimmyjs1607
84% match
Loading thumbnail…

Untitled

This example visualizes the Iris flower dataset, plotting sepal length against petal length with points colored by species (setosa, versicolor, virginica). It uses d3.scaleLinear for the x and y axes, d3.scaleOrdinal for categorical colors, and d3.axisBottom/axisLeft with tickSize to create a ggplot2-style gray background with white gridlines. The SVG circles are appended via d3.selectAll and .enter(), with data loaded through d3.csv. The chart includes axis labels and a legend-free design, emphasizing the three species clusters through distinct color ranges.

SSheela2930
83% match
Loading thumbnail…

Untitled

This visualization presents a scatter plot matrix of the Iris flower dataset, with each pair of the four numeric variables (sepal and petal length and width) displayed as separate small multiples. The diagonal cells show histograms of each variable’s distribution, while off-diagonal cells show scatter plots colored by species using `d3.scaleOrdinal`. Built with `d3.scalePoint` to position each cell, `d3.scaleLinear` for axes, and `d3.axisBottom`/`d3.axisLeft` for ticks, it uses `d3.extent` to compute per-cell domains and the `d3.histogram` API to bin data for the diagonal plots. Data is loaded as CSV from a remote URL, rendered as SVG circles and rectangles.

Sstanley.shen2003@gmail.com
82% match
Loading thumbnail…

Untitled

This example visualizes the Iris dataset by plotting sepal length against sepal width as colored circles, with red, green, and blue representing the three species. A scatterplot with labeled axes reveals the distribution and clustering of measurements. The code loads data via `d3.csv` from a GitHub gist, uses `d3.scaleLinear` to map coordinates, and renders axes with `d3.axisBottom` and `d3.axisLeft`. Each point is an SVG circle appended to a D3-selected body element, with fill colors assigned conditionally based on species.

Bbhanuteja1807@gmail.com
82% match
Loading thumbnail…

Untitled

This interactive parallel coordinate plot visualizes the Iris flower dataset, showing the relationships between numerical measurements (sepal width, sepal length, petal width, petal length) across three species. Each flower is represented as a polyline colored by species (setosa, versicolor, virginica) using an ordinal color scale, with a legend indicating the categories. Built with D3 v3, the visualization uses `d3.svg.axis` and `d3.svg.line` for rendering SVG, and supports axis dragging via `d3.behavior.drag` to reorder dimensions, while the background context lines fade during interaction. The data is loaded from an external CSV file.

Ppychen01
82% match
Loading thumbnail…

iris

This visualization displays the classic Iris flower dataset as a scatterplot, mapping sepal length and width to the x and y axes, petal length to point size, and species to color. The rendering uses D3 v4’s SVG output. Data loading relies on `d3.csv` for parsing the CSV file, while scales are built with `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal`, plus axes from `d3.axisBottom` and `d3.axisLeft`. A categorical legend, built with circle elements, identifies the three species (setosa, versicolor, virginica), and a tooltip div is appended to the body but never made visible.

GGTHamonville
82% match
Loading thumbnail…

Plot Template v9.21.20

A scatter plot of Iris flower measurements shows sepal length against sepal width, with each point colored by species origin. The plot includes labeled axes, gridlines, and a title. Built with D3 v6, the visualization uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.scaleOrdinal` to map categorical species values to colors. Data is loaded as CSV from the uiuc-cse GitHub repository and rendered as SVG circles with fixed radius and opacity.

Eegrebing
82% match