Vinay Task 1

100%

✓ Published1🌍 Public

Last edited Mar 8, 2026

Created on Mar 8, 2026

This example shows total sales aggregated by product category as a bar chart, with steelblue bars and labeled axes. It loads tabular data from a GitHub Gist using d3.tsv, aggregates values with d3.rollup and d3.sum, and renders static SVG via React’s useRef hook. The chart uses d3.scaleBand for categories and d3.scaleLinear for the sales axis, with d3.axisBottom and d3.axisLeft providing tick marks.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Task 1

This bar chart displays monthly product sales for a catalog of electronics, with each product’s sales value represented by a steelblue bar. Built with React and D3 v7, it uses `scaleBand` and `scaleLinear` to position bars and axes, while rendering SVG elements directly. The data is loaded from a CSV file via `d3.csv`, and axis labels are rotated for readability. Grid lines and tick values are generated programmatically, showing sales totals ranging from roughly 48 to 150 across over 120 product entries.

SSai Vamshi B

83% match

Loading thumbnail…

task1

A bar chart displays monthly sales figures for electronic products. Each bar’s height encodes the numeric Sales value from the CSV dataset, with product names on the horizontal axis and a linear sales scale on the vertical. Repeating product names across rows aggregate into multiple bars per category. Built with React, the visualization uses D3’s `csv` parser to load data, `scaleBand` and `scaleLinear` for axes, and SVG `rect` elements for rendering, with bars filled in steelblue.

SSai Vamshi B

80% match

Loading thumbnail…

Fork of Vinay Question 4

This example displays monthly sales data as a light-blue area chart with an overlaid blue line. It uses D3 v7 to construct a point scale for the months and a linear scale for sales values, then applies the `d3.area` and `d3.line` generators to create the paths. The React starter HTML page renders the visualization as SVG, with axes added via `d3.axisBottom` and `d3.axisLeft`, and text labels for both dimensions. The hardcoded dataset spans January through August with sales increasing from 200 to 750.

VVinay Kumar Parvathini

79% match

Loading thumbnail…

Task 1 assignment

This visualization presents a horizontal bar chart of the top 10 sales records from a CSV dataset, with each bar labeled by product, region, and month. The chart uses D3 v7 within a React component, rendering to SVG. The implementation loads data via `d3.csv`, sorts and slices the dataset to identify top performers, and maps values with `scaleLinear` and `scaleBand`. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`.

SSai Vamshi B

78% match

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

78% match

Loading thumbnail…

Sales by Category

This bar chart compares total sales across product categories. The visualization uses aggregated sales data from a CSV file, displaying each category as a steel-blue bar. The chart is built with D3 version 5, using `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. The SVG rendering includes axis labels and a title, with the x-axis labels rotated for readability.

Ssaikrishnabussa

77% match

Loading thumbnail…

Fork of Vinay QUestion 2

A D3.js pie chart visualizes sales distribution across four product categories—Books, Electronics, Clothing, and Groceries—using hardcoded data. The chart renders as an SVG with colored arcs generated via d3.pie and d3.arc, applying a category-10 color scale. Each slice displays its category name positioned using arc.centroid, with a heading added above the visualization. Built with React, the example demonstrates basic pie-chart construction without interactivity.

VVinay Kumar Parvathini

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

76% match