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

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

This interactive bar chart displays the top 10 most populous countries using data loaded from a CSV file. The visualization uses React to render SVG marks, with D3’s `scaleBand` and `scaleLinear` mapping countries to horizontal bars and population values to their lengths. Grid lines, tick labels, and axis text are generated manually via D3 scales, while React’s `useEffect` and `useState` handle asynchronous data fetching and state management.

Mmanvithareddykarra

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

This visualization shows the top 10 most populous countries in 2019 using horizontal bar marks, with country names on the y-axis and population values on the x-axis. The bars are rendered as SVG rectangles, with blue grid lines and tick labels generated from the linear scale. The code uses React hooks (`useState`, `useEffect`) to load and transform CSV data via `d3.csv`, then creates scales with `d3.scaleBand` and `d3.scaleLinear`. Axes and ticks are manually positioned using React elements rather than D3 axis components, combining React's declarative rendering with D3's data manipulation and scaling utilities.

JJyothicherukuri

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

This example visualizes the top 10 most populous countries in 2019 using a bar chart rendered as SVG. The chart displays population counts on the x-axis and country names on the y-axis, with blue gridlines and tick labels. The data is loaded from a CSV file using `d3.csv` and processed with `useEffect` and `useState` hooks. React handles the component rendering, while D3’s `scaleBand`, `scaleLinear`, and `max` functions generate the scales and layout for the SVG elements.

IInnocent Ernest

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

This example visualizes the top 10 most populous countries as a horizontal bar chart using React and D3. The code loads CSV data from a GitHub gist, processes the population values, and renders SVG rectangles with scaleBand and scaleLinear for the y and x axes respectively. It manually constructs ticks and gridlines, leveraging React’s state management with useEffect and useState alongside D3’s csv and max functions.

RRadhakrishna246

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

This visualization displays the top 10 most populous countries using a horizontal bar chart rendered with React and D3 v5. The bars encode population values through length, with countries listed along the y-axis. Data is loaded asynchronously from a CSV file using d3.csv, and the chart is drawn as SVG using d3.scaleBand and d3.scaleLinear for scales.

MManideepChakilam

BBajiSharifPatan@my.unt.edu

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

This visualization displays the top 10 most populous countries in 2019 as horizontal bars, with country names on the y-axis and population values on the x-axis. The chart is built using React and D3, leveraging `scaleBand`, `scaleLinear`, and `max` from d3.v5 to compute scales and domains from CSV data. SVG rectangles render the bars, with custom tick labels and gridlines drawn manually through JSX. Data is loaded asynchronously via `csv` from a GitHub gist URL.

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

This visualization displays a horizontal bar chart of the top 10 most populous countries in 2019, using React and D3 v5. The code fetches CSV data from a GitHub gist and renders SVG marks with React components, while D3’s `scaleBand`, `scaleLinear`, `csv`, and `max` handle data loading and scaling. Axes are drawn manually from `xScale.ticks()` and y-scale domains, with bars encoded by rectangular marks. The React `useState` and `useEffect` hooks manage asynchronous data loading before rendering the chart.

SSheshidharreddy

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

SSheshidharreddy