vendas_por_grupo_bar_chart

100%

vendas_por_grupo_bar_chart

✓ Published3🌍 Public

Last edited Nov 5, 2021

Created on Nov 1, 2021

This bar chart displays the quantity sold for each product group, with horizontal bars ordered by category name. The visualization uses D3 v7’s `scaleLinear` and `scaleBand` to map sales values and group labels, while `axisLeft` and `axisBottom` render the axes. Data is loaded from a CSV file using `d3.csv`, and each bar includes a hover tooltip via appended `title` elements. The SVG output is styled with a gradient background and custom fill colors for the bars.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of vendas_por_grupo_bar_chart

This bar chart displays the quantity sold for each product group, with horizontal bars sorted by category. The visualization uses D3 v7’s `scaleLinear` and `scaleBand` to map quantities to bar lengths and groups to vertical positions, respectively. Data from a CSV file is loaded via `d3.csv`, with string values converted to numbers. The SVG rendering includes axis labels, tick lines, and interactive hover titles showing exact values, styled with a custom gradient background and yellow bars.

GGaneshPenumarthi

92% match

Loading thumbnail…

Fork of vendas_por_grupo_bar_chart

This horizontal bar chart visualizes product group sales quantities from a CSV file, ranking categories like footwear and accessories by units sold. The D3 v7 code uses `scaleLinear` and `scaleBand` to map data to SVG rectangles, with `axisBottom` and `axisLeft` generating labeled axes. Hover effects are applied via CSS, and the visualization is styled with a dark gradient background and bold yellow bars, with data loaded asynchronously via `csv()`.

Vvijaygvdr

89% match

Loading thumbnail…

Fork of vendas_por_grupo_bar_chart

This fork displays horizontal bars comparing product group names to quantities sold, using an SVG rendered with D3 v7 scales and axes. Data from CSV is parsed via `d3.csv` and loaded through a React hook; the chart applies `scaleLinear` for values and `scaleBand` for categories, with hover titles showing exact counts.

NNaveenrajaYalagandula

84% 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

80% 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

78% match

Loading thumbnail…

Simple bar graph in v7

A simple bar graph displays sales totals for thirteen named salespeople, with steel-blue bars sorted alphabetically along a band scale. The chart loads sales data from an external CSV file using `d3.csv` and renders SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`. Axes are added with `d3.axisBottom` and `d3.axisLeft`, while margins position the plot within the fixed 960x500 viewport. The visualization serves as a basic example for the D3 Tips and Tricks book, demonstrating standard data binding and enter selections with d3.v7.

Dd3noob

78% match

Loading thumbnail…

bar chart

This example shows a horizontal bar chart of sales figures per salesperson, with labeled x-axis ticks and y-axis categories. It loads CSV data from a remote gist using `d3.csv`, then renders the visualization as SVG with React components. The chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and `d3.max` to determine the domain. Grid lines are drawn for each tick value, and bars are positioned and sized using the scales’ range and bandwidth.

JJack Elsey

77% match

Loading thumbnail…

Fork of Making a barchart

This bar chart shows total sales by product category, using data loaded from a CSV file. The visualization is built with D3 v6 and rendered as SVG, applying linear scaling to sales values and band scaling to categories. It uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, with each rectangle’s height and width determined by the data values. The data is preprocessed by converting sales strings to numbers.

GGinnWG

77% match