nathanowen06

@nathanowen06·8 public vizzes

hw2 v5

This interactive parallel coordinate plot visualizes the Iris dataset, displaying 150 flowers across four numeric attributes (sepal length, sepal width, petal length, petal width) with each of the three Iris species color-coded. Users can drag the vertical axes horizontally to reorder dimensions, with polylines smoothly transitioning to maintain their data positions. A legend on the right uses colored rectangles to identify species. The visualization uses D3 v5 APIs including `scalePoint`, `scaleLinear`, `axisLeft`, and the `drag` behavior, rendering with SVG and animated transitions via `transition.attr`.

Oct 2, 2023

Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

This fork of the Iris dataset visualization uses a parallel coordinate plot to compare sepal and petal measurements across three flower species, with each species assigned a distinct color for its polylines. Built with D3 v5 and React, the chart renders as an SVG and allows users to drag the four vertical axes to reorder dimensions, triggering animated transitions via d3 transitions. The code leverages d3’s `scalePoint`, `scaleLinear`, `axisLeft`, and cursor styling, while a side legend maps species names to color swatches based on the `colorMap` object.

Oct 2, 2023

Loading thumbnail…

HW2 v2

This interactive parallel coordinate plot visualizes the Iris dataset, with each polyline representing a flower and color-coded by species. Users can drag the four axes (sepal length, sepal width, petal length, petal width) horizontally to reorder dimensions, with smooth transitions animating the paths and axes into their new positions. The visualization is built using React and D3 v5, leveraging `scalePoint`, `scaleLinear`, `axisLeft`, and `line` for rendering, while `drag` and `event` handle the interaction. A legend and side panel identify the three species, and the SVG output includes hover cursors and opacity styling for the polylines.

Oct 2, 2023

Loading thumbnail…

HW2 v1

This interactive parallel coordinate plot visualizes the Iris dataset, showing each flower as a line connecting four attribute axes. The tool provides dropdown menus to reassign attributes to each axis, and hovering over a species in the color legend highlights the corresponding lines. Built with React and D3 v7, the SVG rendering uses `scaleLinear` for axes and `scaleOrdinal` for species colors, with state managed via React hooks for data filtering.

Oct 2, 2023

Loading thumbnail…

DATA VISUALIZATION HW1 v5

This interactive scatter plot explores the classic Iris dataset, allowing users to compare any two measurements (sepal length, sepal width, petal length, petal width) via React dropdowns. Each of the 150 flowers is rendered as an SVG circle, colored by species using a d3.scaleOrdinal scale. Hovering over a color legend entry dims non-matching points (set to 20% opacity) while highlighting that species’ members. Axes are built with d3.scaleLinear and custom React components, with data loaded asynchronously via d3.csv. Tooltips show the x-value on hover.

Sep 24, 2023

Loading thumbnail…

DATA VISUALIZATION HW1 v3

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers select which attributes appear on the x- and y-axes, while color distinguishes the three Iris species. A color legend with hover interactions highlights individual species by fading non-selected points. The visualization is built with React, using D3 v5 scales (scaleLinear, scaleOrdinal) for positioning and coloring, and renders as SVG with custom axis and legend components.

Sep 24, 2023

Loading thumbnail…

DATA VISUALIZATION HW1 v2

This interactive scatter plot of the classic Iris dataset lets users explore relationships between sepal and petal measurements. Built with React and D3.js (v5), it renders 150 points as SVGs, colored by iris species. Users can select any measurement combination for the X and Y axes via dropdown menus. Hovering over a species in the color legend highlights that group's points while dimming others, using D3's scaleOrdinal for color mapping and scaleLinear for axes.

Sep 24, 2023

Loading thumbnail…

DATA VISUALIZATION HW1

This interactive scatter plot visualizes the Iris dataset, with dropdown menus to select which sepal or petal measurement appears on the X and Y axes. D3 scales map the selected attributes to positions, while an ordinal color scale distinguishes the three iris species, with a color legend. The visualization uses React for state management and SVG rendering, with the `useData` hook loading the CSV. Alternative axes reveal different clustering patterns across the four measurement dimensions.

Sep 24, 2023