Skip to main content
SimilarExport ZIP
100%

Task 1 assignment

✓ Published0🌍 Public
SSai Vamshi B
Last edited Mar 9, 2026
Created on Mar 9, 2026
Forked from CV: Bar Chart

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

AI-generated description
MIT Licensed

Similar vizzes

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

Santhosh Dachepally

This horizontal bar chart displays the top ten countries by sales from a CSV dataset loaded via D3’s `csv` function. The React app renders an SVG with D3’s `scaleBand` for country categories and `scaleLinear` for sales values, drawing green rectangles for each bar. Tick marks and labels are generated using D3’s scale methods, with the chart centered in the viewport. The code uses React hooks (`useState`, `useEffect`) to fetch and process the data, and ReactDOM to mount the visualization.

Ssanthoshdachepally333@gmail.com
81% match
Loading thumbnail…

Assignment2-Task_1_Bar graph

This bar chart displays the top 12 video games by North American sales from a CSV dataset. Each bar’s height corresponds to the game name on the y-axis, while the bar’s length represents total sales on the x-axis, with a red-to-blue color scale indicating sales magnitude. The visualization uses React for component rendering and D3’s `csv`, `scaleBand`, `scaleLinear`, and `axisBottom`/`axisLeft` APIs within an SVG. Data is fetched from a GitHub gist and processed with D3’s CSV loader.

Ssreekarthanda@gmail.com
81% match
Loading thumbnail…

Fork of Bar graph-task1

This example shows a horizontal bar chart of North American video game sales for the top twelve titles, ranked by their NA_Sales values from a CSV dataset. The chart uses D3 scales (scaleBand for categories and scaleLinear for values) to position bars and axis ticks, while React manages the component state and data loading. The visualization renders as an SVG with red gridlines and labeled axes, using d3.csv to fetch and parse the data, and d3.max to determine the x-axis domain.

Aajaysonu
81% match
Loading thumbnail…

task1

This example presents a horizontal bar chart of country populations for 2010, sourced from a CSV file loaded via d3.csv. The visualization uses React components to render SVG elements, with d3.scaleBand and d3.scaleLinear mapping country names and population values to screen coordinates. Custom AxisBottom and AxisLeft components generate tick marks and labels, while Marks draws the bars with tooltip formatting using d3.format. The chart includes an axis label and uses a Poppins font.

Yyashwanthkirla95@gmail.com
80% match
Loading thumbnail…

activity6_Task1

This visualization displays a horizontal bar chart comparing the populations of ten countries for the year 2000, sourced from a CSV file loaded via d3.csv. It uses React with d3.v5, rendering SVG bars with d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. A custom d3.format with the '.2s' specifier converts values to billions, and each bar includes an SVG title element for tooltips. Axes are built with tick components that generate lines and text labels.

Ssudheervnarasimha1@gmail.com
80% match
Loading thumbnail…

activity 6_Task_1.1

This example displays a horizontal bar chart of the top 10 countries by population in the year 2000, using a green fill for each bar. It loads CSV data from a GitHub-hosted file via `d3.csv` and renders the visualization with React and SVG. The chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, with axes and bars drawn as SVG elements. References to D3 modules like `scaleBand`, `scaleLinear`, `max`, `format`, and the `csv` function are made via ES6 imports, demonstrating local module use.

TThai Ha Dang
80% match