Skip to main content
SimilarExport ZIP
100%

Fork of ICE6-Nitheesh-Sama-bargraph

✓ Published2🌍 Public
NNitheeshSama
Last edited Mar 10, 2023
Created on Mar 10, 2023
Forked from ICE6-Nitheesh-Sama

This bar chart shows the salary of employees across different ages, displaying the top 15 ages in the dataset. The visualization uses React with hooks to manage state, and D3 v5’s `csv` loader to fetch and parse the data from a GitHub gist. Scales are created with `scaleBand` for the y-axis and `scaleLinear` for the x-axis, while axes are rendered manually using `ticks`. The chart is drawn as SVG elements, with blue grid lines and horizontal bars.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE6-Nitheesh-Sama-bargraph

This bar chart shows the salary of employees across different ages, displaying the top 15 ages in the dataset. The visualization uses React with hooks to manage state, and D3 v5’s `csv` loader to fetch and parse the data from a GitHub gist. Scales are created with `scaleBand` for the y-axis and `scaleLinear` for the x-axis, while axes are rendered manually using `ticks`. The chart is drawn as SVG elements, with blue grid lines and horizontal bars.

NNitheeshSama
100% match
Loading thumbnail…

Fork of Fork of ICE6-Nitheesh-Sama-bargraph

This interactive bar chart visualizes the salary of employees across different ages, using data from a CSV file hosted on GitHub. The visualization is built with React and D3 v5, rendering SVG elements. It employs D3's `scaleBand` and `scaleLinear` to map age and salary values to the chart's axes, while axis ticks and labels are generated manually. The chart displays horizontal bars, with a blue gridline for each salary tick, and the data is limited to the first 15 records from the source.

NNitheeshSama
96% match
Loading thumbnail…

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

This horizontal bar chart displays salary data for employees at different ages, using bars whose lengths encode salary values and y-axis positions encode age. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` to map data to SVG rectangle marks, with custom axis ticks rendered via D3’s `axisLeft`, `axisBottom`, and `scaleLinear` methods. It loads CSV data from a GitHub gist, filtering the first 15 rows, and renders entirely as SVG within a React component, with loading state managed via React hooks.

NNitheeshSama
89% match
Loading thumbnail…

ICE6-Nitheesh-Sama

This example displays a horizontal bar chart of employee salaries across different ages, using data from a CSV file loaded via `d3.csv`. The visualization renders as an SVG, with `d3.scaleBand` positioning the age categories on the y-axis and `d3.scaleLinear` mapping salary values to bar widths on the x-axis. React manages the state and lifecycle, fetching the data and slicing it to the first 15 records. Gridlines and tick labels are generated programmatically using D3’s scale methods, while the bars themselves are drawn as SVG `<rect>` elements.

NNitheeshSama
89% match
Loading thumbnail…

ICE-6

This bar chart displays the ages of the first fifteen employees from a company dataset, with each row labeled by full name and bar length proportional to age. Built with React and D3 v5, it uses `d3.csv` to load remote CSV data, `d3.scaleBand` and `d3.scaleLinear` for axes, and renders an SVG with `rect` elements for bars. Grid lines and tick labels are generated via `d3.ticks`, while the layout follows a margin convention in a `VizContainer` component.

Ggeethanjalikotaru
83% match
Loading thumbnail…

Fork of ICE-6_BM

This visualization displays the average hourly wages for the top 25 areas from a prevailing wage dataset. It presents a horizontal bar chart using React and D3 v5, where each bar’s length corresponds to the average wage value. The code loads CSV data via `d3.csv`, scales positions with `d3.scaleBand` and `d3.scaleLinear`, and renders SVG rectangles and axes with `d3.axisLeft` and `d3.axisBottom`. Red gridlines and tick labels are manually generated, and the chart updates through React’s `useState` and `useEffect` hooks.

TTekmal-Bhavana
81% match
Loading thumbnail…

Fork of Assignment ICE-6 Bar Graph

This bar chart visualizes investment amounts across different age groups using a horizontal layout. The visualization loads CSV data from a GitHub gist, processes it with React hooks, and renders bars with D3.js v5 scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. SVG elements are generated directly in JSX, with gridlines and tick labels manually created via D3 array methods. The chart displays the first 50 records, showing each avenue of investment against its corresponding age value.

HHema1430
80% match
Loading thumbnail…

ICE-6 - Bar Chart - 11641166

This interactive bar chart displays the maximum salary for each of the first 20 employee locations from a CSV file. The visualization uses React to manage state and D3.js v5 for rendering, with `d3.csv` fetching the remote data and `d3.scaleBand`/`d3.scaleLinear` mapping categorical locations and salary values to SVG rectangles. Axes and gridlines are drawn manually via D3’s scale objects, and the chart updates asynchronously after data loading.

SSuresh John Wesly
79% match