chiara01050105@gmail.com

@ching-0105·5 public vizzes

Fork of Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the Iris dataset, showing each flower's sepal and petal measurements across four vertical axes. A dropdown menu above each axis lets users swap which attribute is displayed, while a color-coded legend for species highlights subsets on hover, fading unrelated lines. The visualization uses D3 scales and line generators for the underlying chart, with React managing state for selected attributes and hover interactions. SVG renders the polylines, axes, and legend, with data loaded via `d3.csv`. A color legend uses ordinal scaling to map species categories to distinct colors.

Oct 8, 2023

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot uses the classic Iris Dataset to visualize petal length against sepal width, with species encoded by color. A color legend allows users to hover over species categories to highlight corresponding data points and fade the rest, revealing clusters and comparisons. Built with React and D3 v5, the visualization renders as an SVG and uses `scaleOrdinal` for color mapping, `scaleLinear` for axes, and mouse event handlers to manage hover states and opacity.

Oct 8, 2023

Loading thumbnail…

Scatter Plots Of Iris

Interactive scatter plots show the relationships between pairs of measurements from the classic Iris flower dataset, with dropdown menus to select which features appear on the x- and y-axes. D3 v5 scales map sepal and petal measurements to SVG circle positions, while a categorical color scale distinguishes the three Iris species, which are also listed in a manual legend. Circles animate into place using `transition().duration()` with staggered delays. The example demonstrates reusable ES6 modules for the scatter plot, dropdown menu, and color legend components.

Sep 25, 2023

Loading thumbnail…

Scatter Plots Of Iris

This interactive visualization displays the classic Iris dataset, allowing viewers to explore relationships between sepal and petal measurements through a scatter plot. Users can select different attribute combinations from dropdown menus to compare, with each of the three Iris species represented by a distinct color (purple, teal, and orange). The D3.js v5 code uses a `scaleOrdinal` for color encoding, `scaleLinear` for both axes, and `axisBottom`/`axisLeft` for tick marks. Circles animate into position over two seconds with staggered delays, while a legend shows species labels beside colored dots in the SVG canvas.

Sep 25, 2023

Loading thumbnail…

Fork of React & D3 Starter

This fork of the React & D3 Starter visualizes the classic Iris dataset as a scatter plot. The code demonstrates a decoupled React and D3 integration pattern where a `VizWrapper` React component manages the SVG container and calls a separate `viz` function to handle D3 rendering. Using D3 v7 APIs like `scaleLinear`, `extent`, `csv`, `axisLeft`, and `axisBottom`, the example plots sepal length against petal length. The JavaScript and React libraries are loaded via UMD from unpkg, and the data is fetched from a local CSV file.

Sep 24, 2023