Fork of vendas_por_grupo_bar_chart

100%

Fork of vendas_por_grupo_bar_chart

✓ Published0🌍 Public

Last edited Feb 21, 2022

Created on Feb 21, 2022

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()`.

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

94% match

Loading thumbnail…

vendas_por_grupo_bar_chart

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.

Ggabrielribeirob

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

89% match

Loading thumbnail…

Fork of Bar Graph

This example visualizes product sales by sale price using a bar graph, with each bar representing a product and its height reflecting the sale price. The chart displays the data from a CSV file, showing product names along the x-axis and sale prices on the y-axis. Built with D3 v7, it uses `d3.csv` to load the data, `d3.scaleBand` and `d3.scaleLinear` for positioning, and renders SVG rectangles for the bars. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, with hover effects changing bar colors to orange.

Mmukundakrishna.r@gmail.com

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

80% match

Loading thumbnail…

Fork of Fork of barchart4

This horizontal bar chart displays the heights of six products from a CSV file, with D3.js rendering SVG bars. The visualization supports interactive features: clicking an alert on a bar and hovering over a bar generates a tooltip, both showing the product name and height. The code uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart. A `csv()` call loads the data, and configuration options in `chartJson` control labels, grid lines, and events.

Llimeroc

78% match

Loading thumbnail…

Fork of Bar Chart - Project

This bar chart visualization displays the global sales of video games by genre, using data loaded from a CSV file. The chart uses D3 v6 scales (`scaleBand`, `scaleLinear`) and axes (`axisBottom`, `axisLeft`) to render the bars, which are colored steel blue. It includes interactive hover effects, where bars transition to orange on mouseover and return to steel blue on mouseout, with the color change animated over 250 milliseconds using D3's transition API.

Rrajasrilekkala

78% match

Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This horizontal bar chart displays sales figures for ten retail item categories. The visualization loads data from a CSV file and renders it as an SVG. Using D3.js version 7, the code employs `scaleLinear` and `scaleBand` for the x and y axes, respectively, and `axisLeft` and `axisBottom` to generate the tick marks. Each category's bar length corresponds to its sales value, with the chart including axis labels for both dimensions.

Ggopiganta

77% match