Skip to main content
SimilarExport ZIP
100%

Fork of vendas_por_grupo_bar_chart

✓ Published0🌍 Public
NNaveenrajaYalagandula
Last edited Mar 6, 2022
Created on Mar 6, 2022

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.

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…

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
84% 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
79% 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
79% match
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays supermarket sales data, showing the unit price for different product lines. Built with React and D3 v5, it renders as an SVG with vertical grid lines and horizontal bars. The visualization uses D3’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and loads data from a CSV file via `d3.csv`. React’s state management handles the asynchronous data loading and updates the chart accordingly.

SSreejaBellamkonda
77% 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
77% match
Loading thumbnail…

Fork of Akhil -vizhub assignment bat-scatter

This horizontal bar chart displays product prices from a CSV file, with each bar’s length and color intensity encoding the price value. The visualization sorts products by price and uses a light-to-dark blue linear scale for color encoding. Built with React hooks and D3 v5, it employs `scaleBand` for categorical y-axis placement, `scaleLinear` for the quantitative x-axis, and `csv` for data loading. The SVG rendering includes labeled axes, tick marks, and gridlines, with all marks and channels generated imperatively within React’s `useEffect` and rendered as SVG elements.

Hharichandanamone21@gmail.com
77% match