R

ragregory@dons.usfca.edu

@Roshaun12345·18 public vizzes

Loading thumbnail…

D3 Choropleth Map

This D3 Choropleth Map visualizes U.S. county poverty rates for 2023. Each county is filled with a color from a threshold-based scale indicating the percentage of the population in poverty, with state averages used where county data is missing. The map uses a geoAlbersUsa projection and draws county boundaries via d3.geoPath, with hover interactions revealing a tooltip. Data is sourced from a remote CSV and county geometries from the us-atlas package.

Loading thumbnail…

D3 Proportional Symbols Map

This proportional symbols map displays the cost index of US states using circles positioned by geographic coordinates, with the ten most expensive states highlighted in red. The visualization uses D3 v7 with `d3.geoAlbersUsa` projection and topojson to render state boundaries, while a `d3.scaleSqrt` size scale maps cost index values to circle radii. Hover interactions reveal tooltips, and a legend explains the symbol scaling. Data is loaded from CSV and US Atlas TopoJSON sources.

Loading thumbnail…

A8 -D3 Node Link (Force Direct Layout)

This example displays a force-directed node-link graph, where circles represent nodes and lines represent links. The layout is computed using D3's `d3.forceSimulation` with force directives for links, many-body repulsion, and centering, allowing nodes to arrange organically. Users can drag nodes to reposition them, and the simulation restarts to re-balance the layout. Data is fetched from a remote text source, parsed into node and link arrays, and rendered as an SVG.

Loading thumbnail…

A8 -D3 Adjacency Matrix

This interactive visualization displays an adjacency matrix, using a blue color scale to represent connections between nodes in a network. The matrix is built from data fetched from a remote GitHub Gist, with rows and columns representing nodes and cells indicating the presence of a connection. Built with D3 v7, the SVG rendering includes interactive hover effects via the `d3.select` API, style transitions, and a custom tooltip to highlight specific values.

Loading thumbnail…

A8 -D3 Edge Bundling

This example visualizes a network of nodes and edges using a force-directed layout, with the data sourced from a CSV file containing node and edge information. The visualization shows the interconnected structure of the network, where each node is represented by a circle and each edge by a line, with the spatial arrangement determined by the simulated physical forces. The code uses D3 v6 utilities such as `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` to perform the simulation, while also incorporating `d3.drag` for interactive node manipulation, and the SVG rendering is handled by `d3.select` and `svg.append`. The node and edge elements are styled with CSS classes, and the graph is displayed within an SVG container sized at 1280 by 800 pixels.

Loading thumbnail…

A7 -D3 Small Multiples Chart

This visualization presents Valentine's Day spending trends across six categories—Candy, Flowers, Jewelry, Greeting Cards, Evening Out, and Clothing—from 2010 to 2022. It uses a small multiples layout to display each category as its own line chart, with consistent axes for easy comparison. The charts are built with D3 v6, using `d3.csv` to load data from a remote GitHub gist, `d3.scaleLinear` for axes, and `d3.line` to generate the paths. The color-coded strokes help distinguish each category, and the grid arrangement facilitates side-by-side analysis of spending changes over time.

Loading thumbnail…

A7 -D3 Multi Line Chart

This example displays a multi-line chart tracking Valentine's Day spending trends in the United States from 2010 to 2022 across six categories: candy, flowers, jewelry, greeting cards, evening out, and clothing. It uses D3.js v6 with an SVG rendering to visualize the historical spending data loaded from a CSV file via `d3.csv`. The code employs `d3.scaleLinear` and `d3.axisBottom` for the axes, `d3.line` to generate each category’s path, and `d3.scaleOrdinal` to assign distinct colors to the lines, with a legend built using SVG rectangles and text.

Loading thumbnail…

A7 -D3 Heat Map

This heat map visualizes historical Valentine's Day spending across multiple categories and years, with darker colors indicating higher values. The visualization loads data from a CSV file and renders it as an SVG using D3 v6, employing `d3.scaleBand` for the categorical axes, `d3.scaleSequential` with the Inferno color scheme, and interactive tooltips on mouseover events. A color legend on the right helps interpret the spending scale.

Loading thumbnail…

A6 -D3 Bar Chart

This bar chart shows the distribution of centenarians by country of death or residence, sorted from most to least frequent. The SVG visualization uses D3 v7 scales and axes, with bars colored via a threshold scale based on count. It loads CSV data from a GitHub gist and includes interactive tooltips on mouseover. The chart also provides a legend and clear axis labels.

Loading thumbnail…

A6 -D3 Diverging Bar Chart

This diverging bar chart displays the distribution of the world’s oldest verified people by their birth year, diverging left or right from a central baseline at 1900. Each bar represents a centenarian’s name and the difference between their birth year and 1900, colored by whether they were born before or after that year. The visualization uses the Observable Plot library’s `Plot.plot`, `Plot.barX`, and `Plot.text` APIs, with data processed in JavaScript and rendered as an SVG.

Loading thumbnail…

A5 -D3 Line Chart

This example visualizes the population of US states in 2020 according to their year of admission, using a line chart that plots population over time. The D3.js v7 code loads data from a CSV file with `d3.csv`, sorts it chronologically, and applies time and linear scales with `d3.scaleTime` and `d3.scaleLinear`. It draws the line using `d3.line()` and renders axes and labels with `d3.axisBottom` and `d3.axisLeft`, all within an SVG container.

Loading thumbnail…

A5 -D3 Bubble Chart

This D3.js v7 bubble chart visualizes U.S. states, plotting total area on the x-axis, state names on the y-axis, and population as bubble radius. Color encodes the century of state admission (1700s, 1800s, 1900s). Built with SVG, it uses d3.scaleLinear, d3.scaleBand, and d3.scaleOrdinal. Data is loaded from a CSV via d3.csv. Interactive tooltips appear on hover.

Loading thumbnail…

A4 -D3 Bar Chart

This bar chart displays the distribution of centenarians by country of death or residence, with bars sorted in descending order of count. It is built with D3.v7 using `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. The SVG renders bars with a mouseover tooltip that shows the country name and count. Data is loaded from a CSV file using `d3.csv`.

Loading thumbnail…

Fork of Fork of Visualizing Distributions using P5 (Strip Chart)

This strip chart visualizes the distribution of centenarian ages using a p5.js canvas. The code loads CSV data from a GitHub gist, filters the age column, and maps each age value to a horizontal position while using random vertical placement to create the strip plot. The visualization includes labeled axes, tick marks, and a frequency grid, with data points rendered as red ellipses. Gridlines show cumulative counts along the y-axis, and the title “Centenarian Age Distribution - Strip Plot” appears at the top.

Loading thumbnail…

Visualizing Distributions using P5 (Histogram)

This example visualizes the age distribution of centenarians using a histogram rendered with p5.js. The sketch loads centurians.csv from a GitHub gist, bins ages into four ranges, and draws bars whose heights reflect frequency counts. The code uses p5.js functions like `loadTable`, `createCanvas`, and `rect`, along with mouse-hover detection to display the count for each bar. Axes, labels, and gridlines are drawn manually with p5.js drawing primitives.

Loading thumbnail…

Fork of Visualizing Distributions using P5 (Box Plot)

This visualization displays the age distribution of centenarians using a box plot, showing the minimum, first quartile, median, third quartile, and maximum ages. The p5.js sketch loads data from a CSV file hosted on GitHub, sorts the ages, and maps them to canvas coordinates using the `map()` function. The plot is drawn with rectangles, lines, and ellipses representing the quartiles and whiskers, with axis labels rendered using `text()`.

Loading thumbnail…

P5 CSV Loader Dot Plot Chart

This dot plot chart visualizes California wildfire damage from 1989 to 2017, plotting each year’s number of structures damaged as red circles on a Cartesian grid. The code uses the p5.js library with `loadTable` in `preload()` to fetch CSV data from a GitHub Gist, then draws axes, tick labels, and circles in `draw()` using `ellipse`, with the y-axis scaled to the maximum value via `max()` and `map()`.

Loading thumbnail…

P5 CSV Loader Bar Chart

This bar chart visualizes the number of structures damaged by California wildfires from 1989 to 2017, sourced from a CSV file loaded via p5.js’s `loadTable()`. The sketch uses `preload()`, `setup()`, and `draw()` to render a 2000x3000 canvas, with bars scaled proportionally to the data’s maximum value. Axes, labels, and tick marks are drawn manually using p5.js drawing functions, with year labels rotated for readability alongside the red bars.