Fork of sample

100%

Fork of sample

✓ Published0🌍 Public

Last edited Mar 11, 2023

Created on Mar 10, 2023

Forked from sample

This horizontal bar chart displays the top 10 Indian T20 players by runs scored, sourced from a GitHub-hosted CSV file. Built with React and D3 v5, it uses `d3.csv` to load data, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the continuous x-axis. Rendered as SVG rectangles, the chart includes axis ticks and labels, though the y-axis labels extend beyond the visible plot area.

AI-generated description

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

Similar vizzes

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

89% match

Loading thumbnail…

Fork of HTML Starter

A bar chart from the D3.js visualization library shows the top 20 Indian cricketers ranked by their total runs scored, using data loaded from a CSV file. The visualization employs a categorical x-axis for player names and a linear y-axis for run counts, with data sorted in descending order and styled as steelblue bars. Built with d3.scaleBand, d3.scaleLinear, d3.axisBottom, and d3.axisLeft, the chart includes rotated player-name labels for readability and hover effects that change bar colors to darkorange.

Ssharathchandrareddymuthyam

85% match

Loading thumbnail…

Fork of Fork of Fork of Customizing Axes

This bar chart displays the top 10 scores by Indian batsmen, with runs scored on the x-axis and player names on the y-axis, sourced from a CSV file embedded in the code. Built with D3 v5, it uses `scaleLinear` and `scaleBand` for axes, `axisBottom` and `axisLeft` for tick generation, and custom formatting via `format('.3s')`. The SVG rendering applies extensive styling through CSS, including large green tick labels, red axis labels, and a green title, demonstrating axis customization.

Nnagamaheswar

84% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Customizing Axes

This bar chart displays the top 10 scores by Indian batsmen, with player names on the y-axis and runs scored on the x-axis. It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render axes. The y-axis ticks are cleaned by removing their domain lines, while the x-axis applies a custom tick format via `format('.3s')` and replaces “G” with “B”. Data is loaded as CSV from a GitHub gist, and SVG rendering is styled with CSS for tick lines and labels.

Nnagamaheswar

84% 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

84% match

Loading thumbnail…

Fork of HTML Starter

This example combines a bar chart and a line chart in a single SVG view to compare the total runs and batting average of the top 15 Indian cricketers from a CSV dataset. The bars, rendered with `d3.scaleBand` and `d3.scaleLinear`, show runs on the left axis, while a crimson line, plotted with `d3.line`, overlays average values on a right axis. D3 v7 axes, gridlines, and hover tooltips supplement the visualization, which loads data asynchronously via `d3.csv`.

Ssharathchandrareddymuthyam

82% match

Loading thumbnail…

Fork of dataset

This bar chart displays the total Test cricket runs scored by top batsmen, with names on the y-axis and runs on the x-axis. It uses D3.js v5 via UNPKG, employing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the SVG visualization. The chart loads data from a local CSV file and customizes axis labels while removing default tick lines and domains for a cleaner appearance. The visualization highlights player rankings by bar length, with steelblue rectangles rendered from the parsed dataset.

Vvidhyanamini

81% match

Loading thumbnail…

Fork of Fork of Customizing Axes

This example shows a bar chart of the top ten scores by Indian batsmen, with each bar’s length proportional to the runs scored and the player names on the vertical axis. The chart applies custom axis styling, including labeled tick lines, a rotated axis title, and a formatted tick scale. The visualization uses d3.csv to load data, and d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to render the SVG. The axis labels and title are added as SVG text elements, with margins controlling layout.

DDeekshithVemula

81% match