Skip to main content
SimilarExport ZIP
100%

Machine Learning Project - Histogram of Categories Refactored

✓ Published0🌍 Public
DDaniel Ribaudo
Last edited Dec 13, 2021
Created on Dec 13, 2021

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.

AI-generated description

This is a bar chart of the various categories in the Tsinghua-Tencent 100K dataset.

New functionality:

The data is broken into each one of its folders, plus an additional category containing all of the data (all). The different folders can be viewed via a select menu in the top left of the UI.

The user has the ability to upload a json file for comparison to the original annotations.json. This file can be uploaded via a button in the top right of the UI.

MIT Licensed

Similar vizzes

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.

DDaniel Ribaudo
93% match
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.

DDaniel Ribaudo
73% match
Loading thumbnail…

Histogram

This histogram visualizes the distribution of a numeric variable, grouping observed values into discrete bins and displaying their frequencies as vertical bars. It uses the D3.js library, specifically leveraging `d3.histogram` and `d3.scale` APIs to compute bin ranges and map data to screen coordinates. The rendering relies on SVG paths generated from the binned counts, with axes and labels drawn via D3’s measurement and tick utilities. The dataset originates from a GitHub gist, and the code operates entirely in the browser without external data files.

Mmbostock
66% match
Loading thumbnail…

Major Project

This interactive bar chart compares machine learning algorithms across multiple performance metrics, including accuracy, time, precision, and recall. Users can switch the y-axis attribute via a dropdown menu, and hovering over a bar displays a tooltip with all metric values for that algorithm. The visualization uses React for the UI, D3 v7’s `scaleBand` and `scaleLinear` for axes, SVG rects for bars, and a custom HTML tooltip. Data is loaded from a JSON file via `d3.json`, with animated bar height transitions via `animate`.

SSiddharthMittal07
65% match
Loading thumbnail…

Histogram

This histogram displays the distribution of a numeric variable (price) from a CSV dataset loaded from a GitHub repository. The visualization uses D3.js v7 with an SVG rendering approach, where the `d3.histogram()` API computes the binning and thresholds, and axis scales are created with `d3.scaleLinear()`. Bars are appended as SVG rectangles, and the chart is responsive, redrawing on window resize with a debounce function. The design uses a dark background with steelblue bars.

DDattatrayPatil73076
65% match
Loading thumbnail…

Horizontal category Barchart

This horizontal category barchart displays percentages across demographic subgroups, with bars colored in translucent green and interactive tooltips revealing subgroup details on hover. The visualization uses React for component state management and D3.js v6’s `scaleLinear`, `axisLeft`, and `axisBottom` to map data values to bar lengths. Data comes from a local JSON file containing subgroup categories like Sex, Location, Caste, and Wealth Index. Tooltips are implemented as HTML divs positioned via D3’s selection interface. The chart renders as an SVG with a light gray axis grid, and bars animate in response to state changes from React’s `useEffect` hooks.

AAnimesh Nautiyal
65% match
Loading thumbnail…

Untitled Document

This animated bar chart visualizes the distribution of drug categories across survey responses. The visualization loads a CSV dataset containing two columns—s_category and drug_cat—and renders a grouped bar chart using D3 v4 with SVG. The chart animates between two states, likely comparing the frequency of drug categories by s_category groups. The bars are color-coded and transition smoothly to reflect the data, with axes and labels supporting readability. The animation highlights changes in the dataset, making it easy to compare category distributions dynamically.

GGerardoFurtado
65% match
Loading thumbnail…

Histogram

This interactive histogram visualizes the distribution of one numeric variable using data loaded from a CSV file. Built with D3 v7, it renders bars as SVG rectangles, with the x-axis scaled linearly and the y-axis representing bin counts. The chart updates responsively on window resize, recalculating the histogram with 40 thresholds to accommodate the new width. Data is fetched from the `data_to_viz` GitHub repository.

Aarjun-lab663
65% match