Yi-Qing

@vigi229·8 public vizzes

Fork of Iris Parallel Corrdinate Plots

A parallel coordinate plot visualizes the Iris dataset, with each flower’s four measurements drawn as a polyline across four vertically scaled axes. Hovering a line highlights all lines of the same class in its color while dimming others. Users can drag any axis horizontally to reorder dimensions, with polylines and axes animating to the new layout. Built with d3.csv, d3.scalePoint, d3.scaleLinear, d3.line, d3.axisLeft, and d3.drag, the SVG renders semi-transparent colored strokes per species.

Sep 20, 2023

Loading thumbnail…

Fork of Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, allowing users to compare any two of four flower measurements (sepal/petal length/width) via dropdown menus. Points are color-coded by species, with a legend and animated transitions (using D3’s `transition().duration(1000)`) when axes change. The visualization uses D3 v5 to load CSV data, compute linear scales, render SVG axes with `axisBottom` and `axisLeft`, and bind data to circles. Animated positional updates highlight distribution differences between flower classes.

Sep 18, 2023

Loading thumbnail…

Test：Iris Scatter Plot with selection

This scatter plot compares sepal length and sepal width for the three Iris species in the classic Fisher dataset, using color-coded circles with a corresponding legend. The visualization is rendered as an SVG using D3 v7 (v7.8.5), with linear scales, axes, and ticks generated via `scaleLinear`, `axisBottom`, and `axisLeft`. Data is loaded from a local CSV file, and each point’s position maps to the measured values. The plot includes grid lines, axes labels, and a title, with circles colored by species using `scaleOrdinal`.

Sep 18, 2023

Loading thumbnail…

Iris Scatter Plot with selection

This example displays the classic Iris dataset as a scatter plot, mapping sepal length and sepal width for three flower species. Each species is distinguished by color, with a legend box explaining the color mapping. The visualization is built with D3 v7, loading data via `d3.csv` and rendering as SVG. Key APIs include `scaleLinear`, `axisBottom`, `axisLeft`, and `select` for creating the plot, axes, and colored circles.

Sep 17, 2023

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements by selecting attributes from X and Y dropdown menus. Data points are colored by species using a d3.scaleOrdinal color scale. The React-based visualization uses d3.scaleLinear for axes, d3.extent for domain calculation, and renders SVG circles with native tooltips. Menu selections trigger state updates that re-scale the axes and reposition marks dynamically.

Sep 17, 2023

Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the Iris flower dataset, comparing sepal length to sepal width across three species encoded by color. The visualization uses D3 v7’s scaleLinear, axisBottom, and axisLeft to construct the chart, with an ordinal color scale for species classification. Rendered as SVG, it includes a manually drawn legend and gridlines, reading data from a local CSV file through d3.csv. The chart demonstrates ES6 module imports and loading D3 via UNPKG.

Sep 17, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting vehicle fuel efficiency (mpg) against horsepower with points colored by country of origin and sized by vehicle weight. The chart is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries to render an SVG view. Data is loaded asynchronously via d3.csv, and the visualization encodes quantitative x- and y-fields, a nominal color field, and tooltips showing car names. The implementation includes custom axis styling and tooltip configuration for readability across the full browser window.

Sep 16, 2023

Loading thumbnail…

Cars Report

This example displays a list of used cars with their year, make, model, and price. The data is defined as a JSON array in a local ES6 module, parsed with `JSON.parse`, and rendered as formatted text in a `<pre>` element by setting its `textContent`. The page loads D3 via UNPKG and imports the data using ES6 `import` syntax, demonstrating modular code organization. No charts or D3 visualization functions are used in the visible behavior.

Sep 15, 2023