Skip to main content
SimilarExport ZIP
100%

Machine Learning Project - Bar chart of Sign Amounts

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

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.

AI-generated description

This is a bar chart depicting the number of various signs per image in the Tsinghua-Tencent 100K dataset.

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
76% match
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.

DDaniel Ribaudo
73% match
Loading thumbnail…

Bar Chart using D3.js

This visualization presents a simple bar chart of a fixed dataset representing eight numerical values, rendered as SVG rectangles using D3.js v4. The chart does not display axes or labels, relying instead on the raw bar lengths to convey magnitude against an implicit baseline. Using the `d3.select` and `selectAll` APIs, the code generates each bar’s height proportionally to its data value and applies a translate transform to position bars side by side with a fixed padding. The underlying data appears to be an arbitrary array rather than the UN population data referenced in the README, and the chart updates only on load with no interactive elements.

TTajallah-maryam
68% match
Loading thumbnail…

Bar Chart

This bar chart visualizes a small dataset relating Amount values to their corresponding Percentage labels. The chart is rendered using D3.js version 7, with the visualization built through the library’s `select` and `csv` functions. The example includes a commented-out line that would load data from a CSV file, though the active code currently just logs a message and writes text to the document, leaving the SVG canvas empty. The HTML page is styled with centered, large text, suggesting a title or label display.

TTusar
68% match
Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes the distribution of colors in a sample dataset, with each bar representing a color percentage and labeled with its value. The D3.js v5 example uses an SVG rendering approach with interactive hover effects that highlight the selected bar, display a red dashed threshold line, and show divergence percentages between the hovered color and others. Built with `d3.scaleBand` and `d3.scaleLinear` for axes, the chart includes grid lines, a title, and axis labels, with animations driven by `transition` for bar highlighting and opacity changes on mouse events.

GGogineni44
66% match
Loading thumbnail…

TDD Bar Chart

This bar chart displays the frequency of letters in the English language using a TSV dataset. The example demonstrates a test-driven approach to building a reusable, responsive D3.js chart, built upon Mike Bostock's original block and the Data Manager API for loading and parsing data. The chart uses `d3.scale.ordinal` for the x-axis, `d3.scale.linear` for the y-axis, and `d3.svg.axis` for display, with bars rendered as SVG rectangles. The code includes a Jasmine test suite that validates chart rendering, structure, and configurable properties like width, height, and margins.

GGolodhros
66% match
Loading thumbnail…

Bar Chart

A bar chart displays the relative frequency of each letter in the English language, sourced from a TSV file. The bars are colored steelblue and turn brown on hover, with axes for letter categories and percentage values. Built with D3 v4, it uses `d3.tsv` for parsing, `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for rendering the axes as SVG elements.

Mmbostock
66% match
Loading thumbnail…

Bar Chart I

This bar chart visualizes six numeric values—4, 8, 15, 16, 23, and 42—as horizontal bars whose widths are proportional to the data. The chart uses D3 v3’s `d3.scale.linear` to map the domain from zero to the maximum value (42) onto a pixel range of 0–420. Each bar is a styled `div` element with a steelblue background, white text, and a width set via the `style` operator. The code appends these divs using `d3.select` and `.selectAll("div").data(...)`, with the data bound to the DOM. The bars’ labels display the original values.

Mmbostock
66% match