Skip to main content
SimilarExport ZIP
100%

Project - Horizontal Bar Chart for Total Profit of Sub-Category Product (Using React Tool and d3.js)

✓ Published0🌍 Public
AAnjan Shrestha
Last edited Apr 2, 2022
Created on Apr 2, 2022

This example shows a horizontal bar chart of total profit across product sub-categories, with blue bars on an SVG canvas and labeled axes. It loads CSV data from a GitHub gist using `d3.csv`, processes the profit values with a row function, and renders the chart in React. The visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the profit-driven x-axis, and generates gridlines and tick labels via `xScale.ticks()`. Axis labels and bar rectangles are positioned through SVG `<g>` and `<rect>` elements within a React component.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Project - Horizontal Bar Chart for Total Sales of Sub-Category Product (Using React Tool and d3.js)

This example shows a horizontal bar chart of total sales for product sub-categories, with bars rendered in blue on an SVG canvas. It uses React to manage state and lifecycle, while d3’s `csv` loads the dataset and `scaleBand` and `scaleLinear` map the categorical and numeric ranges. The chart draws gridlines and tick labels via `xScale.ticks()`, and each bar’s width represents sales value. The data is fetched from a GitHub gist URL.

AAnjan Shrestha
95% match
Loading thumbnail…

Bar Chart with D3 and React

This example displays product ratings by subcategory in a horizontal bar chart. Each rectangle’s length corresponds to a product’s numeric rating, with axes labeled using D3’s `scaleLinear`, `scaleBand`, and `axisLeft`/`axisBottom` functions. Built with React and D3 v5, the chart loads data from a CSV file via `d3.csv`, then renders the SVG directly through React’s `rect` elements. The code uses D3’s `select` and `call` methods to apply axis generators, while React manages state and the rendering lifecycle.

Aavvarijayakrishna99@gmail.com
83% match
Loading thumbnail…

Project - 3D Vertical Bar Chart for Total Profit with Sales-Profit Quadrant of Sub-Category Product

This example displays a 3D vertical bar chart comparing total profit across product sub-categories, grouped into four sales-profit quadrants: low sales/low profit, low sales/high profit, high sales/low profit, and high sales/high profit. Built with Highcharts and the Highcharts-3D module, it renders stacked columns with an isometric perspective using the chart’s `options3d` settings for depth and rotation. Data is hardcoded as arrays of category-index and profit-value pairs, while quadrant assignments are encoded as separate series stacks. The visualization highlights profit distribution patterns within retail categories.

AAnjan Shrestha
79% match
Loading thumbnail…

Bar Graph with sub-cats with D3.js

This example shows a bar graph that groups sales data by Sub-Category, with each bar colored by its parent Category (Furniture, Office Supplies, Technology) using a D3 ordinal color scale. It loads a CSV of sample store orders and aggregates total sales per sub-category with `d3.csv`, `d3.sum`, and nested data arrays, then renders the chart as SVG rectangles with `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` for axes and labels. The code runs in a React-compatible plain HTML page using D3 v5.

Ssaikrishnabussa
79% match
Loading thumbnail…

Vertical Bar Chart with React & D3

A vertical bar chart built with React and D3 renders a CSV dataset of activities and their counts as steelblue SVG rectangles. The chart computes a band scale for the categorical x-axis and a linear scale for the numeric y-axis, with axes generated using `d3.axisBottom` and `d3.axisLeft`. A custom `useD3` hook handles SVG selections and updates the bars, while the React component loads the CSV asynchronously via `d3.csv` and passes the data to the chart.

AAditya Khandelwal
78% 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
77% 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…

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
77% match