D

Daniel Ribaudo

@Ironraptor3·29 public vizzes

Loading thumbnail…

Machine Learning Project - Histogram of Categories Refactored

This visualization compares category distributions from the Tsinghua-Tencent 100K dataset as horizontal bar charts, using Observable Plot’s `plot()` with `barX` marks and steel-blue reference lines for category averages. A dropdown menu filters results by dataset folder, while a file upload button lets users load a custom JSON file for side-by-side comparison. Bars are colored green or red depending on whether counts exceed the average, and the two charts render independently in separate scrollable containers using d3’s `group()` and `mean()` for data aggregation.

Loading thumbnail…

Total Sales of Video Games by Genre

This line graph shows total video game sales by genre over time, with an interactive dropdown to switch between global, North American, European, Japanese, and other regional sales figures. The visualization uses Observable Plot’s `Plot.line` and `Plot.frame` to render the SVG marks, alongside D3’s `rollup` and `sum` for data aggregation. A custom color legend is generated via `Plot.cellX` and appended to the chart. The dataset comes from the Video Game Sales Dataset prepared by Daniel Ribaudo.

Loading thumbnail…

Final Iteration Line Graph: vgsales.csv

This visualization presents video game sales across five regions—Global, North America, Japan, EU, and Other—as small multiples, with each genre shown as a colored line plotted against time. Users can hover over the legend to highlight specific genres, click to toggle their visibility, and hide entire charts by clicking their titles. Built with D3.js v6, the SVG rendering supports synchronized zooming and panning across all charts via mouse wheel and drag interactions, with axes redrawn using `axisBottom` and `axisLeft` to match the current viewport.

Loading thumbnail…

Refactored Iteration Line Graph: vgsales.csv

This interactive small-multiple chart displays video game sales over time across five regional markets, with each facet corresponding to a sales category (global, North America, Japan, EU, and other). A legend color-codes twelve genres, allowing users to hover to highlight a genre’s lines or click to toggle its visibility. Built with D3 v6, the SVG visualization fetches data from a GitHub gist and aggregates sales by year and genre via `d3.flatRollup` and `d3.sum`. Users can pan by dragging, zoom with the mouse wheel, and reset the view, while axes dynamically redraw their domains using `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Machine Learning Project - Histogram of Categories

This histogram visualizes the distribution of object categories in the Tsinghua-Tencent 100K dataset, with bars colored green or red depending on whether each category’s count exceeds the average. Built with Observable Plot, it uses `Plot.barY` with sorted bars and a red `Plot.lineY` reference line marking the mean. Data is loaded via `d3.json` with `autoType`, and the chart width scales dynamically with category count. The visualization highlights uneven class representation in the machine learning dataset.

Loading thumbnail…

Video Game Platforms Streamgraph

This streamgraph visualizes global video game sales by platform over time, using a D3 stack layout with wiggle offset to create the flowing layered form. The data comes from a CSV file containing yearly sales figures, smoothed with array-blur for visual clarity. Colors are generated using d3.hcl and randomNormal, while the streamgraph is rendered as SVG with d3.area and labeled using d3-area-label. Hovering highlights a platform by inverting its fill to black with a white stroke.

Loading thumbnail…

Machine Learning Project - Bar chart of Sign Amounts

This example displays a bar chart of sign counts per image from the Tsinghua-Tencent 100K dataset. Each bar represents the number of traffic signs found in a single image, with the x-axis showing the sign count and the y-axis showing the frequency of images with that count. The code fetches JSON data using d3.json, processes it to tally image counts, and renders the visualization using Observable Plot’s Plot.barY and Plot.frame APIs. The chart resizes dynamically to the browser window dimensions.

Loading thumbnail…

Video Games by Genre: Updated Streamgraph

This streamgraph shows annual video game sales by genre, with a dropdown to switch between global, North American, European, Japanese, and other regional sales. Built with D3 v6 and Observable Plot, it uses `Plot.areaY` with `Plot.stackY` and `Plot.binX` to aggregate the data, while a custom `colorLegend` function renders a supplementary legend. The visualization fills missing year-genre combinations with zero-value entries to fix artifacts. It draws from the Video Game Sales Dataset prepared by Daniel Ribaudo.

Loading thumbnail…

(Labelled outliers) Video Game Publishers by Genre

This visualization displays video game publisher success by genre through a series of small multiples scatter plots, where each genre gets its own facet. The plots show the mean versus variance of global sales for each publisher within that genre. Outlier publishers are labeled directly on the chart with their names, using a z-score threshold to determine which points receive text annotations. The code uses Observable Plot within a D3 v6 environment, loading game sales data from a CSV file, and employs d3.rollup to aggregate the data by publisher and genre before computing mean and variance statistics.

Loading thumbnail…

Video Game Platforms Histogram

This interactive visualization displays video game platform sales as a histogram, with each platform in a separate faceted row. A dropdown menu switches between global, North American, European, Japanese, and other regional sales data. The chart uses Observable Plot’s `plot` function with `Plot.rectY` and `Plot.binX` to aggregate yearly sales, while D3 v6 (`d3.csv`, `autoType`) loads the dataset. The rendering updates by appending a new plot and removing the previous one on dropdown changes. Data comes from the Video Game Sales Dataset on GitHub.

Loading thumbnail…

Interaction Fork of History of Video Games by Genre

This interactive visualization shows video game sales by genre over time, with a dropdown menu letting viewers switch between global, North American, European, Japanese, and other regional sales data. The chart uses Observable Plot’s `rectY` with `binX` to aggregate yearly sales per genre, summing the selected regional sales column. Built with D3 v6 for data loading and CSV parsing, the view redraws the entire plot on region change rather than updating in place. The dataset comes from the preprocessed Video Game Sales Dataset by Daniel Ribaudo.

Loading thumbnail…

Video Game Publishers by Genre

This visualization uses small multiples of scatterplots to compare the mean and variance of global sales for video game publishers across genres. Each dot represents a publisher, with outliers filtered using a z-score cutoff on variance to reveal clearer patterns. Built with D3 v6 and Observable Plot, it loads the Video Game Sales Dataset via `d3.csv` and applies `d3.rollup` to aggregate sales data. Hovering reveals the publisher name, though clusters can make identification difficult.

Loading thumbnail…

Video Game Platforms Box and Whisker

This visualization displays box-and-whisker plots of annual video game platform sales, with each platform as a separate facet and years on the x-axis. The boxes show quartiles, whiskers extend to the IQR bounds, and outliers appear as dots, with the median marked by a thicker line. Using the Observable Plot library and D3’s `d3.csv` and `d3.rollup`, the code aggregates Global_Sales from the vgsales.csv dataset, repeating data entries to compute quartiles via `d3.quantile`. The custom `boxX` function from BoxPlot.js builds the marks, and the plot is rendered into the document body at full window size.

Loading thumbnail…

4th Iteration Line Graph: vgsales.csv

This visualization presents five small-multiple line charts showing video game sales over time, broken down by genre for global, North America, Japan, EU, and other regions. Each chart uses d3.line and d3.area to render aggregated sales data from the vgsales.csv dataset, with d3.axisBottom and d3.axisLeft for axes. Users can zoom and pan all charts simultaneously, with axes redrawn to match the visible domain. A legend allows toggling and highlighting genres by adjusting stroke width, while d3.flatRollup aggregates the data once for efficient rendering.

Loading thumbnail…

vgsales.csv with brushing

This interactive visualization uses the vgsales.csv dataset to show video game release counts by year. A bottom line chart displays total releases per year, and users can brush over a year range to generate a bar chart above showing the distribution of game releases across platforms within that selection. The visualization is built with D3 v6, using `scaleLinear`, `scaleBand`, `flatRollup`, and a brush selection to filter and aggregate the data, rendering both SVG charts from CSV data loaded via `d3.csv`.

Loading thumbnail…

Line Interaction Fork of History of Video Games by Genre

A dropdown menu selects a sales region, and a steamgraph displays total video game sales per year, stacked by genre around a central axis. The chart uses Observable Plot’s `areaY` and `stackY` marks with `binX` to aggregate the data, which comes from the Video Game Sales Dataset. Redrawing the plot on region change removes the previous graph, showing how annual sales distribution shifts across global, North American, European, Japanese, and other markets. The code loads CSV data with `d3.csv` and `autoType`.

Loading thumbnail…

Stacked Fork of History of Video Games by Genre

This stacked bar chart shows the number of video games released over time, broken down by genre and sales region (NA, EU, JP, and Other). The visualization uses a modified dataset where each game’s sales are split into separate entries for each region, allowing the bars to show the cumulative contribution of each region to the total count. It is built with Observable Plot, using `Plot.rectY` and `Plot.binX` to aggregate the data, and the facets are arranged by genre. The data originates from the Video Game Sales Dataset on GitHub.

Loading thumbnail…

3rd Iteration Line Graph: vgsales.csv

This visualization displays a small-multiple line graph of video game sales over time, broken down by genre for global, North American, Japanese, EU, and other regional markets. Built with D3 v6 in SVG, it uses d3.flatRollup and d3.sum to aggregate the vgsales.csv data. Users can hover over the legend to highlight genres, click to toggle their visibility, and drag crosshairs across charts to compare values. The axes and line weight scale with zoom, and a reset button restores the view.

Loading thumbnail…

2nd Iteration Line Graph: vgsales.csv

This multi-line chart, built with D3 v6, visualizes video game sales from the `vgsales.csv` dataset for five global regions (Global, North America, Japan, EU, and Other), with one small multiple per region. Each line tracks a genre’s sales over time, colored via `d3.schemeSet3`; interacting with the legend (hover or click) highlights or toggles the corresponding series across all charts. The implementation uses `d3.flatRollup` and `d3.sum` for one-time data aggregation, and `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to build axes. Users can pan and zoom, and the updated view synchronizes across all multiples.

Loading thumbnail…

Iterating Line Graph: vgsales.csv

This interactive multi-line chart uses D3.js (v6) to display video game sales data from a GitHub-hosted CSV across five regions, with each graph showing sales for twelve genres over time. A color-coded legend maps genres to lines, where hovering highlights a genre by thickening its strokes and clicking toggles its visibility. The visualization aggregates the data once before rendering, and includes crosshair functionality for comparing values across the regional charts.

Loading thumbnail…

D3 Scatter Plot - Aggregating eu_vaccinations.csv

This scatter plot visualizes aggregated COVID-19 vaccination data from the eu_vaccinations.csv file, showing weekly FirstDose counts by vaccine type across European cities. The data is processed using d3.flatRollup and d3.sum to aggregate values by YearWeekISO and Vaccine, with each vaccine type assigned a distinct color via a switch statement. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for labeling, and renders individual circles as SVG elements sized with a fixed radius of 2 pixels. The source dataset includes city names with latitude, longitude, and population information, though the plotted values focus on the vaccination aggregates.

Loading thumbnail…

D3 Scatter Plot: eu_vaccinations.csv

This scatter plot displays EU vaccination data, plotting the week number on the x-axis against the number of first doses on the y-axis, with each point colored by vaccine type (AZ, COM, MOD, JANSS, UNK). The visualization uses D3 v6 with an SVG rendering, creating a linear scale for both axes via `d3.scaleLinear` and `d3.extent`. Data is loaded asynchronously from a CSV file hosted on GitHub Gist using `d3.csv`. The code maps each row to a circle with a fixed radius and opacity, using `d3.select` and `.join` to add marks to the SVG.

Loading thumbnail…

Fork of D3 Scatter Plot: geonames_cities100000.csv

This visualization displays a scatter plot of global cities with a population exceeding 100,000, projecting geographic coordinates onto a world map. Point color is interpolated from blue to red based on population with d3.interpolate, encoding magnitude. The plot uses SVG circles with a fixed radius and 0.8 opacity, rendered via D3 v6 imported APIs. The axes employ linear scales for longitude and latitude across fixed ranges, with data loaded asynchronously from a CSV using the d3.csv function.

Loading thumbnail…

Loading and Parsing eu_vaccinations.csv

This example loads a CSV of European COVID-19 vaccination data and displays a simple summary of its file size, row count, and column count. The page uses `d3.csv` to fetch and parse the remote file from a GitHub Gist, then formats the result with `d3.csvFormat` and updates the text of a `pre` element. The data source is the ECDC’s public vaccination dataset, and the visualization prioritizes demonstrating data loading and parsing rather than graphical output.

Loading thumbnail…

make_something_dataviz

This visualization shows an abstract, sun-like composition built from a central circle with radiating triangular spokes, each accompanied by a quadratic curve and an animated rectangle. The center uses a radial gradient, while the spokes use a linear gradient; the squares cycle through the palette colors. The piece is rendered as SVG, and the JavaScript `circleCopy` function duplicates the initial group of shapes, rotating it eight times around the circle’s center to form the full pattern.

Loading thumbnail…

Loading and Parsing geonames_cities100000.csv

This example loads the geonames_cities100000.csv dataset and displays basic metadata about it in large text: file size in kilobytes, row count, and column count. The code uses d3.csv to fetch and parse the CSV, then accesses the resulting data array and columns property to compute the statistics. It highlights the data’s attributes—city name, latitude, longitude, and population—which could support future analysis of population density or regional naming patterns.

Loading thumbnail…

Loading and Parsing vgsales.csv

This example loads a CSV file of video game sales data and displays basic file statistics: the dataset’s size in kilobytes, row count, and column count. The page uses D3 v5’s `d3.csv` method to fetch and parse the data from a GitHub Gist, then renders the summary in a large `<pre>` element. The code also includes commented alternatives using `fetch` with `async`/`await` and `d3.csvParse` to demonstrate different parsing approaches.

Loading thumbnail…

Line Graph: vgsales.csv

This visualization displays video game sales over time, broken into five small multiples by region: global, North America, Japan, the EU, and other sales. Each chart plots genre-specific sales as colored polylines and circles, using d3.flatRollup to aggregate the data from the vgsales.csv dataset. The graphs use d3.scaleLinear, axisLeft, and axisBottom to render axes, with a click handler that draws a crosshair across all charts for comparison.

Loading thumbnail…

D3 Scatter Plot: vgsales.csv

This scatter plot visualizes video game sales data from the vgsales.csv dataset, plotting each game’s release year on the x-axis against its global sales on the y-axis. Rendered as an SVG using D3 v6, the code applies `d3.scaleLinear` for both axes and draws semi-transparent circles with a radius of 4. The data is loaded via `d3.csv`, and axes are generated with `d3.axisLeft` and `d3.axisBottom`, with tick formatting modified to prevent commas in the year labels.