Skip to main content
Log in
A

Amanda-Tai

@Amanda-Tai·11 public vizzes

Loading thumbnail…

Spotify Tracks Dataset

This interactive histogram explores a Spotify tracks dataset, showing the distribution of a selected audio feature (such as popularity or energy) across user-defined bins. A dropdown menu switches the mode between absolute counts and percentages, while another controls the number of histogram sections. Built with D3 v5, the visualization uses `scaleBand` and `scaleLinear` for axes, and animated bar transitions via `transition().duration()` and `delay()` to reveal each segment sequentially, set against a radial gradient background.

Dec 1, 2022
Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal length and width for three flower species. Users can select which features to plot on the x- and y-axes using dropdown menus, with points color-coded by species (setosa, versicolor, virginica). The visualization uses D3 v5 to load and parse the CSV data, dynamically render SVG circles and axes with d3.axisBottom and d3.axisLeft, and animate point appearance via transition().duration() with staggered delays.

Nov 22, 2022
Loading thumbnail…

Fork of Total Number of Most Popular Songs Genre

This stacked bar chart visualizes the distribution of top genres among the most popular songs for each year, using data from a public gist. The visualization is implemented with a Vega-Lite specification rendered via the vega-lite-api library, where each bar segment represents a genre’s count. The x-axis lists artists, while the y-axis shows total song counts, colored by genre. The code configures axis styling and tooltips, and the chart automatically fits to the browser window. Dance pop consistently appears as the most frequent genre across the timeline.

Nov 20, 2022
Loading thumbnail…

HW3_111

This radial tree visualization displays the hierarchical structure of world countries, organized by region and subregion, with interactive panning and zooming enabled through `d3.zoom`. The code uses `d3.hierarchy` and `d3.cluster` to compute node positions, with curved paths drawn via SVG `path` elements. Node labels are rotated tangentially and vary in font size based on depth, while white text shadows improve readability. The visualization adapts Curran Kelleher’s block, rendering the hierarchy from a JSON data file.

Nov 19, 2022
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 within a React framework. It fetches a Spotify dataset from GitHub and displays the file size, row count, and column count in a large text format. The code primarily uses `d3.csv` with a promise-based `.then()` method, while commented-out alternatives show implementations using `fetch` with async/await and `d3.csvParse`. A commented "pyramid of doom" example illustrates older nested promise patterns. The visualization is minimal, focusing on the data-loading process rather than graphical representation.

Nov 19, 2022
Loading thumbnail…

Iris parallel coordinate plot

A parallel coordinate plot visualizes the classic Iris dataset, displaying four numerical traits—sepal length, sepal width, petal length, and petal width—as connected polylines. Each line represents one flower, colored by species (setosa, versicolor, virginica) using distinct hues. Built with d3.v5 and SVG, the chart uses `d3.scalePoint` and `d3.scaleLinear` for axes and `d3.line` for paths. Users can drag any vertical axis horizontally via `d3.drag` to reorder dimensions, with smooth transitions applied to paths and axes during reordering.

Oct 21, 2022
Loading thumbnail…

Fork of Iris parallel coordinate plot

This visualization is an interactive parallel coordinate plot of the classic Iris dataset, showing four floral measurements (sepal and petal length/width) as linked axes. Lines represent individual flowers, colored by species (setosa, versicolor, virginica), with a hover effect that highlights one species while dimming others. Built with D3.js v4, the example uses `d3.scalePoint` for axis positioning, `d3.line` to generate the polylines, and `d3.drag` for interactive axis reordering. Users can click and drag axis labels to swap their positions, with the plot updating in real time. The SVG renderer handles the paths, axes, and text labels.

Oct 19, 2022
Loading thumbnail…

Untitled

An interactive scatter plot visualizes the Iris dataset, showing sepal and petal measurements for three iris species. Users select which features appear on the x- and y-axes via dropdown menus, and the plot updates with a staggered 500-millisecond circle transition. Built with D3 v5, the SVG render uses `d3.scaleLinear` for axes, `d3.extent` for domains, and `d3.axisBottom`/`d3.axisLeft` with gridlines. Circles are color-coded by species, and the axes and title update dynamically based on the selected attributes.

Oct 1, 2022
Loading thumbnail…

test

This example demonstrates the basic setup for using D3 version 6, displaying a single message extracted from a flower dataset. It loads flower measurements as JSON and displays the first entry’s content in an HTML element. The code uses the native `import` statement to access the data from a local JavaScript module, then manipulates the DOM directly with `document.getElementById` and `textContent`. The visualization serves as a minimal introduction to integrating D3 v6 with modern ES6 module syntax, highlighting the correct import pattern for external data files.

Sep 27, 2022
Loading thumbnail…

test3

This example displays the make of the first car in a small dataset using text on a web page. It imports car data from a local ES6 module (`cars.js`) and writes `HONDA` into a `<pre>` element via the DOM API `getElementById`. The code demonstrates loading D3 via UNPKG and using modern JavaScript `import` syntax, though no D3 functions are actually invoked. The styling applies a large font size through the `styles.css` file.

Sep 27, 2022
Loading thumbnail…

test2

This example demonstrates a minimal HTML page that displays the text “Hello HTML!” centered in a large font. It uses plain CSS for styling, setting the message font size to 13em and aligning it to the center. The page is built with standard HTML elements and a CSS class, with no JavaScript or external libraries. It serves as a basic starter template for integrating CSS and JavaScript in a web project, referencing the React Starter for comparison.

Sep 27, 2022