James Huang

@Yenchun-Huang·13 public vizzes

Rendering data with React

This example renders a pie chart of CSS named colors using React to generate the SVG. The code loads color data from a CSV file using D3's `csv` utility, then passes it to React, which maps each record to a `<path>` element. D3's `pie` and `arc` functions compute the angular segments, while the `fill` attribute uses the color's hex value. The visualization displays all colors as equal-sized slices, forming a full circle.

Nov 6, 2023

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the distribution of subgroups across categorical groups, with each bar segment colored by subgroup and stacked to show cumulative values. The visualization is built using D3 v4, loading CSV data from GitHub, and rendering SVG rectangles with a band scale for the x-axis and a linear scale for the y-axis. It uses `d3.stack()` to compute stacked values, `d3.scaleOrdinal` for colors, and includes an interactive tooltip element in the HTML structure.

Oct 20, 2023

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart visualizes the component scores—Teaching, Research, Citations, Income, and International—from the TIMES World University Rankings 2024 CSV data. Each bar represents a university, with segments stacked by criterion and color-coded via a `d3.scaleOrdinal`. Users can sort the bars by total score in ascending or descending order using buttons that call `updateChart`, which animates bar positions with `transition` and updates the `d3.axisBottom` x-axis. Tooltips display individual segment scores on hover, and the SVG rendering uses `d3.stack` for layout.

Oct 20, 2023

Loading thumbnail…

Abalone Correlation Matrices

This example shows three correlation matrices for male, female, and infant abalones, using a diverging red-blue color scale to represent the strength and direction of correlations between eight physical attributes. The matrices display numerical correlation values in each cell, with negative correlations in red and positive in blue. The code loads abalone data from a CSV file, filters it by sex, and calculates correlations using the simple-statistics library’s `sampleCorrelation` function. Each matrix is rendered as an SVG using D3 v7, with `d3.scaleSequential` and `d3.interpolateRdBu` defining the color mapping, and axis labels positioned around the grid.

Oct 8, 2023

Loading thumbnail…

Abalone Correlation Matrices

Three correlation matrices compare eight physical measurements of abalone—Length, Diameter, Height, various weights, and Rings—separated by sex (male, female, infant). Each matrix cell displays the sample correlation coefficient, colored on a blue-red diverging scale from −1 to 1. The visualization loads a CSV dataset via `d3.csv`, computes correlations with `ss.sampleCorrelation` from simple-statistics, and renders SVG rectangles and text labels using D3 v7.

Oct 8, 2023

Loading thumbnail…

HW2_Parallel coordinate plot

This interactive parallel coordinate plot visualizes the Iris dataset, showing how sepal and petal measurements vary across three iris species. Users can reorder the four axes via dropdown menus, and hovering over any line highlights all lines of the corresponding species while fading others. The visualization uses React for UI state management and D3 v5 for scales, axes, and SVG path generation, with the data loaded as CSV and colored by species using a categorical scale.

Oct 1, 2023

Loading thumbnail…

HW2_Parallel coordinate plot_test

This example shows an interactive parallel coordinate plot of the Iris dataset, with four axes for sepal length, sepal width, petal length, and petal width. Users can reassign which measurement appears on each axis using React dropdown menus through ReactDropdown. The plot renders polylines as SVG paths using d3.line, with each species colored via a d3.scaleOrdinal. Hovering over a line highlights all lines of the same species by transitioning their stroke and opacity with d3 transitions, while other lines fade to grey.

Sep 29, 2023

Loading thumbnail…

Fork of Interactive Color Legend

A scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis for each flower sample. The plot uses a color legend to distinguish three iris species, and hovering over a legend label fades out all points not belonging to that species while highlighting the selected group. The visualization is rendered with React and SVG, using d3.scaleLinear for positioning, d3.scaleOrdinal for species colors, and custom React components for axes and the interactive legend.

Sep 26, 2023

Loading thumbnail…

HW1_Scatter Plot

This interactive scatter plot explores the classic Iris dataset, displaying measurements such as petal length and sepal width as colored circles representing species. Users can switch the X and Y axes via dropdown menus to compare any pair of attributes, while hovering over the color legend highlights points from a selected species and fades the rest. The visualization is built with React and D3 v5, rendering SVG marks and axes using components like `AxisBottom`, `AxisLeft`, and `Marks`, with scales from `d3.scaleLinear` and `d3.scaleOrdinal`. Data is loaded asynchronously via D3’s `csv` function.

Sep 22, 2023

Loading thumbnail…

Scatter Plot

A scatter plot displays individual data points positioned by two numeric variables, with each point rendered as a small circle. The visualization uses D3.js v6 and is built with a simple SVG container. The code applies the `d3.scaleLinear` function to map x- and y-values to pixel coordinates, then appends `circle` elements to the chart area. Axes are generated with `d3.axisBottom` and `d3.axisLeft`. The data is loaded from an external CSV file using `d3.csv`, and the plot updates dynamically once the data is parsed.

Sep 19, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading a remote CSV file and displaying basic metadata about it, specifically the file size in kilobytes, the number of rows, and the number of columns. It uses `d3.csv()` from D3 version 7 to fetch and parse the data from a GitHub gist containing CSS named colors. The parsed data is then analyzed with `d3.csvFormat()` and the `data.columns` property, and the resulting statistics are rendered inside an HTML `<pre>` element.

Sep 19, 2023

Loading thumbnail…

Mouse Follower

This is a React application that renders a single smiley face as an SVG circle, which follows the mouse cursor across the screen. The component tracks pointer movement through React's `useState` and `useCallback` hooks, updating the circle's center coordinates with each mouse event. The SVG is rendered with React, while the page loads React and D3 v5 from CDN links in the HTML. The interactive behavior is driven entirely by React's event handling, not by D3's own mouse utilities.

Sep 19, 2023

Loading thumbnail…

Hello HTML! Smiley Face

A grid of randomly generated smiley faces fills the screen, each rendered as an SVG via React components. The code uses D3's `arc` generator to create the mouths and `range` to produce 18 faces, with randomized properties for stroke width, eye size and offset, and mouth dimensions. The example demonstrates composing reusable React components for SVG visualization, leveraging React 18 and D3 v7 within an HTML page.

Sep 15, 2023