H

hxu51@usfca.edu

@Xhy51·57 public vizzes

Loading thumbnail…

Time-Series Chart

This time-series chart displays San Francisco’s community-wide greenhouse gas emissions from 1990 onward, grouped by sector (such as Buildings, Transportation, and Municipal) with each trend drawn as a separate colored line. Data is aggregated by summing the Emissions_mtCO2e column by sector and year from a CSV file. The visualization uses D3 v7’s `d3.rollups`, `d3.scaleLinear`, and `d3.line` with monotone X interpolation, while color comes from the ColorBrewer Set2 palette via `d3.scaleOrdinal`. An interactive tooltip, built with D3’s selection API, appears on mouse events but is not configured to follow the mouse.

Loading thumbnail…

HeatMap

This heatmap visualizes San Francisco municipal greenhouse gas emissions by commodity information across fiscal years 2020–2022, using color intensity to represent the total mtCO₂e per category per year. It reads emissions data from a CSV file, aggregates it with `d3.rollups` and `d3.sum`, and renders an SVG via `d3.scaleBand` for axes and `d3.scaleSequential` with an Orange-Red interpolator for the color gradient. Hovering a cell displays a tooltip with commodity, year, and formatted emissions value.

Loading thumbnail…

Scatter-plot matrix plot

This scatter-plot matrix compares daily air quality (AQI), temperature, and annual municipal greenhouse gas emissions in San Francisco from 2020 to 2022. Each cell pairs two variables, with points colored by year using `d3.scaleOrdinal` and `d3.schemeCategory10`. The code loads both CSV files via `d3.csv` with `d3.autoType`, then aggregates emissions per fiscal year using `d3.rollup`. Tooltips appear on hover, and linear scales per trait are created with `d3.scaleLinear`.

Loading thumbnail…

Choropleth map

A choropleth map shows San Francisco’s 2025 tree-canopy rate by supervisor district, colored on a green sequential scale with a gradient legend and hover tooltips. Built with D3 v7, it uses `d3.geoMercator` and `d3.geoPath` to render GeoJSON district boundaries, while district-level data from a CSV is joined via a `Map`. `d3.scaleSequential` with `interpolateGreens` drives fills, and the vertical legend uses `d3.axisRight` and a linear gradient.

Loading thumbnail…

Scatter Plot Matrix graph

This scatter plot matrix reveals relationships between daily Air Quality Index, temperature, and total municipal greenhouse gas emissions in San Francisco from 2020 to 2022, with points colored by year. It combines data from two CSV files, aggregating emissions by fiscal year to join with daily weather readings. The visualization uses D3 v7's `d3.scaleLinear` for axes, `d3.rollup` for data aggregation, and `d3.schemeCategory10` for color encoding. Each cell displays dots representing individual days, with SVG circles providing interactive tooltips showing exact values.

Loading thumbnail…

Scatter Plot Matrix graph

This scatter plot matrix shows the relationships between air quality (AQI), temperature, and municipal greenhouse gas emissions in San Francisco across fiscal years 2020–2022. Color-coded points for each year visualize correlations between all variable pairs in a grid of small multiples. Built with D3 v7, the visualization uses `d3.csv` for data loading, `d3.rollup` to aggregate emissions data, and `d3.scaleLinear` for axis scales. The SVG rendering applies a categorical color scale via `d3.scaleOrdinal` and draws circles with SVG paths.

Loading thumbnail…

DEMO of connect d3 visulization

This interactive dashboard displays GDP annual percentage change and unemployment rate trends for Sweden, Norway, and Denmark from 2020 to 2024. Two side-by-side line charts, rendered as SVG elements using D3.js (v7.8.5), allow comparison across the three countries, with interactive highlighting and faded lines activated by clicking legend items. A hover tooltip reveals exact values. Data is loaded from remote CSV files using `d3.csv`, with axes configured via `d3.scaleOrdinal` and `d3.timeParse`, and the visualization supports animation through D3’s transition mechanisms.

Loading thumbnail…

Assignment 10: Fixed A3 box plot

This example presents a horizontal box plot of National Aviation System delay counts, drawn with D3.js v7 and rendered as SVG. It visualizes the distribution of delays through a box spanning the interquartile range, whiskers, median line, and steel-blue outlier circles. The chart starts its x-axis at zero for accurate proportional comparison, as noted in an annotation. Using `d3.csv`, `d3.quantile`, and `d3.axisBottom`, the code computes summary statistics and plots them. English annotations, created with the `d3-svg-annotation` library, label the origin, IQR, median, and outliers, while the data comes from a remote CSV file.

Loading thumbnail…

Bad A3 Box Plot gragh

This p5.js visualization critiques a box plot of National Aviation System delays from a filtered airlines CSV dataset. The plot maps delay values to the x-axis while annotating known flaws: a fixed axis maximum of 10,000 seconds compresses the central data, raw outlier dots are drawn at y-axis count positions, and stylized labels exaggerate trends. The code uses p5.js loadTable for data loading, map() for coordinate scaling, and dist() for interactive tooltips on quartile markers and outlier points. The sketch overlays text annotations explaining the misleading design choices.

Loading thumbnail…

Assignment 10: histogram graph White Hat

This histogram visualizes the distribution of National Aviation System delays using a steelblue bar chart with 20 uniform bins. The chart includes four black annotations that explain design choices, such as the zero-based y-axis, equal bin widths, neutral color palette, and interactive tooltip functionality. Built with D3 v7 and d3-svg-annotation, it renders SVG bars with hover tooltips displaying exact range values and counts. The visualization uses CSV data loaded from a GitHub repository, featuring enlarged margins and clear axis labels to ensure readability.

Loading thumbnail…

Assignment 4: histogram graph with D3

This histogram visualizes the distribution of National Aviation System delays, using a neutral steelblue color palette to present the data objectively. It plots the number of flights across delay ranges for a filtered airlines dataset, with the y-axis starting at zero to avoid exaggerating differences. The visualization is built with D3 v7, using d3.csv to load the data, d3.histogram to bin values, and d3.scaleLinear for both axes. D3 annotations add callout labels explaining design choices like consistent bar widths, while a hover tooltip provides interactive detail.

Loading thumbnail…

Assignment 10: histogram graph Black Hat

A histogram visualizes the distribution of National Aviation System delays from a filtered airlines CSV dataset, revealing that delays cluster at low values with a few extreme outliers. Red bars represent bin counts, with hover tooltips showing exact ranges and frequencies. The chart uses D3.js v7 with `d3.histogram()`, `d3.scaleLinear()`, and `d3.axisBottom()`/`d3.axisLeft()`. Four d3-svg-annotation elements, including labels, callout circles, elbows, and rectangles, highlight peak delay zones and pose critical questions about systemic mismanagement.

Loading thumbnail…

A9 Tokyo Choropleth Map

A Tokyo choropleth map colors the city’s 23 wards according to their 2020 population, using a blue threshold scale with six bins from under 200,000 to over one million. The map’s SVG paths are drawn with `d3.geoPath` and a Mercator projection, while the color encoding relies on `d3.scaleThreshold` and `d3.schemeBlues`. A hover tooltip displays each ward’s name and population, and a horizontal legend from `d3-legend` labels the population ranges. The data comes from a GeoJSON file of ward boundaries and a CSV of population figures.

Loading thumbnail…

A9 World Choropleth Map

A9 World Choropleth Map visualizes GDP per capita across countries in 2022 using a Mercator projection and a threshold color scale from `d3.scaleThreshold` and `d3.schemeBlues`. The map, rendered as SVG, colors each country path via `d3.geoPath`, with gray for missing data, and includes interactive tooltips showing country name and GDP value on mouseover. A separate SVG legend, built with `d3.legendColor`, displays the color thresholds. The code loads GeoJSON country boundaries and CSV economic data using `d3.json` and `d3.csv` with a queued `d3.queue`.

Loading thumbnail…

A9 Proportional Symbols Map

This proportional symbols map displays transportation costs for U.S. states, with circle size scaled by each state’s cost index and red circles highlighting the top ten most expensive states. It renders via D3.js v7 using `d3.geoAlbersUsa`, `d3.geoPath`, and `topojson-client` to draw state boundaries, while `d3.scaleSqrt` maps cost values to circle radii. Hovering reveals a tooltip with the state name and cost. The legend indicates cost ranges, and the underlying CSV data provides geographic coordinates.

Loading thumbnail…

A9 US Choropleth Map

This example shows a choropleth map of U.S. state poverty rates using 2023 data from Poverty2023.csv. The map colors each state with a sequential red scale based on the percentage of the population living below the poverty line, with missing data rendered in gray. Hovering over a state displays a tooltip with the state name and its poverty rate. The visualization uses D3 v7’s `d3.geoPath` with the `geoAlbersUsa` projection to render state boundaries from TopoJSON, and `d3.scaleSequential` with `d3.interpolateReds` for color encoding.

Loading thumbnail…

Assignment 8 adjacency matrix representation

This adjacency matrix visualizes connections between food-related nodes, using blue filled cells to represent edges from a source node to a target node. Hovering over a cell highlights the corresponding row and column labels and cells, displaying the source and target names in a tooltip. The visualization is built with D3.js v7, rendering as an SVG with 12-pixel cells, and reads node and edge data from CSV files.

Loading thumbnail…

Assignment 8 Node-link diagram

This example shows a circular node-link diagram of food-related entities, with edges between connected nodes bundled together to reduce visual clutter. It uses d3.csv to load food_nodes.csv and food_edges.csv, then renders the structure with d3.hierarchy and d3.cluster to position nodes radially. The visualization uses d3.lineRadial with a curveBundle beta curve, where the tension is adjustable via a slider that updates the bundled paths dynamically. Hovering over a node highlights all links connected to that node, and the SVG is interactive with d3.zoom.

Loading thumbnail…

Assignment 8 node-link diagram (force-directed)

A force-directed node-link diagram visualizes 200 Bitcoin nodes and their connections, with links drawn as curves that highlight neighbors when hovering over a node. The graph uses d3.forceSimulation with forceLink and forceManyBody to position nodes, while d3.curveBundle generates the curved edge paths. Data is loaded from bitcoin_nodes.csv and bitcoin_edges.csv, rendered as SVG circles and text labels. The interaction filters shown links by applying a CSS highlight class based on source or target matching the hovered node.

Loading thumbnail…

Assignment 8 adjacency matrix

This visualization shows an adjacency matrix of the top 200 nodes from a Bitcoin transaction network, with blue cells indicating directed edges between source and target nodes. The matrix is rendered as an SVG grid using D3 v7, where each row and column represents a node, allowing users to identify connection patterns and hubs. Hovering over any cell highlights the corresponding row and column labels and displays a tooltip with the source and target IDs. The code uses `d3.csv` to load the node and edge data, then constructs and displays the matrix with `d3.select` and SVG `<rect>` elements.

Loading thumbnail…

Assignment 8 node-link diagram (force-directed)

This interactive adjacency matrix visualizes connections within a food-related network dataset. Hovering over a cell highlights its entire row and column, revealing the source and target node names in a tooltip. Built with D3.js v7, it uses an SVG rendering approach with `d3.csv` to load data files and matrix mapping from `food_edges.csv` to display the graph structure. The visualization animates tooltip opacity transitions on mouse events, providing an intuitive way to explore the bipartite relationships between food entities.

Loading thumbnail…

Assignment 8 adjacency matrix

This adjacency matrix visualizes relationships in a Bitcoin network, showing connections between nodes as colored cells in a square grid. Built with D3 v7, the visualization renders an SVG matrix where blue cells indicate edges between source and target node IDs, with node labels along both axes. Interactive features include hover highlighting that emphasizes the corresponding row and column labels while displaying a tooltip with the specific source and target pair. The implementation loads edge data from a CSV file and uses D3's data binding and selection methods to construct and style the matrix cells.

Loading thumbnail…

Assignment 8 node-link diagram (force-directed)

A circular node-link diagram arranged by a hierarchy, with edges bundled using D3's `d3.lineRadial` and `d3.curveBundle` to show connections between food-related entities. The chart, rendered as an SVG, draws food nodes from `food_nodes.csv` and edges from `food_edges.csv`, coloring links orange on hover to highlight a selected node's relationships. A slider adjusts the tension of the bundled curve, interactively reshaping the edge paths. The data, attributed to “Xhy51”, likely represents a network of food brands and chefs.

Loading thumbnail…

Assignment 8 Node-link diagram

This node-link diagram visualizes the connections between food-related Facebook pages and their chefs. The graph uses a force-directed layout where each node represents a page and links show relationships from an edges.csv file. The code loads data with `d3.csv`, then applies `d3.forceSimulation` with `forceLink` and `forceManyBody` to position nodes and edges. The SVG rendering updates positions on each tick, placing labels directly on nodes and styling links with a gray stroke.

Loading thumbnail…

A7 Heat Map

This heat map visualizes airline carrier delays across months and years, using a blue sequential color scale to show delay frequency. The SVG visualization is built with D3 v7, positioning cells via `d3.scaleBand` for the x-axis (months) and y-axis (years), while `d3.scaleLinear` maps delay counts to color intensity. Interactive tooltips appear on mouseover, and a legend is generated using the d3-legend library. Data comes from a CSV file of filtered airline statistics hosted on GitHub.

Loading thumbnail…

A7 Streamgragh

This streamgraph visualizes total carrier delays across multiple airports over time, with each colored stream representing an airport. The chart is built using D3 v7, utilizing `d3.rollup` for data aggregation, `d3.stack` with `stackOffsetWiggle` for stream layout, and `d3.area` for path generation. It includes interactive hover tooltips and a legend created with the d3-legend library. The data comes from a CSV file of filtered airline statistics, rendered as SVG elements with axes and labels.

Loading thumbnail…

A7 Multi-Line Chart

This multi-line chart visualizes average annual flight delays across four airline categories using CSV data from a GitHub-hosted airlines dataset. The visualization employs D3.js v7 with SVG rendering, displaying four distinct colored lines with interactive circle markers. The chart uses d3.scaleLinear, d3.line, and d3.axisBottom, while implementing hover-based tooltips to reveal specific year and delay values. ColorBrewer provides the categorical color scheme for distinguishing between airline groups.

Loading thumbnail…

A7 Small Multiples Lines chart

This small multiples line chart displays yearly average carrier delay counts for multiple airports, with each airport shown in its own grid cell using a shared y-axis scale. The visualization is built with D3 v6 and renders as SVG, using `d3.csv` to load data, `d3.groups` to nest records by airport and year, and `d3.mean` to aggregate delay values. Each chart includes axes via `d3.axisBottom` and `d3.axisLeft`, a line generated with `d3.line` and `curveMonotoneX`, and hover tooltips triggered by mouse events on data circles.

Loading thumbnail…

A7 Small Multiples Lines chart

This heatmap visualizes carrier delay counts across months and years for U.S. airlines, using color intensity to show delay severity (from light to dark blue). Built with D3 v7, it maps data to a filled grid of SVG rectangles, with year and month on the axes and hover tooltips for exact values. It includes a linear color legend and uses scales from `d3.scaleBand` and `d3.scaleLinear`, while the data comes from a CSV hosted on GitHub.

Loading thumbnail…

A7 Small Multiples Lines chart

This heatmap visualizes carrier delay counts across months and years for U.S. airlines, using color intensity to show delay severity (from light to dark blue). Built with D3 v7, it maps data to a filled grid of SVG rectangles, with year and month on the axes and hover tooltips for exact values. It includes a linear color legend and uses scales from `d3.scaleBand` and `d3.scaleLinear`, while the data comes from a CSV hosted on GitHub.

Loading thumbnail…

Assignment 6: Line Chart with Color Legend

This visualization displays average carrier values per airport category across years as a multi-line chart, with each of four categories drawn as a distinct colored line. The chart uses D3.js v7, loading data from a remote CSV file and aggregating it by year and category. It leverages D3’s `scaleLinear` for axes, `scaleOrdinal` with a ColorBrewer `Set2` palette for the categorical color scheme, and `d3.line` for path generation. An HTML/SVG legend, built via the d3-legend library, accompanies the plot, with axes and lines styled via CSS.

Loading thumbnail…

Fork of Assignment 6: Bar Chart with Color Legend

This example shows carrier delay counts for various airports in a bar chart, with each bar colored on a blue sequential scale to encode delay severity. The visualization loads data from a remote CSV file using `d3.csv`, then renders an SVG with `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. It uses ColorBrewer’s Blues palette via `d3.interpolateRgbBasis` to create the color mapping, and the `d3-legend` library’s `d3.legendColor` to display a matching color legend. Axis labels are rotated with SVG attributes, and bars use `d3.axisBottom` for x-axis ticks.

Loading thumbnail…

Fork of Assignment 6: Diverging Bar Chart with Color Legend

This visualization shows a diverging bar chart of carrier delays for various airports, with each bar colored by its deviation from the average delay. The chart uses a D3 v7 SVG rendering with a ColorBrewer RdBu diverging color scale applied through `d3.scaleDiverging`. A color legend is generated using the `d3.legend` library, displaying the deviation values. Data comes from a remote CSV file, where delays are parsed and deviations computed via `d3.mean`. Horizontal bars extend left or right from a zero baseline, and both axes are rendered with D3’s `d3.axisLeft` and `d3.axisBottom`.

Loading thumbnail…

Assignment 6: Scatterplot with Color Legend

This D3.js v7 SVG scatterplot displays the relationship between the number of carrier delays and late aircraft delays at various airports, with each point colored by airport name using a ColorBrewer Set3 qualitative scale. The visualization encodes two quantitative variables along the axes and a categorical variable through color, with a manually constructed legend listing the 12 unique airports. The code loads CSV data from a remote GitHub repository, applies linear scales for both axes, and uses d3.axisBottom and d3.axisLeft for tick marks, while the d3-legend library is included but the legend items are appended manually as colored rectangles.

Loading thumbnail…

Assignment 6: Bar Chart with Color Legend

This example presents a bar chart of carrier delays by airport, with bars colored on a sequential blue scale and a corresponding color legend. The chart loads data from a remote CSV file using `d3.csv`, scales the x-axis with `d3.scaleBand` and the y-axis with `d3.scaleLinear`, and renders rectangles in SVG. The color encoding uses `d3.scaleSequential` with `d3.interpolateBlues`, while the legend is generated via the `d3-legend` plugin’s `d3.legendColor`.

Loading thumbnail…

Assignment 5: scatterplot matrix with D3

This example presents a 3x3 scatterplot matrix using airline delay data loaded from a CSV file, displaying relationships between carrier delays, late aircraft delays, and NAS delays. Each cell pairs two variables, with diagonal labels and interactive features including tooltips on hover and brush-based selection that highlights data points across all panels. The visualization is built with D3 v7, using d3.csv to load data, d3.scaleLinear for axes, and d3.brush for filtering, all rendered as SVG elements with circle markers.

Loading thumbnail…

Assignment 5: bubble plot with D3

This bubble chart visualizes airline delay data, mapping the number of late aircraft delays on the x-axis, national aviation system delays on the y-axis, carrier delays as bubble size, and month as color. Built with D3 v7, the chart uses SVG and includes interactive tooltips that display airport details on hover. The code loads data from a CSV file, filters out zero values, and applies scales including `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal` with a categorical color scheme. Axis labels and a legend are rendered using standard D3 components, with a `d3.legend` library for the color key.

Loading thumbnail…

Assignment 5: line chart with D3

This line chart visualizes monthly airline delay counts from June 2003 to July 2016, comparing three delay types: Carrier, Late Aircraft, and National Aviation System delays. The chart uses a time scale for the x-axis spanning over 13 years, with data points horizontally offset within each month to reduce overlap. Built with D3 v7, it loads CSV data via `d3.csv`, parses dates with `d3.timeParse`, and renders SVG paths using `d3.line` with monotone curve interpolation. Interactive tooltips appear on mouseover, and axes use `d3.axisBottom` with custom month formatting.

Loading thumbnail…

Assignment 4: scatter plot with D3

This scatter plot visualizes the relationship between carrier delays and late aircraft delays using flight data loaded from a remote CSV file. Red circles represent individual data points, with axes labeled for each delay type and interactive tooltips appearing on hover to show exact values. The visualization uses D3 v7 with SVG rendering, employing `d3.csv` for data loading, `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and mouse event handlers for tooltip interactions.

Loading thumbnail…

Assignment 4: boxplot with D3

This example visualizes the distribution of carrier delays from a CSV dataset using a single vertical boxplot. The chart displays the minimum, first quartile, median, third quartile, and maximum values, with interactive tooltips revealing summary statistics on hover. Built with D3.js version 7, the code loads data via `d3.csv`, computes quantiles using `d3.quantile`, and renders the boxplot as SVG elements.

Loading thumbnail…

Assignment 4: boxplot with D3

This example visualizes the relationship between carrier delays and late aircraft delays using a scatter plot of flight data from a CSV file. Each red circle represents a data point, with tooltips displaying the exact delay values on hover. The visualization is built with D3.js (v7), using `d3.csv` for data loading, `d3.scaleLinear` for axes scaling, and `d3.axisBottom`/`d3.axisLeft` for rendering the chart axes.

Loading thumbnail…

Assignment 4: boxplot with D3

This example visualizes the relationship between carrier delays and late aircraft delays using a scatter plot of flight data from a CSV file. Each red circle represents a data point, with tooltips displaying the exact delay values on hover. The visualization is built with D3.js (v7), using `d3.csv` for data loading, `d3.scaleLinear` for axes scaling, and `d3.axisBottom`/`d3.axisLeft` for rendering the chart axes.

Loading thumbnail…

Assignment 4: boxplot with D3

This example visualizes the relationship between carrier delays and late aircraft delays using a scatter plot of flight data from a CSV file. Each red circle represents a data point, with tooltips displaying the exact delay values on hover. The visualization is built with D3.js (v7), using `d3.csv` for data loading, `d3.scaleLinear` for axes scaling, and `d3.axisBottom`/`d3.axisLeft` for rendering the chart axes.

Loading thumbnail…

Assignment 4: boxplot with D3

This example visualizes the relationship between carrier delays and late aircraft delays using a scatter plot of flight data from a CSV file. Each red circle represents a data point, with tooltips displaying the exact delay values on hover. The visualization is built with D3.js (v7), using `d3.csv` for data loading, `d3.scaleLinear` for axes scaling, and `d3.axisBottom`/`d3.axisLeft` for rendering the chart axes.

Loading thumbnail…

Assignment 4: boxplot with D3

This example visualizes the relationship between carrier delays and late aircraft delays using a scatter plot of flight data from a CSV file. Each red circle represents a data point, with tooltips displaying the exact delay values on hover. The visualization is built with D3.js (v7), using `d3.csv` for data loading, `d3.scaleLinear` for axes scaling, and `d3.axisBottom`/`d3.axisLeft` for rendering the chart axes.

Loading thumbnail…

Assignment 4: boxplot with D3

This example visualizes the relationship between carrier delays and late aircraft delays using a scatter plot of flight data from a CSV file. Each red circle represents a data point, with tooltips displaying the exact delay values on hover. The visualization is built with D3.js (v7), using `d3.csv` for data loading, `d3.scaleLinear` for axes scaling, and `d3.axisBottom`/`d3.axisLeft` for rendering the chart axes.

Loading thumbnail…

Assignment 4: boxplot with D3

This example visualizes the relationship between carrier delays and late aircraft delays using a scatter plot of flight data from a CSV file. Each red circle represents a data point, with tooltips displaying the exact delay values on hover. The visualization is built with D3.js (v7), using `d3.csv` for data loading, `d3.scaleLinear` for axes scaling, and `d3.axisBottom`/`d3.axisLeft` for rendering the chart axes.

Loading thumbnail…

Assignment 4: boxplot with D3

This example visualizes the relationship between carrier delays and late aircraft delays using a scatter plot of flight data from a CSV file. Each red circle represents a data point, with tooltips displaying the exact delay values on hover. The visualization is built with D3.js (v7), using `d3.csv` for data loading, `d3.scaleLinear` for axes scaling, and `d3.axisBottom`/`d3.axisLeft` for rendering the chart axes.

Loading thumbnail…

Assignment 4: Bar Chart with D3

This bar chart visualizes the top 10 airports ranked by total carrier delay minutes, using a logarithmic y-scale to accommodate wide value ranges. The visualization loads CSV data via `d3.csv`, aggregates values with `d3.rollup`, and renders SVG bars using `d3.scaleLog` and `d3.scaleBand`. Interactive tooltips appear on hover, displaying the airport code and delay count, while axes are generated with `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

A3 strip Plot gragh

This interactive strip plot visualization uses p5.js to display the distribution of late aircraft delays from a CSV dataset of airline statistics. The visualization renders each delay value as a blue circle along the x-axis, with vertical jittering to prevent overlapping points. Hovering over any point triggers a tooltip showing the exact delay count. The chart includes labeled axes and tick marks, with data loaded via `loadTable` from a remote CSV file and mapped to canvas coordinates using p5.js's `map()` function.

Loading thumbnail…

A3 histogram gragh

This p5.js visualization displays a histogram of airline carrier delay counts, loaded from a remote CSV file hosted on GitHub. The sketch uses `loadTable()` to fetch the data before drawing, then computes 10 bins from the delay values and renders them as blue rectangles on a canvas with grid lines and labeled axes. Tooltips reveal exact counts when the mouse hovers over each bar. The x-axis labels carrier delays while the y-axis shows the number of delays, with axis titles rotated via `translate()` and `rotate()`.

Loading thumbnail…

A3 Box Plot gragh

This example displays a box plot of National Aviation System delay counts from a filtered airline dataset, loaded from a GitHub-hosted CSV file and rendered with p5.js. It visualizes the distribution with quartiles, whiskers, and individual outliers, calculated using a custom quantile function and the 1.5×IQR rule. The sketch maps data values to canvas coordinates via the `map()` function, draws the plot with p5.js primitives like `rect()` and `ellipse()`, and includes interactive hover tooltips that show exact values when the mouse is near a statistical point.

Loading thumbnail…

Heat Chart of P5 CSV Loader in CS 360

This heat chart visualizes average fuel economy (mpg) across model years and cylinder counts from a CSV dataset of cars. The p5.js `loadTable()` function fetches the data, while `createCanvas()` and `rect()` draw the color-coded grid. Cell colors map from blue to orange using `map()`, with gray indicating missing year-cylinder combinations. The axes labels and title are rendered using p5.js `text()`.

Loading thumbnail…

Bar Chart of P5 CSV Loader in CS 360

This example displays a horizontal bar chart of fuel economy (mpg) for a list of car models, sorted by name. It loads the data from a remote CSV file using p5.js’s `loadTable()` in the `preload()` function, then parses the columns into arrays. The sketch draws axes, gridlines, and bars with `rect()` in `drawHorizontalBarChart()`, mapping economy values to bar lengths with `map()` and labeling each bar with truncated car names.

Loading thumbnail…

Fork of Dot Plot Chart of P5 CSV Loader in CS 360

This example visualizes car data from a CSV file, plotting each vehicle as a dot based on its weight (logarithmic scale on the x-axis) and fuel economy (linear scale on the y-axis). The p5.js sketch loads the data using `loadTable` in `preload()`, calculates column minimums and maximums, and renders interactive dots with tooltips showing car name, weight, and MPG on hover. Grid lines and axis labels are drawn manually. The code uses `map()` and a custom `mapLog()` function for coordinate scaling, and `createCanvas()` for a 900×700 pixel display.

Loading thumbnail…

Fork of Dot Plot Chart of P5 CSV Loader in CS 360

This example visualizes fuel economy (mpg) for a small set of cars, with each car represented as a horizontal bar sorted by its name, using p5.js. The sketch loads a CSV dataset of car specifications from a GitHub gist via the `loadTable()` function, then maps the economy values to bar widths on a custom-drawn axis. The chart uses `createCanvas()` and `map()` to scale the data, and truncates long car names to keep the display legible.

Loading thumbnail…

Snowman in p5

This example builds a simple snowman illustration using the p5.js library in the VizHub V3 runtime environment. It draws three overlapping white circles to form the snowman's body, then adds black dots for eyes, a triangle for a nose, and an arc for a smile. The sketch uses standard p5.js functions like `createCanvas`, `circle`, `triangle`, and `arc` within the `setup` and `draw` blocks, rendering a static scene on an 800 by 800 canvas.