Skip to main content
Log in
A

alan489671

@alan489671·8 public vizzes

Loading thumbnail…

Iris Parallel Coordinate Plot

The Iris Parallel Coordinate Plot visualizes the classic Iris dataset across four numeric dimensions—sepal length, sepal width, petal length, and petal width—with each flower colored by species. Users can drag any vertical axis horizontally to reorder the dimensions, which dynamically redraws the polylines and axis positions with a 350ms transition. Built with D3 v5, it uses `d3.line` for path generation, `d3.scalePoint` for ordinal axis placement, `d3.drag` for interaction, and an SVG renderer with a legend showing the three Iris species.

Nov 21, 2022
Loading thumbnail…

Fork of Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing how sepal and petal measurements relate across three flower species. Users select which measurement maps to the X and Y axes via dropdown menus, with points color-coded by species and animated transitions when selections change. Built with D3 v5, it uses `csv()`, `scaleLinear()`, `axisBottom()`, `axisLeft()`, and `transition().duration()` to render SVG circles and axes.

Nov 21, 2022
Loading thumbnail…

Fork of Fork of Parallel Coordinate Plot

The visualization uses a parallel coordinate plot to display Fisher’s Iris dataset, with each flower sample drawn as a semi-transparent polyline across four axes for sepal length, sepal width, petal length, and petal width. The lines are colored by species, with a legend distinguishing setosa, versicolor, and virginica. The code uses d3.scaleLinear, d3.scalePoint, and d3.line for rendering, with SVG paths and axes built via d3.axisLeft. Data is loaded as CSV and numeric values are converted using the unary plus operator.

Nov 21, 2022
Loading thumbnail…

Fork of Fork of Parallel Coordinate Plot

This parallel coordinate plot visualizes the Iris dataset, showing four measured features for three flower species. Each sample appears as a semi-transparent polyline linking its values across vertical axes, colored by species. Users can drag axis labels horizontally to reorder dimensions, which re-sorts the data columns and animates the polylines to reflect the new axis sequence using smooth transitions. The visualization is built with D3 v5, using `scalePoint` for axis positioning, `line` for creating the polylines, and custom drag handlers to manage interactive reordering.

Oct 21, 2022
Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

This interactive scatter plot of the classic Iris dataset lets users explore relationships between sepal and petal measurements by selecting which features appear on the x- and y-axes via dropdown menus. Points are colored by species using `d3.scaleOrdinal` and rendered as SVG circles with `d3.axisBottom` and `d3.axisLeft` grid lines. The visualization uses D3 v5 in a React dropdown component, reading CSV data from a remote GitHub source, and includes a fixed legend and axis labels.

Oct 19, 2022
Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic classification using an ordinal scale derived from `d3.scaleOrdinal` and the `schemeSpectral` color scheme. Clicking a legend item filters the map, dimming non-matching countries and increasing the stroke width of the highlighted one. Hovering over the legend dims other items. The map uses `d3.geoNaturalEarth1` projection, `d3.geoPath` for rendering, and `d3.zoom` for panning. Data comes from the World Atlas TopoJSON and TSV files, processed with `topojson.feature`.

Oct 19, 2022
Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between sepal width and sepal length for iris flowers, using data from the UCI Machine Learning Repository. The code employs D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to load data, map values to coordinates, and render the axes and circles as SVG elements. The visualization is generated from the raw IRIS dataset, with circles styled red and semi-transparent.

Sep 30, 2022
Loading thumbnail…

iris scatter plot

This interactive scatter plot visualizes the Iris dataset from UCI’s Machine Learning Repository, letting users select any two columns for the x- and y-axes via dropdown menus. Built with D3 v5, it uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render axes, while points animate inward with `transition().duration()`. The SVG updates dynamically on menu changes, showing relationships among measurements like petal and sepal dimensions.

Sep 29, 2022