Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
Vvidhyanamini
Last edited Mar 4, 2022
Created on Mar 4, 2022

This visualization displays the top 10 cricketers from a dataset, showing each player’s 2019 performance as a horizontal bar chart. The bars are rendered as SVG rectangles within a React component, using D3’s `scaleBand` for the categorical y-axis (player names) and `scaleLinear` for the numeric x-axis (population values). Data is loaded asynchronously via `d3.csv` from a GitHub gist, with axes and tick marks generated manually through React elements.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

This example displays the top 10 cricketers by score as horizontal bars, using React to render SVG elements and D3 v5 scales (d3.scaleBand, d3.scaleLinear) to position the bars and axes. It loads a CSV dataset of cricket statistics via d3.csv, slicing the first 10 rows, and draws tick marks and labels for both the x and y axes. The chart, titled “10 Most Popular players,” uses blue gridlines, a left margin for player names, and no other visual encodings beyond bar length.

Ccharanchand9
87% match
Loading thumbnail…

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

This visualization displays the top 10 cricketers by score using a horizontal bar chart, with the title and data loaded from a CSV file via `d3.csv`. React manages the component state and renders SVG marks, while D3 v5 provides the scales: `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. The x-axis ticks are drawn explicitly using `xScale.ticks()`, but no y-axis line or tick marks are rendered, only text labels. The bar widths encode score values, and the chart lacks axis titles or a legend, making it a minimal representation of the underlying data.

Ccharanchand9
87% match
Loading thumbnail…

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

This visualization displays the ages of the top 20 players from a CSV dataset as a horizontal bar chart. Each player is represented by a blue rectangle, with the bar length encoding age using a linear scale, while player names are mapped to the y-axis using a band scale. The code integrates React’s `useState` and `useEffect` hooks with D3’s `csv`, `scaleBand`, `scaleLinear`, and `max` functions to load and transform data. SVG rendering is handled directly through React elements, with manual grid lines and tick labels generated from D3’s scales.

Ppravalliyaram
86% match
Loading thumbnail…

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

This example visualizes the top fifteen countries by their 2022 population as horizontal bars, with each bar’s length encoding population magnitude. Built with React and D3 v5, the code uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and renders SVG `<rect>` marks directly in React’s JSX. Data is loaded from a CSV via `d3.csv`, and axes are drawn manually with `d3.scaleLinear.ticks` and tick text elements.

Ssivamani
84% match
Loading thumbnail…

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

This example displays a bar chart of the top 15 Instagram influencers by follower count, using horizontal bars encoded by channel name on the y-axis and follower totals on the x-axis. Built with React and D3 v5, it loads CSV data from a GitHub gist via `d3.csv` and renders SVG marks and channels using `scaleBand`, `scaleLinear`, and `rect` elements. Axes are drawn manually with `ticks` and grid lines, all managed through React's `useState` and `useEffect` hooks.

NNithish Kumar
84% match
Loading thumbnail…

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

This example visualizes the top 10 food-producing countries using a horizontal bar chart rendered as SVG within a React component. It loads CSV data from a GitHub gist via `d3.csv`, scales the bars with `scaleBand` and `scaleLinear`, and draws tick marks and labels manually using `xScale.ticks()`. The code integrates React hooks (`useState`, `useEffect`) with D3 v5 selection and scale APIs, producing a clean, data-driven layout with orange bars and labeled axes.

Nneeharika2023@gmail.com
84% match
Loading thumbnail…

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

This example shows the top 10 most populous countries in 2019 as horizontal bars, using React and D3 to render SVG marks and channels. The data is loaded from a CSV via `d3.csv`, then visualized with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Axes are drawn manually with `xScale.ticks()`, while `rect` elements encode population values by length. The React component uses `useState` and `useEffect` to fetch and manage the data asynchronously.

Hhailiwang@my.unt.edu
84% match
Loading thumbnail…

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

This example displays the top 20 movies from an IMDB dataset as a horizontal bar chart, where bar length encodes movie rank and each bar is labeled with its numeric rank. Built with React for component state and rendering, it uses D3 v5 APIs such as `csv` for data loading, `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and manual SVG elements for axes and grid lines. The chart updates reactively after the CSV is fetched asynchronously.

Nnsatyaprakash22
84% match