yujun12689

@yujun12689·11 public vizzes

homework pie

This interactive scatter plot visualizes the distribution of 114,000 songs from a Spotify dataset, allowing users to explore relationships between any two numeric song attributes such as popularity, danceability, and energy. The visualization uses dropdown menus to dynamically select which attributes appear on the x- and y-axes, triggering a re-render of the SVG plot when selections change. Built with D3 v5, it uses `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and data-loaded circles to represent individual tracks. A separate Google Charts table (via `loader.js`) displays aggregated case counts for categorical features like genre and explicitness.

Nov 21, 2022

Loading thumbnail…

column

This example displays a column chart for a selected musical attribute, such as valence or danceability, showing the distribution of song counts across binned ranges. The chart is rendered using the Google Charts library with the `corechart` package and the `ColumnChart` class. The data is defined in a JavaScript object called `codata`, containing arrays for each attribute, and the visualization updates based on the `choice_coattr` variable. The chart is embedded in an HTML page that loads the Google Charts loader script.

Nov 20, 2022

Loading thumbnail…

310553047-HW1

This interactive scatter plot visualizes a Spotify dataset, allowing users to compare any two musical attributes by selecting them from dropdown menus for the x- and y-axes. The visualization shows how the chosen variables correlate across tracks, with each data point represented as a semi-transparent blue circle. The code uses D3 v5’s `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` APIs to load data, render the SVG, and update the chart dynamically. Axis labels and gridlines are included, and the plot refreshes whenever the user changes the selected attributes.

Nov 20, 2022

Loading thumbnail…

spotify scatter

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Three dropdown menus let viewers select which attributes appear on the x- and y-axes, with points colored by iris species. Built with D3 v5 and React, the visualization uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render SVG axes and circles, updating dynamically as selections change.

Nov 18, 2022

Loading thumbnail…

Untitled

This example shows the distribution of response durations across seven time bins, from under one minute to over six minutes, with the largest share falling in the three-to-four-minute range. It renders a three-dimensional pie chart using the Google Charts loader and the `google.visualization.PieChart` API, setting `is3D` to true for the visual effect. The data is embedded directly in the page as an array passed to `google.visualization.arrayToDataTable`, and the chart is drawn into a fixed-width div. The title labels the chart “duration_ms,” though the axis categories use human-readable minute ranges.

Nov 16, 2022

Loading thumbnail…

Untitled

This interactive 3D pie chart visualizes the distribution of popularity scores, segmented into ten ranges from 0–10 to 90–100, with case counts shown for each bin. The chart uses Google Charts’ `loader.js` and `visualization.PieChart` API, with options enabling an `is3D` effect. Rendered at 900 by 500 pixels, it draws data from a static array of [popularity, cases] pairs, titled “POPULARITY.”

Nov 16, 2022

Loading thumbnail…

Untitled

A 3D pie chart visualizes the distribution of audio loudness values across five ranges, from very quiet (below -50) to loud (above 0), with most samples falling between -10 and -5. The chart uses Google Charts' corechart package via `google.charts.load` and `google.visualization.PieChart`, with data formatted through `arrayToDataTable`. The `is3D: true` option renders the slices with depth, while the title “Loudness” labels the visualization.

Nov 16, 2022

Loading thumbnail…

hw2

This interactive parallel coordinate plot visualizes the Iris dataset, displaying four measured features for three flower species. Users can drag any vertical axis horizontally to reorder the dimensions, and the polyline paths connecting each flower’s measurements update in real time. The visualization uses d3.scalePoint for axis positioning, d3.drag for interactivity, and d3.line for path generation, with data loaded from a remote CSV. Axes are labeled, and a color-coded legend distinguishes the three Iris species.

Oct 25, 2022

Loading thumbnail…

HW2

This interactive parallel coordinate plot visualizes the Iris dataset, with each flower represented as a polyline connecting measurement values across four axes: sepal length, sepal width, petal length, and petal width. Lines are color-coded by species, and each axis includes its own scale and label. Using d3.drag, users can reposition the axes horizontally to reorder dimensions, which dynamically reshapes the polylines in response to the new axis placements. The visualization is rendered as SVG, with d3.scalePoint, d3.scaleLinear, and d3.line used to construct the plot.

Oct 25, 2022

Loading thumbnail…

Iris Parallel Coordinate Plot

This visualization displays the classic Iris dataset as a parallel coordinate plot, with each flower’s measurements drawn as a colored polyline across four vertical axes for sepal length, sepal width, petal length, and petal width. The three species are distinguished by color via a custom mapping. Built with React and D3 v5, it uses `d3.scalePoint` and `d3.scaleLinear` for axis positioning, `d3.line` for path generation, and `d3.drag` to let users reorder axes by dragging them. A static legend is rendered separately.

Oct 25, 2022

Loading thumbnail…

ss

An interactive scatter plot of the Iris dataset, rendered with SVG in React and D3.v5, lets users explore relationships between sepal and petal measurements. Two dropdown menus, built with the react-dropdown-browser library, dynamically switch the axes among the four numeric attributes. The plot colors each of the three iris species distinctly, with axis labels and tick marks generated using D3's `scaleLinear` and `axis` utilities. Interactions trigger a re-render that updates scales, circles, and labels based on the selected columns.

Oct 1, 2022