ICE-6

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.

86% match

ICE-6

This horizontal bar chart visualizes the relationship between age and BMI for insured individuals, displaying the first 15 records from a CSV dataset. Built with React and D3 v5, it uses `d3.csv` to load data, `d3.scaleBand` for the age categories on the y-axis, and `d3.scaleLinear` for the BMI values on the x-axis. The chart renders as an SVG, with red gridlines and text labels generated via D3’s axis utilities.

Vvagdevi-369

86% match

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

This scatterplot-like bar chart displays the ages of fifteen individuals grouped by gender, using horizontal bars to compare values. The visualization combines React for component state management and rendering with D3 v7 for data loading and scale calculations. It loads CSV data from a GitHub gist via d3.csv, then uses d3.scaleBand and d3.scaleLinear to position bars, with custom tick rendering instead of d3.axisBottom or d3.axisLeft.

Kkarumanchimanasa

KKiran Jyothi Bodduluri-11604571

ICE-6

A bar chart displays yearly sales figures for a company from 2014 to 2021, with values in millions and axes labeled via `d3.axisBottom` and `d3.axisLeft`. The React-based app uses D3 v5 to render an SVG, mapping data onto a band scale and linear scale. It reads its data from a hardcoded array, not the external CSV, and renders black bars with a 0.2 padding.

ICE-6

This bar chart displays sales data for various items, with horizontal bars showing the sale amount for each item. The visualization uses React and D3 v5, loading CSV data via `d3.csv` and rendering SVG elements with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Gridlines and axis labels are generated manually using `xScale.ticks()`, while the data values are encoded as rectangle widths.

HHARSHA BUDDANA

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.

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.

83% match

Fork of ICE6-Nitheesh-Sama-bargraph