Juliachien

@Juliachien·9 public vizzes

Data Visualization - Bubble Chart of Spotify Track Dataset

This interactive visualization presents a radar chart of Spotify track data, allowing users to compare the audio characteristics of songs across three selected genres. The chart is built with D3.js v5 and renders using SVG, with animation applied to transitions when the genre selections change. Users can choose genres from three dropdown menus, and the radar chart dynamically updates to display the tracks’ attributes. The implementation relies on D3’s selection and merge methods for the interactive menus and uses SVG paths for the radar chart’s geometric structures.

Nov 20, 2022

Loading thumbnail…

Fork of Histogram with Iris Data - Data Decoder

This visualization presents the classic Iris dataset as an interactive histogram, featuring both vertical bars for petal length and horizontal circular marks for sepal width. Users can change the X and Y attributes via dropdown menus, with the visualization updating accordingly. The implementation combines React for state management with D3 v7 functions like `scaleLinear`, `bin`, and `count` to compute and render the histogram bins. SVG elements are used for drawing, and the data is loaded via `d3.csv` from a GitHub gist. The chart displays species color-coded through a `scaleOrdinal` color scale.

Nov 17, 2022

Loading thumbnail…

Data Visualization - Histogram Plots of Spotify Track Dataset

This interactive histogram visualization lets users explore a Spotify track dataset by comparing the distributions of ten audio features, including popularity, energy, danceability, and tempo. Two dropdown menus select which features to plot on the x- and y-axes, while two additional menus choose musical genres to highlight in the scatterplot. The visualization renders as an SVG using D3.js v5, with React dropdown components for the menus, and includes animated transitions and tooltips. The code relies on D3 scales, axes, and the d3-legend library to display the genre colors.

Nov 17, 2022

Loading thumbnail…

Scatter Plots of Spotify Track Dataset

This interactive scatter plot visualizes the Iris flower dataset, mapping sepal and petal measurements along selectable x- and y-axes via two dropdown menus. Users can hover over points to see coordinate tooltips, with points colored by species using a manually defined scale. The visualization uses D3 v5 for scales, axes, and SVG circles, with React dropdowns for attribute selection, and animates point radius on mouseover.

Nov 13, 2022

Loading thumbnail…

HW2 Iris Parallel Coordinate Plot

This interactive parallel coordinate plot uses the classic Iris dataset to visualize four measured features (sepal length, sepal width, petal length, petal width) across three flower species. Built with D3.js v3, it renders each sample as a polyline via `d3.line`, with colors assigned by species. Users can drag any vertical axis to reorder dimensions, and the y-axis domain switches between a union range and per-axis self-scaling using d3.scaleLinear. Hovering over any line highlights all lines of the same species through opacity transitions, while a dropdown menu toggles the axis range mode.

Oct 17, 2022

Loading thumbnail…

Iris Parallel Coordinate Plot

This parallel coordinate plot visualizes the Iris dataset, encoding four measurements as axes and coloring each polyline by Iris species. Users can drag axis labels to reorder dimensions, while a dropdown toggles the y-axis scale between a fixed union range (0–8) and self-scaled extents per dimension. Built with d3.v5, it uses `d3.scalePoint`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.drag` to support interactive repositioning, with SVG paths and a smooth 600ms transition on axis reordering.

Oct 16, 2022

Loading thumbnail…

Iris Parallel Coordinate Plot_hw2

This interactive parallel coordinate plot visualizes the Iris dataset, displaying four measured attributes (sepal length, sepal width, petal length, petal width) as parallel axes with colored polylines representing three Iris species. Users can click and drag axis labels to reorder the dimensions, with lines smoothly animating to their new positions. The visualization is built with d3.v5, using `scalePoint` and `scaleLinear` for positioning, `axisLeft` for tick marks, and the `drag` interaction module to handle axis movement. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering includes a legend identifying each species by color.

Oct 16, 2022

Loading thumbnail…

Temp Iris Parallel Coordinate Plot

A parallel coordinate plot visualizes measurements of Iris flowers (sepal length, sepal width, petal length, petal width) from the classic iris dataset, with each of the three species colored distinctly. Users can drag any axis horizontally to reorder it, triggering transitions that smoothly recalculate paths via d3.line and reposition axes with d3.drag. The visualization renders in SVG within a React framework, using d3.scalePoint for categorical axes, d3.scaleLinear for the numeric range, and d3.axisLeft for tick marks, alongside a custom legend in the side margin.

Oct 15, 2022

Loading thumbnail…

Data Visualization - Scatter Plots of Iris Dataset

This interactive scatter plot explores the classic Iris dataset, visualizing measurements of sepal and petal dimensions. The visualization displays individual data points colored by species, with dropdown menus allowing users to dynamically change which four attributes are plotted on the x and y axes. Hovering over any point enlarges it and displays its exact coordinate values in a tooltip. The implementation uses D3 v5 for rendering SVG axes, circles, and animations, while React handles the dropdown menu interactions. The chart updates smoothly, re-scaling axes and repositioning points whenever the selected attributes change.

Sep 30, 2022