williamkuo2000

@williamkuo2000·6 public vizzes

spotify

This visualization demonstrates the setup for a Spotify track dataset from a CSV file, using D3 version 6 to initialize an SVG container with defined margins and dimensions. The code loads the data asynchronously via `d3.csv` but does not render any marks or charts, instead replacing the page body with the text “DEBUG”. It combines an external D3 v6 script tag with an additional D3 v7 import, though the placeholder `#my_dataviz` selection and empty data callback leave the intended chart unfinished.

Nov 16, 2022

Loading thumbnail…

hw2_1

This interactive parallel coordinates plot visualizes the Iris dataset, with each flower’s measurements (sepal and petal length/width) drawn as colored polylines across four vertical axes. Users can drag and drop axis labels in a fixed sidebar to reorder the dimensions, triggering a full redraw via `d3.scalePoint` and `d3.line`. Hovering highlights a species by fading other lines, using D3 transitions and ordinal color scales. Data loads from a remote CSV, and rendering uses SVG with D3 v6 axis generators.

Oct 20, 2022

Loading thumbnail…

Draggable Y-axis

This D3.js (v5) example demonstrates how to reorder a categorical axis by dragging its labels. It displays a draggable list of four Iris flower feature names (sepal length, sepal width, petal length, petal width) in a fixed-position panel. Users can drag and drop each item to change its position, which updates the underlying `axis` array. The implementation uses native HTML5 drag-and-drop events (`dragstart`, `dragover`, `drop`) and DOM manipulation to swap list items, providing a simple interface for interactive axis reordering.

Oct 19, 2022

Loading thumbnail…

hw2_3

This visualization displays the Iris dataset as a parallel coordinate plot, with four axes representing sepal length, sepal width, petal length, and petal width. Each of the 150 flowers appears as a colored polyline linking its measurements across the axes, with species distinguished by red, yellow, and green strokes, alongside a legend. The code uses d3.scalePoint for categorical axis placement, d3.scaleLinear for the numeric range, and d3.line to generate the paths. Axes are rendered using d3.axisLeft and positioned via the SVG transform attribute, with data loaded through d3.csv.

Oct 19, 2022

Loading thumbnail…

Parallel Coordinate Plot

This parallel coordinate plot visualizes the Iris dataset, showing four measurements (sepal length, sepal width, petal length, petal width) as parallel axes connected by colored lines for each flower sample. The lines are colored by species—setosa, versicolor, and virginica—with a legend and title. Built with D3 v5, it uses `d3.scalePoint`, `d3.scaleLinear`, and `d3.axisLeft` to construct the axes and renders the polylines as SVG paths with adjustable opacity and stroke width.

Oct 16, 2022

Loading thumbnail…

Iris-scatter-plot

This interactive scatter plot visualizes the classic Iris dataset, allowing users to compare any combination of sepal and petal measurements via dropdown menus. Each point represents a flower sample, colored by species (setosa, virginica, or versicolor) using D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. The visualization dynamically re-renders the SVG on selection changes, with axis labels indicating the chosen attributes. Data is loaded as CSV from a GitHub gist, and the code uses d3.csv, d3.select, and d3.join to update circles.

Oct 1, 2022