ahuynh8@dons.usfca.edu

Assignment11 Interactions

This example presents three temperature time-series lines for New York, San Francisco, and Austin, loaded as TSV data and rendered as SVG paths with a basis curve. It uses D3 v7 scales (`d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`) and axes (`d3.axisBottom`, `d3.axisLeft`). Users can hover over city labels to dim non-matching lines, click to toggle each line’s visibility, and reorder lines by hovering. The visualization demonstrates interactive selection, filtering, and layering through D3 selections and style manipulation.

Final Project Timeline Chart

Final Project Import/Export Bar Graph

This chart displays U.S. grain exports and imports for the year 2023, with horizontal bars for each grain type plotted side-by-side against separate linear scales for exports and imports. Built with D3 v6 and rendered as SVG, it uses `d3.csv` to load annual data from two remote CSV files, `d3.scaleBand` for the categorical axis, and `d3.scaleLinear` for the quantitative values. D3 legend and topojson libraries are also included, though the legend is not visibly used in the final rendering.

Final Project Time Scatter Plot

Final Project Chloropleth Map

Assignment 8 Force-Directed Node-Link Diagram

This force-directed node-link diagram visualizes a food network, with nodes representing individual food items and links showing relationships between them. The graph uses a physical simulation to position nodes, which are drawn as small green circles connected by black lines, and includes tooltips for interaction. The visualization is rendered with D3 v6, using `d3.forceSimulation` with `d3.forceCenter`, `d3.forceManyBody`, and `d3.forceLink` to drive the layout. Data is loaded from two external CSV files containing node and edge definitions, with the SVG output sized at 2500 by 2000 pixels.

Assignment 9 World Chloropleth Map

Assignment 9 Chloropleth Map

Assignment 9 Proportional Symbols Map

Assignment 7 Heat Map with Tooltips

This heat map visualizes average monthly prices for four leafy greens—spinach, cress, mustard, and fennel—using a sequential green color scale to encode price levels, with a d3-legend color bar and interactive tooltips that display exact prices on hover. The visualization is built with D3 v6, using SVG rendering and scales such as `d3.scaleBand` for the x (date) and y (commodity) axes, while `d3.scaleSequential` with `d3.interpolateBuGn` drives the color encoding. Data is loaded from a CSV file via `d3.csv`, filtered to include only the specified commodities, and rendered as rects with hover events for tooltip feedback.

Assignment 7 Multi-Line Time Series Plot

This multi-line time series plot shows the average prices of four gourd varieties—bottle, bitter, smooth, and snake gourd—in Nepal over time, with each commodity distinguished by color. The visualization first filters the CSV data to these four categories, then groups the records by commodity using `d3.group`. It renders separate SVG paths via the `d3.line` generator, with a time-scaled x-axis and a linear y-axis for price in NPR. A color legend, created with the `d3-legend` library’s `legendColor` function, identifies each line, while axes are generated using `d3.axisBottom` and `d3.axisLeft`. The data comes from a remote CSV file, and the chart is drawn entirely with SVG.

Assignment 6 Scatter Plot With Color Scale

This scatter plot visualizes Pokémon HP against Speed, with each point colored by the Pokémon’s generation using a qualitative color scale. The chart shows a positive trend, where higher Speed often correlates with higher HP, while the color legend distinguishes all seven generations. The visualization is rendered as an SVG using D3.js v6, with linear scales for the axes and an ordinal scale for the color mapping. Data is loaded from a CSV file via `d3.csv`, and the legend is generated using the `d3-legend` library.

Assignment 6 Diverging Bar Chart

The chart compares average Attack and Defense stats across Pokémon generations using horizontal diverging bars, with Attack extending rightward and Defense leftward from a central axis. It employs D3 v6 to create an SVG visualization, using scaleBand for the categorical y-axis and separate linear scales for each metric. Bars are colored with a blue-red interpolated scale, and a d3-legend legend distinguishes the two directions. Data comes from a CSV file containing per-generation averages, rendered as static rectangles without animation.

Assignment 6 Bar Chart With Sequential Color Scale

This bar chart displays the average Attack Power of Grass-type Pokémon across different Generations, with bars colored using a sequential blue-green color scale to represent value magnitude. The visualization is rendered as an SVG using D3 v6, employing `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleSequential(d3.interpolateBuGn)` for color encoding. A color legend is added via the `d3.legendColor()` API. Data is loaded from a CSV file containing Generation and Grass attack averages.

Assignment 5 Bubble Plot D3

This bubble plot visualizes Pokémon Attack and Defense stats, with HP mapped to bubble size and Generation mapped to color. It uses a D3.js v6 SVG scatter plot, scaling x and y axes with `d3.scaleLinear` and applying `d3.scaleOrdinal` for the categorical color scale. The underlying CSV data is fetched via `d3.csv` and drawn as circles using the standard D3 selection, enter, and append pattern, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Assignment 5 Line D3

This line chart visualizes the average attack power of Fire, Grass, Water, and Dark Pokémon types across multiple generations. The SVG rendering uses D3.js v6 with `d3.scalePoint` for the x-axis and `d3.scaleLinear` for the y-axis, plotting four colored line paths from CSV data loaded via `d3.csv`. The chart includes axes, a title, and a manual legend with colored rectangles.

Assignment 4 Bar Chart D3

This example presents a bar chart showing the average attack power of Fire-type Pokémon across different generations. The chart uses D3.js version 6 to load CSV data from a GitHub repository, scale the categorical and quantitative axes with `d3.scaleBand` and `d3.scaleLinear`, and render SVG rectangles. Axis ticks are generated via `d3.axisBottom` and `d3.axisLeft`, with labels applied directly to the SVG canvas.

Assignment 4 ScatterPlot D3

This scatter plot visualizes the relationship between Attack and Defense stats for Pokémon, with each circle representing a single Pokémon. The visualization uses D3 v6 to load CSV data from a GitHub gist and render an SVG chart with linear scales mapping attack values to the x-axis and defense values to the y-axis. The code explicitly uses d3.csv, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.selectAll to create the circles, axes, and labels, while styling circles with a mediumpurple fill and black stroke.

Assignment 3 Strip Chart

This strip chart visualizes the distribution of Pokémon Attack statistics across seven types (Bug, Dark, Fire, Grass, Ground, Normal, Water), loaded from a CSV file hosted on GitHub. The p5.js sketch draws each data point as a jittered dot (via `random()`) along vertical columns for each type, with a light grid background, axis labels, and a title. Attack values are mapped to the y-axis using linear scaling, allowing viewers to compare range and density across categories. The rendering uses `createCanvas`, `preload` with `loadTable`, and `point` calls within the `draw` loop.

Assignment 3 Box Plot

A box plot visualizes the distribution of HP values for Pokémon, displaying the minimum, first quartile, median, third quartile, and maximum as horizontal line segments connected by whiskers. The chart uses the p5.js library within a single sketch, loading Pokémon statistics from a CSV file via the `loadTable` function. Data is sorted, quartiles are computed manually, and the plot is drawn on a 500-by-700 canvas with a background grid, axis labels, and rotated text for the y-axis label.

Assignment 3 Histogram

This interactive histogram displays the distribution of Attack stat values across Pokémon from a CSV dataset. Built with p5.js, the visualization queries a remote CSV file via `loadTable()`, then uses a `preload()` function to load and parse the data before rendering. The code manually bins Attack values into ten intervals (0–20, 20–40, etc.) and draws each bar using `rect()` with heights proportional to the counts. The canvas displays grid lines, axis labels, and a title, with the y-axis rotated using `rotate()` to show the count axis vertically.

Assignment 2 Dot Chart

A p5.js dot chart displays the number of Pokémon per generation across six generations. It loads data from a CSV file containing Pokémon stats, counts entries by generation, and plots the resulting totals as points along a horizontal count axis. The visualization uses p5.js functions including `loadTable`, `createCanvas`, `line`, `point`, and `text` to render axes, tick marks, labels, and data points on a 450×425 canvas. The chart shows that Generation 1 has the highest count, with subsequent generations progressively lower.

Assignment 2 Heat Map

This heat map visualizes the average attack values of Pokémon across seven types—Bug, Dark, Fire, Grass, Ground, Normal, and Water—for six generations, using a purple sequential color scale from light to dark to indicate increasing attack ranges. Each type is displayed as a row of colored squares, with one square per generation, alongside a legend showing six bins (0–20, 20–40, up to 100+). The visualization loads CSV data from GitHub using p5.js’s `loadTable`, then renders the grid and labels with the Canvas API and `rect` and `text` functions in `draw()`.

Fork of Heatmap with p5.js

This heatmap visualizes abortion rates for 15–17-year-olds across eight U.S. states over sixteen years, using a green color scale from dark (low rates) to light (high rates). Data comes from a Kaggle dataset on pregnancy, birth, and abortion rates. Built with p5.js, the sketch loads a CSV via `loadTable()`, iterates through rows to draw color-coded squares using `square()`, and maps values to five discrete color bins. It includes axis labels, a title, and a legend with rate ranges.

CS 360 Assignment 2 Bar Chart

This bar chart displays the count of Pokémon across twelve primary types, including Bug, Dark, Dragon, Electric, Fire, Grass, Ground, Normal, Psychic, Rock, Steel, and Water. The visualization uses the p5.js library, loading data from a remote CSV file via `loadTable` and rendering vertical bars with `rect` based on type frequencies. The chart includes labeled axes, a numeric scale showing counts, and a rotated y-axis title, providing a clear categorical comparison of Pokémon type distribution.

practice

This example demonstrates a minimal React application that renders a static text message. The interface displays the phrase “Hello React!” centered on a white background. The implementation relies on the `createRoot` API from `react-dom` to mount an `App` component, which is defined with JSX and a CSS class for styling. The code imports React and uses the UMD builds of React 18.2.0 and ReactDOM, loaded via a CDN, to bootstrap the root element.