Skip to main content
SimilarExport ZIP
100%

Data Visuliazation ICE-6

✓ Published0🌍 Public
TTharun2022
Last edited Jun 25, 2022
Created on Mar 5, 2022
Forked from HTML Starter

This bar chart displays the total runs scored by the top 10 cricketers from a CSV dataset, with each player’s name labeled on the y-axis and run counts plotted along the x-axis. The visualization uses React for component rendering and d3.csv to load and parse the data, while d3.scaleBand and d3.scaleLinear handle the categorical and quantitative scaling. Axis ticks and gridlines are generated via xScale.ticks(), and the chart is styled with a light blue fill and black text.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Data Visuliazation ICE-6

This visualization displays the total career runs of the top ten cricketers from a CSV dataset, using a horizontal bar chart where bar length corresponds to each player’s runs. Loaded via `d3.csv` and rendered with React, the chart uses `d3.scaleBand` for player names on the y-axis and `d3.scaleLinear` for the run totals on the x-axis, with gridlines and tick labels generated from the linear scale. The data is filtered to the first ten rows, and the SVG is styled with a light blue fill.

VVenkata Sai Preetham
92% match
Loading thumbnail…

CSCE-5320 ICE-6

This bar chart shows the ten cricketers with the most runs, ranked by total score. The visualization loads data from a CSV file using `d3.csv`, sorts it to the top ten entries, and renders horizontal bars with `React` components and SVG. D3’s `scaleBand` and `scaleLinear` position the bars and axes, while `axisLeft` and `axisBottom` are used to label the player names and run values, with green gridlines drawn from `xScale.ticks()`.

LLG0498
90% match
Loading thumbnail…

Fork of CSCE-5320 ICE-6

This example shows a horizontal bar chart of the top ten cricket players by total runs, with green gridlines and labeled axes. It loads CSV data from a GitHub gist, slices the dataset to the first ten rows, and renders the bars as SVG rectangles using React. The visualization uses `scaleBand` for the player categories and `scaleLinear` for the run values, with `axisBottom` and `axisLeft` omitted in favor of manual tick generation via `xScale.ticks()`. Styling is applied through inline SVG attributes and CSS in the HTML file.

Cchandrakalavanukuri
86% match
Loading thumbnail…

ICE_6

This example displays the top 10 all-time leading run-scorers in cricket as a horizontal bar chart. The SVG visualization uses D3 v5 with `d3.scaleLinear` and `d3.scaleBand` to map runs and player names, while `d3.axisLeft` and `d3.axisBottom` render the axes. Data comes from a CSV file loaded via `d3.csv`, with run values parsed as numbers. Each player’s total runs are shown as orange bars, with a titled chart and formatted tick labels using `d3.format`.

Vvineeth-001
86% match
Loading thumbnail…

D3.js bars and charts

This visualization displays a horizontal bar chart of cricket player statistics from IPL 2021, ranking players by their total runs scored. Each bar represents a player, with the x-axis showing run counts and the y-axis listing player names from the loaded CSV dataset. The chart is rendered using D3.js v7 within a React framework, employing d3.csv for data loading, d3.scaleLinear and d3.scaleBand for scales, and d3.axisLeft and d3.axisBottom for axes. The visualization uses SVG rendering with steelblue bars to encode the quantitative values.

AAyushman
84% match
Loading thumbnail…

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

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.

Vvidhyanamini
84% match
Loading thumbnail…

sample

This example visualizes the top 10 T20 Indian cricket players by runs scored, using a horizontal bar chart rendered with SVG. The data is loaded from a CSV file, and the chart uses `scaleBand` for the y-axis player names and `scaleLinear` for the x-axis run totals. React manages the component state and rendering, while D3’s `csv` fetches the dataset and `max` computes the domain. Grid lines and axis labels are drawn manually as SVG elements.

Aayodhyanandh
83% match
Loading thumbnail…

ICE 6

This visualization displays the top 10 players by number of catches, using a horizontal bar chart where bar lengths correspond to catch counts. The data is loaded from a CSV file using D3's `csv` function. Rendered as an SVG, the chart relies on React to manage state and render the SVG elements, while D3's `scaleBand` and `scaleLinear` handle the categorical y-axis and quantitative x-axis scaling. Grid lines and axis ticks are drawn manually with D3's tick generation.

Ddineshtadepalli12
82% match