ICE6-Nitheesh-Sama

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.

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.

Fork of ICE6-Nitheesh-Sama-bargraph

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.

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

86% match

ICE-6 Data

This example displays a bar chart of salary hikes for the top 20 countries, with each bar’s length proportional to a population value from a CSV file. The visualization uses React to manage state and render the SVG, while D3 v5’s `csv` loader, `scaleBand`, `scaleLinear`, and `max` functions handle data parsing, scaling, and layout. Green rectangles represent the bars, with blue gridlines and tick labels generated manually from the scales. The data is fetched from a GitHub-hosted CSV via a raw URL.

Aarcothanmukha

84% match

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

83% match