yisha huang

@yolololo-huang·9 public vizzes

Fork of Organization Graph Diagram

This interactive network diagram visualizes the connections among the Kenneth Rainin Foundation’s partner organizations, showing four main nodes linked by a force-directed layout with smaller child and leaf nodes. Built using D3 v6, it leverages `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position elements. Nodes are rendered as colored circles sized by hierarchy level, with links colored by their source node. Dragging is enabled via D3’s `drag` interaction, and the color palette comes from generated data in `colors.js`.

Feb 12, 2025

Loading thumbnail…

Fork of Organization Graph Diagram

A network diagram shows the connections between Kenneth Rainin Foundation grantees, with four main organizations and their child nodes arranged in a force-directed graph. Using d3.forceSimulation, forceManyBody, and forceLink, the SVG visualization positions circles sized by hierarchy level, with colored links indicating relationships between parent and child nodes. The code generates node data programmatically from a foundation dataset, using color palettes generated by Paletton. Users can drag circles to reposition them, triggering simulation restarts.

Feb 12, 2025

Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which flower measurements to display on the x and y axes. The visualization is implemented in React with D3 v6, using an SVG rendering approach where circles represent individual data points. Through dropdown menus, users can switch between sepal and petal dimensions, triggering smooth 1000ms transitions that animate the points to their new positions. The chart’s axes also update dynamically to reflect the current data selection, leveraging D3's scale functions and transition API for fluid interactions.

Dec 3, 2024

Loading thumbnail…

E8- Fork of D3 Scatter Plot

This scatter plot visualizes the Iris dataset, encoding flower measurements on both axes and using different symbol shapes for each species. It cycles through four measurement columns every two seconds, updating the x-axis position and scale with a smooth transition. The visualization is built with D3 v7, using `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, and `axisBottom`, and renders as an interactive SVG with animated transitions driven by `setInterval`. Data is loaded asynchronously from a CSV file using D3's `csv` function.

Jul 3, 2024

Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This example shows the classic Iris Dataset as an animated scatter plot. Through dropdown menus, users can select which attributes (petal or sepal width/length, or species) to plot on the x and y axes. The menu module uses `d3.dispatch` to broadcast change events. The `scatterPlot` module leverages D3 6.7.0 features such as `scaleLinear`, `axisLeft`, `axisBottom`, and `transition` to animate point positions and axis ticks over one second.

Jul 3, 2024

Loading thumbnail…

Fork of Animated Scatter Plot with Menus

Jul 3, 2024

Loading thumbnail…

Fork of Reusable D3 Scatter Plot with Symbols

This visualization displays the Iris dataset as a scatter plot, showing the relationship between petal width and sepal length across three iris species. Each species is distinguished by a unique symbol shape, such as circles or triangles, generated using D3’s `symbol` and `scaleOrdinal`. The code uses D3 v7 functions like `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to load data, map positions, and render SVG axes. The chart is built as a reusable function, with margins and symbol size adjustable through its configuration API.

Jun 28, 2024

Loading thumbnail…

E8-Fork of D3 Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length to the x-axis and sepal length to the y-axis. It uses D3 v6 to load CSV data, create linear scales from the data extent, and render circles with SVG. Axes are generated using `axisLeft` and `axisBottom`, with a margin layout and a fixed point radius. The visualization fills the entire browser window, with tick labels enlarged to 24 pixels for readability.

Jun 27, 2024

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot built with D3, visualizing the Iris dataset. It cycles through four attribute pairs every two seconds, updating the x-axis and circle positions with animated transitions. The code uses D3's `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` module, rendering SVG circles and axes. The plot dynamically re-renders with new data mappings, showcasing a flexible, configurable chart component.

Jun 27, 2024