Skip to main content
SimilarExport ZIP
100%

CSCE-5320 ICE-6

✓ Published1🌍 Public
LLG0498
Last edited Mar 5, 2022
Created on Mar 4, 2022
Forked from HTML Starter

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()`.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
90% match
Loading thumbnail…

Data Visuliazation ICE-6

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.

TTharun2022
90% match
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
87% 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…

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: 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
83% 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
83% 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
82% match