Skip to main content
SimilarExport ZIP
100%

Visualization: "Description" and "Quantity" (Bar Chart)

✓ Published0🌍 Public
JJames Cruz
Last edited Apr 23, 2024
Created on Apr 23, 2024

This bar chart displays sales quantities for various product descriptions, with each bar representing a distinct item and its corresponding numeric quantity. The visualization uses D3.js v7 to generate an SVG bar chart, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis. The code includes labeled axes, rotated x-axis tick labels for readability, and value labels positioned above each bar. The sample dataset contains 26 products with quantities ranging from 2 to 32, rendered through a React-compatible HTML page that imports D3 from a CDN.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Visualization: Sales Distribution by Country (Bar Chart)

A static bar chart displays sales quantities for 26 product descriptions, ranging from 2 to 32 units per item. Each vertical bar is labeled with its exact value above it. The visualization uses D3.v7 with an SVG rendering approach, creating a band scale for the categorical x-axis and a linear scale for the quantity y-axis. Product names on the x-axis are rotated 45 degrees to accommodate the long labels.

JJames Cruz
83% match
Loading thumbnail…

BAR CHART CREATION

This bar chart displays sales values for 50 products, with each product’s value encoded by the height of a horizontal bar. The visualization uses D3.js v7 to load data from a CSV file via `d3.csv`, then renders bars as SVG rects with scaling through `d3.scaleBand` and `d3.scaleLinear`. Hover interactions highlight bars in orange and trigger a tooltip showing the product name and value. The chart includes rotated x-axis labels, a title, and axis labels for Products and Sales Value.

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

activity 6_q3

This horizontal stacked bar chart displays sales data for five beauty products, breaking down total sales into two colored segments: Price and Quantity, with product names on the y-axis and the aggregated sales value on the x-axis. Built with D3.v7, the visualization uses `d3.scaleLinear` and `d3.scaleBand` for axes, `d3.stack()` to compose the stacked segments, and `d3.axisBottom`/`d3.axisLeft` for tick marks. The SVG rendering includes color encoding via `d3.scaleOrdinal` for the two stacked categories, with a legend and concise axis labels, drawing from a local dataset where each row specifies product, brand, price, and quantity.

Sshettisowmya01@gmail.com
79% match
Loading thumbnail…

Product Sales Bar Chart

This bar chart displays product sales figures from a CSV file, with each product’s sales value represented by a steelblue bar. The visualization uses D3.js to create an SVG, scaling the x-axis with `d3.scaleBand` and the y-axis with `d3.scaleLinear`. Axis labels are rotated, and a title is added, all rendered via the D3 SVG API. Data is loaded asynchronously from a GitHub gist using `d3.csv`.

Aavvarijayakrishna99@gmail.com
77% match
Loading thumbnail…

Visualization: Sales Distribution by Country (Bar Chart)

This example shows a bar chart of sales amounts by country, with two bars displaying the dataset values from the USA, UK, and Canada. The visualization uses an SVG rendering approach with D3.js v7, employing `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to create the corresponding axes. Bar rectangles are appended to the SVG container with their width determined by the scale’s bandwidth and their height proportional to the sales values.

PPriyank Singh
77% match
Loading thumbnail…

bar grapgh

This bar chart displays total sales across product categories, with each category represented by a colored bar on a band scale. The visualization uses D3.js v7 to load CSV data from a GitHub gist, map it into an array of category-total pairs, and render an SVG chart with axes, labels, and a legend. The code applies a sequential color scheme via `d3.scaleOrdinal` with `d3.schemeCategory10`, and uses `d3.axisBottom` and `d3.axisLeft` for the axes. A title and rotated category labels are included to improve readability.

SSai Hemanth Babu Sunkari
76% match
Loading thumbnail…

Untitled

A bar chart displays sales figures for individual salespeople, with each bar’s height proportional to the numeric value in the `sales.csv` dataset. The visualization uses D3 v4’s `scaleBand` for the categorical x-axis, `scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for tick marks. Bars are rendered as SVG rectangles, colored steelblue via a CSS class, within a React-compatible HTML page.

LL1EO
76% match
Loading thumbnail…

Activity 7

This example shows a horizontal bar chart of product sales, using a categorical y-axis for product names and a linear x-axis for sales values. It renders with React and SVG, using D3 v5’s `scaleBand`, `scaleLinear`, `csv`, and `format` APIs to load and scale data from a GitHub-hosted CSV file. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`) generate the axes and rectangular marks, with native SVG `<title>` elements providing tooltips. The data is filtered to the top seven products, and sales values are formatted with a compact SI prefix.

Bbogasamudramvamsikrishnareddy
76% match