Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
YYamini Malikireddy
Last edited Mar 8, 2026
Created on Mar 8, 2026
Forked from HTML Starter

A bar chart displays product sales distribution across 100 products, with steelblue bars showing sales amounts for each product name. The visualization uses D3.js v7 to load CSV data via `d3.csv`, map products to an x-axis using `scaleBand`, and map sales values to a y-axis with `scaleLinear`. Axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with rotated x-axis labels, and section titles label the chart axes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This chart shows the distribution of product sales across 100 products, using a bar chart to display each product’s sales amount. The visualization uses D3.js v7 to load the `product_sales.csv` data, with `d3.scaleBand` for the horizontal product axis and `d3.scaleLinear` for the vertical sales axis. Bars are rendered as SVG rectangles in steelblue, with rotated labels on the x-axis for readability. The axes are generated using `d3.axisBottom` and `d3.axisLeft`, and the chart includes axis labels for "Product Name" and "Sales Amount."

YYamini Malikireddy
96% match
Loading thumbnail…

Fork of bar D3 Starter

This bar chart visualizes product sales values from a CSV dataset, with each bar representing a product and its height corresponding to the sales figure. The chart includes axis labels, a title, and interactive hover effects that display a tooltip and change the bar’s color. Built with D3.v7, it uses `d3.csv` to load the data, `d3.scaleBand` and `d3.scaleLinear` for scales, and `d3.axisBottom`/`d3.axisLeft` for axes, all rendered as SVG within a styled HTML page.

119h61a05c9@cvsr.ac.in
87% match
Loading thumbnail…

Fork of HTML Starter

This bar chart displays categorical values from a remote CSV file hosted on GitHub. The visualization uses D3.js v7 to load the data with `d3.csv` and renders it as an SVG. The chart's y-axis is scaled linearly with `d3.scaleLinear` and includes nice tick marks, while the x-axis uses `d3.scaleBand` for categorical spacing. The code appends steelblue rectangles, rotates x-axis labels, and adds a title, with margins and axes positioned via SVG transforms.

Yyazneshpara2@gmail.com
87% match
Loading thumbnail…

Fork of Fork of Empty D3 Starter-likitha

A bar chart displays product sales data loaded from a remote CSV file via `d3.csv`. The visualization uses `d3.scaleBand` and `d3.scaleLinear` to map product categories and sales values, rendering steelblue rectangles in an SVG. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while the chart updates through D3’s data join pattern using `selectAll` and `enter`. The static SVG output is styled with a minimal CSS rule for message text.

Ccsesomarajuaswini@gmail.com
87% match
Loading thumbnail…

Fork of HTML Starter

This example shows a bar chart of laptop sales by company, using a CSV dataset of 160 records. The visualization encodes each company’s total Quantity_Sold as the height of a steelblue rectangle, with an ordinal x-axis and linear y-axis. It is built with d3.csv, scaleBand, scaleLinear, and axisBottom/axisLeft, rendering to SVG. The chart loads data asynchronously and maps the CSV’s numeric column before drawing the bars.

Kkruthanreddy812@gmail.com
86% match
Loading thumbnail…

Fork of HTML Starter

This bar chart visualizes student test scores from a CSV file, with each student’s name on the x-axis and their numeric score on the y-axis ranging from 0 to 100. The visualization uses D3.js v7’s `d3.scaleBand` and `d3.scaleLinear` to map data to SVG rectangles filled with steel blue, while `d3.axisBottom` and `d3.axisLeft` render the axes. The code loads the data asynchronously via `d3.csv` and renders the chart entirely in SVG within a styled container.

YYamini Malikireddy
85% match
Loading thumbnail…

Fork of HTML Starter

This example displays a static bar chart of 100 randomly generated quantitative data points, visualizing each item’s value as a vertical steelblue rectangle. It uses D3 v7 with an SVG rendering approach, employing `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for tick marks. The code generates the dataset in-browser using `Math.random()`, applies rotated labels to sparse x-axis ticks, and includes chart and axis titles for context.

Yyazneshpara2@gmail.com
85% match
Loading thumbnail…

Fork of Fork of HTML Starter

This visualization displays sales figures for each state-category combination as vertical bars on an SVG chart. The code loads CSV data via d3.csv, computes scales with d3.scaleBand and d3.scaleLinear, and renders axes with d3.axisBottom and d3.axisLeft. Bars are drawn using SVG rect elements, with x-axis labels rotated for readability, and a bold "Sales" label annotates the y-axis.

Sson.sultan@yahoo.com
85% match