JoshuoYang

@JoshuoYang·20 public vizzes

1117 of HW3 Loading and Parsing CSV Data

This example visualizes the distribution of energy levels in Spotify tracks, split into two groups based on popularity. It loads a CSV file using Plotly’s `d3.csv` method and processes the data to compute histograms. The code calculates quantiles with `d3.quantile` and bins the `energy` values into categories. Using Plotly’s `newPlot`, it renders bar and line charts for both groups: tracks with popularity above 33 and those below, showing the percentage of tracks in each energy range. The data source is a CSV of Spotify tracks.

Nov 17, 2022

Loading thumbnail…

HW2 Iris Parallel Coordinate Plot Scale-Move

This example shows the classic Iris dataset in a parallel coordinate plot, with four axes for sepal and petal measurements. A dropdown selector toggles the y-axis scale between a fixed global range ("union") and per-axis independent ranges ("self"), which visually emphasizes feature clustering differences. The code uses D3 v5 with `d3.scaleLinear` and `d3.extent` to compute scales, `d3.axisLeft` for tick marks, and `d3.drag` to reposition axes interactively. Semi-transparent polylines are colored by species, and axes can be reordered by dragging, with smooth transitions via D3's `.transition()` API.

Nov 17, 2022

Loading thumbnail…

Keep of 1116 of HW3 Loading and Parsing CSV Data

This example visualizes the distribution of Spotify track energy levels, split into two groups based on popularity (above or below 33). It shows the count of tracks across five energy bins using both bar and line chart traces. The code loads a CSV file via the Plotly.js `d3.csv` method, processes the data by iterating through rows and incrementing bin counts, then renders the result in a DOM element using `Plotly.newPlot`. The chart is embedded in a React application, with the data source being a remote Spotify tracks dataset hosted as a GitHub gist.

Nov 17, 2022

Loading thumbnail…

Fork2 of 1116 of HW3 Loading and Parsing CSV Data

This example visualizes Spotify track data by comparing the distribution of energy levels between songs with high popularity (>33) and low popularity (<33). The visualization uses grouped bar and line charts to show counts of tracks across five energy bins, from 0 to 1. The code loads CSV data via Plotly.d3.csv, processes it with conditional logic, and renders the results using Plotly.newPlot with both bar and scatter traces. The Spotify dataset is fetched from a GitHub gist URL, and the chart displays two distinct series for popularity comparison.

Nov 17, 2022

Loading thumbnail…

1116 of HW3 Loading and Parsing CSV Data

This example visualizes the distribution of Spotify track energy for tracks grouped by popularity, comparing tracks with popularity above and below 33. It loads a CSV dataset using Plotly’s `d3.csv`, then processes the rows by binning energy values into five ranges and normalizing the counts as proportions. The resulting bar and line traces for both groups are rendered in a single Plotly chart using `Plotly.newPlot`, with the CSV fetched via an AJAX call from a GitHub gist URL.

Nov 17, 2022

Loading thumbnail…

HW3 Fork of Total Number of Most Popular Songs Genre

This stacked bar chart shows the distribution of top song genres by popularity, with dance pop consistently dominating each year. Using the Vega-Lite API and d3.csv, it aggregates Spotify track data from a gist source, counting songs per genre for each popularity value. The visualization encodes genre as color, popularity on the x-axis, and song counts on the y-axis, with tooltips revealing exact figures. The config.js file customizes axis labels and styling for improved readability.

Nov 16, 2022

Loading thumbnail…

HW3 Fork of Total Number of Most Popular Songs Genre

This stacked bar chart displays the distribution of track genres among the most popular songs for each year, sourced from a Spotify tracks CSV. The visualization shows that Dance pop consistently holds the highest count across years. Built with Vega-Lite and D3.js, the chart aggregates data per year and genre using a groupby transformation, then encodes genre as color, year on the x-axis, and song count on the y-axis. The rendering uses an SVG via the Vega-Lite API, with tooltips showing genre, count, and artist.

Nov 16, 2022

Loading thumbnail…

Fork of HW2 Iris Parallel Coordinate Plot

This parallel coordinate plot visualizes song attributes from a Spotify-derived dataset, loading CSV data via `d3.csv` and `d3.autoType`. It renders SVG paths across multiple axes, with an additional barcode strip showing danceability distribution and a scatterplot comparing energy against danceability. The example uses D3 v5 selection methods like `selectAll` and dynamic `join` for rectangles and circles.

Nov 16, 2022

Loading thumbnail…

HW3 Loading and Parsing CSV Data

This visualization demonstrates the process of loading and parsing CSV data using D3.js version 5 within a React framework. It fetches a Spotify tracks dataset from a GitHub gist, then computes and displays summary statistics including file size, row count, and column count. The code uses `d3.csv` for asynchronous data loading with promise chains, and also implements a custom row conversion function that parses year, make, model, and length fields. A secondary callback filters and logs the first ten track IDs to the console.

Nov 16, 2022

Loading thumbnail…

Fork of HW2 Iris Parallel Coordinate Plot

This visualization displays the classic Iris dataset as a parallel coordinate plot, with each polyline representing one flower specimen across four measurements: sepal length, sepal width, petal length, and petal width. The three Iris species are distinguished by color, with semi-transparent strokes revealing density overlaps between classes. The implementation uses D3 v5's `scalePoint` and `scaleLinear` for axes, `d3.line` to generate paths, and `axisLeft` for tick marks. A legend with colored circles identifies each species, while the title and axis labels are rendered as SVG text elements. The data originates from a CSV file loaded via `d3.csv`.

Nov 16, 2022

Loading thumbnail…

HW2 Iris Parallel Coordinate Plot

This visualization uses a parallel coordinate plot to display the classic Iris flower dataset, with each of the four measurements (sepal length, sepal width, petal length, petal width) mapped to a vertical axis. Colored polylines connect each sample across the axes, with three distinct colors separating the Iris species (setosa, versicolor, virginica) as indicated by the legend. The code uses d3.scalePoint and d3.scaleLinear for positioning, d3.line to generate the paths, and d3.axisLeft for the numeric scales. Data is loaded via d3.csv from a GitHub-hosted file, and the SVG render includes semi-transparent strokes to reveal overlapping patterns.

Oct 14, 2022

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width for three iris species. Hovering over a species in the color legend highlights only that species’ points while dimming the others. Built with D3 v5 scales and React components, the visualization uses SVG circles for marks and implements hover interactions through React state and mouse events. The color legend uses `d3.scaleOrdinal` and supports opacity fading via the `fadeOpacity` prop.

Oct 14, 2022

Loading thumbnail…

Ref of Iris Parallel Coordinate Plots

This interactive parallel coordinate plot visualizes the Iris dataset, showing how sepal and petal measurements vary across three iris species. Each line represents a single flower, colored by species using a d3.scaleOrdinal color scale. The visualization uses d3.csv to load data, d3.line for path generation, and d3.axisLeft for axis rendering. Users can reorder the four dimensions by dragging the axis labels with d3.drag, which triggers redrawing of the lines and axes to reflect the new arrangement.

Oct 14, 2022

Loading thumbnail…

310712009

This interactive scatter plot of the Iris Dataset lets users explore relationships between measurements by selecting axes from dropdown menus. Built with React and D3 v5, it renders SVG circles with opacity, using `d3.scalePoint` for positioning and `d3.axisBottom`/`d3.axisLeft` for labeled ticks. The data is loaded via `d3.csv` from a remote gist, with axis labels dynamically updated based on menu selections.

Oct 14, 2022

Loading thumbnail…

Iris_HW1

This interactive scatter plot of the Iris Dataset allows users to choose which flower attributes appear on the x- and y-axes via dropdown menus. The visualization renders circles for each iris sample using SVG, with axes and ticks generated by custom components that leverage `d3.scaleLinear` and `d3.extent`. The code uses `d3.csv` to load data from a remote URL and defines tick marks with `AxisBottom` and `AxisLeft` components. The chart's marks include tooltips, and the UI is built with React and `react-dropdown`.

Sep 26, 2022

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example shows a yellow smiley face centered in an SVG canvas, with two eyes and a mouth formed by an arc path, while its eyebrows animate by moving upward and then back down. Built with D3.js v5, the code uses `d3.select`, `svg.append`, and `.attr` to construct the face, and `transition().duration(2000)` to create the eyebrow motion. The face is drawn using SVG shapes, including circles for the eyes and a path generated by `d3.arc` for the mouth, with dimensions fixed to a 960×500 viewport.

Sep 26, 2022

Loading thumbnail…

D3_coding

A single dark circle fills the center of an SVG canvas, its radius and position computed directly from the viewport dimensions. The example demonstrates minimal D3 v5 selection and attribute manipulation, using `d3.select` to target the `svg` element and `circle.attr` to set `r`, `cx`, and `cy` based on hard-coded height and width values. Rendering occurs entirely through SVG, with no data binding or interaction. The code also links an external stylesheet and loads D3 from a CDN.

Sep 26, 2022

Loading thumbnail…

JavaScript101

This example demonstrates a minimal D3 version 6 setup by rendering a hardcoded message extracted from a JSON array of car data. It shows how to import and parse local data through ES modules, specifically using `cars.js` and `carsJSON` with `JSON.parse`. The code uses `document.getElementById` to set the text content of a `<pre>` element in `index.html`, displaying only the make of the first car. The visualization relies on standard DOM manipulation rather than D3’s data-binding or scales.

Sep 25, 2022

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw and style SVG shapes using React and CSS. It shows circles, rectangles, lines, and a polyline path, with attributes like `fill`, `stroke`, `stroke-width`, and `transform` applied directly to SVG elements or through grouped `<g>` elements. The page uses a simple HTML structure with linked `styles.css` and inline SVG markup, highlighting both inline presentation attributes and external stylesheet rules for visual customization.

Sep 25, 2022

Loading thumbnail…

HTML_Cars Report

This example displays a simple HTML cars report listing vehicle models alongside numeric values. It demonstrates basic web styling and interactivity setup using vanilla CSS and JavaScript, with the page structure defined in index.html. The report uses semantic HTML elements like h1 for the title and ul/li for the data list. CSS styles the page with a large monospace font and applies a red highlight to specific list items via the `.highlighted` class. The code references a React starter template, though the current implementation relies solely on native HTML, CSS, and JavaScript without additional frameworks or libraries.

Sep 25, 2022