Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
BBhargavkaipa
Last edited Apr 11, 2023
Created on Apr 11, 2023
Forked from Untitled

This interactive bar chart displays the top 30 cricket batters based on a selected statistic, such as runs, centuries, or strike rate. A dropdown menu lets viewers switch between metrics, triggering a smooth transition that re-sorts and re-scales the bars. The visualization uses D3.js to load CSV data from GitHub, bind it to SVG rectangles, and update axes, bars, and values dynamically. Hovering over a bar reveals a tooltip with the player’s name and their exact figure for the chosen stat. The entire interface is built with HTML, CSS, and React.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

An interactive bar chart displays the top 30 cricket players based on a selected batting statistic, including runs, centuries, half-centuries, sixes, highest score, average, strike rate, or duck outs. A dropdown menu triggers the `update()` function, which parses player data from a CSV, filters out zero values, and sorts by the chosen metric. Using D3.js v6, the chart animates bar height and position via `d3.transition()` with a one-second duration, while SVG axes are redrawn on a rotated x-axis.

BBhargavkaipa
94% match
Loading thumbnail…

Bar Chart

This bar chart displays the top 15 cricket players ranked by their match scores. Built with React and D3 v5, it uses `scaleBand` for the categorical player names on the y-axis and `scaleLinear` for the numeric score values on the x-axis. The data is loaded from a CSV file via the `csv` function, with tick formatting handled by `format`. SVG rectangles render each bar, and tooltips appear on hover using the native `<title>` element.

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

Untitled

This example shows the number of matches for the top 11 sports in 2021 as horizontal bars, using a bar chart layout. The visualization uses React with d3-scale functions (scaleBand, scaleLinear) to map data to positions and sizes, and renders SVG elements directly. Data is loaded from a CSV file via d3.csv. The chart includes axis ticks generated manually, with bars filled in purple and axis lines in blue.

Aakhil kata
79% 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
79% 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
79% 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
79% match
Loading thumbnail…

Untitled

This interactive bar chart displays NBA team statistics for the 2021 regular season, with eight buttons letting viewers switch between metrics such as field goals made, assists, and rebounds. The visualization uses d3.csv to load data from a GitHub-hosted dataset and renders SVG line and circle marks, where each team’s value is shown as a point on a vertical baseline. The d3 scaleBand and scaleLinear axes update with smooth transitions on button clicks, changing the Y-axis domain to fit the selected statistic while coloring points by conference (Western or Eastern).

LLinhao Yu
78% match