a1153724

@a1153724·8 public vizzes

Fork of Iris Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the classic Iris dataset, with each flower’s measurements drawn as a colored line across four axes. Users can drag any axis horizontally to reorder the dimensions, which repositions the lines and remaining axes with a smooth transition. The visualization uses D3 v5 APIs such as `scalePoint`, `scaleLinear`, `axisLeft`, `drag`, and `transition`, rendering as SVG with mouse-driven interactions to explore species clustering.

Oct 20, 2022

Loading thumbnail…

Fork of Parallel Coordinate Plot

This visualization displays the classic Iris dataset as a parallel coordinate plot, with each flower sample drawn as a polyline connecting its sepal and petal measurements across four vertical axes. The lines are colored by species (setosa, versicolor, virginica) using a predefined color scale, and a legend identifies each class. The code uses D3 v5 APIs including `scalePoint`, `scaleLinear`, `axisLeft`, and `line` to position axes and render the paths as SVG elements, with data loaded via `d3.csv` from a remote GitHub source.

Oct 20, 2022

Loading thumbnail…

Fork of Scatter Plot with Menus

This visualization displays the classic Iris dataset, where users can select which flower measurements to plot on the x and y axes via dropdown menus. It uses React with D3 v5’s `scaleLinear` for axes and `scaleOrdinal` for coloring the data points by species. The scatter plot encodes flower species through color, with a legend on the right, and the axes are rendered as SVG elements using custom `AxisBottom` and `AxisLeft` components.

Oct 20, 2022

Loading thumbnail…

Viz HW1

This interactive scatter plot explores the Iris flower dataset, featuring a menu to switch the x-axis among attributes. Built with React and D3.js v5, it maps sepal and petal measurements using d3.scaleLinear, with color encoding by species via d3.scaleOrdinal. The visualization uses SVG circles for marks and custom React components for axes, dropdowns, and a color legend.

Sep 30, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Iris flower dataset, plotting sepal length against sepal width as a scatter plot with points colored by species class. Hovering over a point reveals its class via a tooltip. The visualization is built using the Vega-Lite API for D3, with `vl.markCircle`, `vl.x().fieldQ`, and `vl.y().fieldQ` to encode quantitative fields, and `vl.color().fieldN` for categorical coloring. Data is loaded asynchronously via `d3.csv` from a Gist-hosted CSV file, and the chart renders with a custom dark-themed axis configuration.

Sep 30, 2022

Loading thumbnail…

Mouse Follower

A circle tracks the mouse cursor across a full-window SVG canvas, responding to every pointer movement in real time. React state updates the circle’s center coordinates on each `mousemove` event, using the `useState` hook and a `useCallback` handler. The visualization renders with React 16.9 and SVG, with no external data source or animation library—only direct event-driven position updates.

Sep 27, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL, displaying the file size, row count, and column count as large text. Using D3 v5’s `d3.csv` method, it fetches the CSS Named Colors dataset and formats the results with `d3.csvFormat`. An alternative approach using the Fetch API with `async`/`await` and `d3.csvParse` is included in comments, alongside a commented “pyramid of doom” example. The page renders the summary statistics inside a `<pre>` element within a React framework.

Sep 27, 2022

Loading thumbnail…

Smily face part 1

This example shows a grid of five cartoon faces rendered as yellow SVG circles with black outlines, each containing two eyes and an arc-shaped mouth. The faces are generated using React components that compose nested SVG elements, with d3.v7 providing the arc generator for the mouth shape. Each face’s eye radius is randomized using `Math.random()`, producing slight variation across the grid. The `FaceContainer` component applies a translation transform to center all facial features within each SVG canvas.

Sep 27, 2022