Ping-Yu Yang

@detaomega·11 public vizzes

Fork of Streamgraph

This fork of a streamgraph visualizes global CO2 emissions over time as a stacked area chart. Segments representing fossil fuel types—Solids, Liquids, Gas, plus Cement Production and Gas Flaring—are stacked and colored via a D3 ordinal scale. Hovering highlights a single area. The chart uses the `d3.stack`, `d3.area`, and `d3.curveBasis` APIs, with labels positioned by the `d3-area-label` library. Data comes from a remote CSV file, parsed into gigatons, and rendered as SVG using D3 v4.

Nov 3, 2023

Loading thumbnail…

Vega-Lite API Template with HW1

This visualization displays relationships among physical characteristics and weight class for a collection of vehicles, using data from the UCI Auto MPG dataset via a Gist. Each point represents an individual vehicle, with its attributes mapped to the x and y axes, while color encodes a categorical variable. The chart is built with the Vega-Lite API, running on top of Vega-Lite, Vega, and D3. The code defines a scatter plot using `vl.markCircle`, with custom axis and label styling configured in a separate `config.js` file.

Oct 6, 2023

Loading thumbnail…

HW2

This interactive parallel coordinate plot visualizes the Iris dataset, with four axes representing sepal length, sepal width, petal length, and petal width. Users can change the attribute mapped to each axis via dropdown menus using ReactDropdown. Hovering over color legend entries filters the displayed lines. The visualization uses D3.js scaleLinear and scaleOrdinal to map data values, with lines rendered as SVG paths via the d3.line generator.

Oct 2, 2023

Loading thumbnail…

HW1_test

This interactive scatter plot visualizes the classic Iris dataset, displaying measurements of sepal and petal dimensions for three flower species. Users can explore relationships between any two numerical attributes using dropdown menus to select variables for the x and y axes. The visualization uses React components with D3 v5 scales and SVG rendering, implementing custom AxisBottom and AxisLeft components along with colored circles to distinguish Iris-setosa, Iris-versicolor, and Iris-virginica specimens.

Sep 25, 2023

Loading thumbnail…

Fork of Scatter Plot with Color

A scatter plot of the Iris dataset shows sepal length against petal length, with points colored by species and a categorical color legend. The D3.js v7 code uses `scaleLinear`, `scaleOrdinal`, and `schemeCategory10`, while loading the CSV data with `csvParse`. Axes and legend are rendered as reusable modules, and the visualization uses a dropdown for future mode selection.

Sep 24, 2023

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset from the UCI Machine Learning Repository. Users select which quantitative attributes to plot on the x- and y-axes through dropdown menus, immediately updating the visualization. Built with D3 v5, the code uses `scaleLinear` for axes, `axisLeft` and `axisBottom` for tick marks, and employs SVG rendering with animated circle transitions.

Sep 24, 2023

Loading thumbnail…

test

This interactive scatter plot explores the classic Iris flower dataset by allowing users to select which measurements to compare on the x and y axes via dropdown menus. The visualization uses D3.js v5 with SVG and animated transitions to render the data points. As users change the axis selections, the plot re-renders with a smooth delay effect, with each circle animating from the center. The code specifically uses `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft` to build the scales and axes.

Sep 21, 2023

Loading thumbnail…

Fork of Assignment 2 2q

This stacked bar chart displays the estimated 2010 religious breakdown of the world’s 20 most populous countries, using data from the Pew Research Global Religious Landscape. Hovering over bars reveals tooltips with exact values, while hovering over the legend highlights the corresponding religion’s segments in the foreground. The visualization uses D3’s `d3.layout.stack` for stacking, `d3.legend` for the color legend, and `d3-tip` for tooltips. The chart is rendered as an animated SVG with scales including an ordinal y-axis and a linear x-axis.

Sep 21, 2023

Loading thumbnail…

Fork of Auto MPG Summary

This fork of the Auto MPG Summary example prints a text summary of a CSV data table. It loads the data from `data.csv` and displays the number of rows, number of columns, and the estimated data size in kilobytes. The visualization then shows the first ten rows of the dataset as a JSON-formatted string. The code uses D3 v5 functions `select`, `csv`, and `csvFormat`, and writes the output to separate `<pre>` elements in the document body. The underlying data originates from the UCI Machine Learning Repository's Auto MPG dataset.

Sep 21, 2023

Loading thumbnail…

Untitled

This example demonstrates a reactive particle system rendered in a browser using React and a custom force-directed layout. It shows a collection of nodes connected by edges, with each node repelled by others and attracted to its links, creating an organic, spring-like network structure. The implementation uses a custom JavaScript physics engine within a React component, updating node positions on each frame via a simulation loop. The visualization adapts to user interaction, with nodes responding to mouse dragging and the entire graph rebalancing continuously, highlighting the interplay between local forces and global topology.

Sep 21, 2023

Loading thumbnail…

HW1

This visualization displays a scatter plot of automobile data from the UCI Auto MPG dataset, mapping miles per gallon on the x-axis and horsepower on the y-axis. Each circle represents a vehicle, with color indicating the country of origin and size encoding vehicle weight. The plot uses the vega-lite-api to construct the chart and d3.csv to load the data. Custom axis and label styling are applied through the vega-lite configuration object, with a tooltip showing vehicle names on hover.

Sep 21, 2023