Skip to main content
SimilarExport ZIP
100%

Fork of ICE-6_BM

✓ Published0🌍 Public
TTekmal-Bhavana
Last edited Mar 22, 2023
Created on Mar 22, 2023
Forked from 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.

AI-generated description

A whole smiley face

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6_BM

This example shows the average hourly wages for 25 geographic areas as a horizontal bar chart, with bars colored the default SVG black and red gridlines marking the linear x-axis scale. Built with React and D3 v5, it loads a CSV of prevailing wage data via `d3.csv`, slices the dataset to the first 25 rows, and renders SVG rectangles positioned by `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. The React component uses hooks (`useState`, `useEffect`) to asynchronously fetch and parse the data, then manually renders axis ticks and gridlines with D3 selectors and SVG elements.

Bbmurill2019
90% 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
83% match
Loading thumbnail…

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

This example visualizes the average software developer rent in US metros using a bar chart rendered with React and D3 v5. The chart displays 15 metro areas from a CSV dataset, mapping metro names to the y-axis and average rent values to the x-axis via d3.scaleBand and d3.scaleLinear. React manages the component state and SVG rendering, while D3 handles data loading with d3.csv, scales, and axis ticks. The code manually creates gridlines and tick labels using React JSX, avoiding d3.axisBottom or d3.axisLeft.

NNikhilchiguru-8
82% match
Loading thumbnail…

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

This bar chart shows the annual income by profession for the first 15 records from a remote CSV file. The visualization is built with React and D3 v5, rendering SVG marks directly. It uses `d3.csv` to load data, `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and calls `xScale.ticks()` to generate grid lines. The chart is rendered inside a React component via `ReactDOM.render`, with each bar’s width mapped to the `Annualincome` field.

Rradhadevarapu
81% match
Loading thumbnail…

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

This bar chart shows the annual income by profession for the first 15 records from a remote CSV file. The visualization is built with React and D3 v5, rendering SVG marks directly. It uses `d3.csv` to load data, `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and calls `xScale.ticks()` to generate grid lines. The chart is rendered inside a React component via `ReactDOM.render`, with each bar’s width mapped to the `Annualincome` field.

Rradhadevarapu
81% match
Loading thumbnail…

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

This bar chart shows the annual income by profession for the first 15 records from a remote CSV file. The visualization is built with React and D3 v5, rendering SVG marks directly. It uses `d3.csv` to load data, `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and calls `xScale.ticks()` to generate grid lines. The chart is rendered inside a React component via `ReactDOM.render`, with each bar’s width mapped to the `Annualincome` field.

Rradhadevarapu
81% 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
81% match
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
81% match