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

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.

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

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

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

This example renders a horizontal bar chart of the ApplicantIncome for the first fifteen Loan IDs from a CSV hosted on GitHub. The visualization is built with React and D3 v5, using D3's `scaleBand` and `scaleLinear` for axes and `csv` for data loading. It renders SVG directly through React, with pink rounded rectangles as marks and custom grid lines and tick labels.

CCHANDU BHARGAVI

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

This example visualizes the annual salaries of 20 employees as a horizontal bar chart, with each bar’s length encoding salary magnitude and yellow fill distinguishing marks. Built with React for component state and D3 v5 for scales and data loading, it uses `d3.csv` to fetch a remote dataset, `scaleBand` for y-axis positioning, and `scaleLinear` for x-axis values. Custom SVG rendering draws axis ticks, gridlines, and rectangles, while manual text labels replace D3’s axis generators.

MMounika0927

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

This example shows the relationship between customer age and annual income using a horizontal bar chart of the first 15 records from a CSV dataset. Each bar’s length encodes income via a linear scale, while age categories are positioned on a band scale. The visualization is built with React components that render SVG marks, using D3 v5 utilities like `scaleLinear`, `scaleBand`, and `max` for data processing and scaling. Grid lines and axis ticks are generated from the linear scale’s tick values, with the dataset loaded asynchronously via `d3.csv`.

AAniv Chakravarty

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

This example visualizes the salary estimates for the top 10 data scientist job titles using horizontal bars rendered as SVG rectangles. The React component manages state with `useState` and `useEffect`, loading and parsing CSV data via `d3.csv` while the D3 scales (`d3.scaleBand`, `d3.scaleLinear`) compute bar positions. Each bar’s width maps to salary values, with rendered axis ticks and labels. D3 v5 handles the data loading and scaling, while React elements compose the final SVG output within an HTML page that loads both libraries from a CDN.

Ssaijahnaviappineni

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

This example shows annual income by profession for fifteen job categories using a horizontal bar chart. It renders an SVG with React and D3 v5, sourcing data from a CSV file via `d3.csv`. The chart builds scales with `d3.scaleBand` and `d3.scaleLinear`, and draws grid lines, axis tick labels, and bars for each profession. The code uses React’s `useState` and `useEffect` hooks to load and store the data, then uses `ReactDOM.render` to display the visualization.