Fork of dataset

100%

Fork of dataset

✓ Published0🌍 Public

Last edited Mar 4, 2022

Created on Mar 4, 2022

Forked from 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.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

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

82% match

Loading thumbnail…

Fork of Ice-6

A horizontal bar chart displays the number of not-outs for cricket batsmen in test matches, with player names on the y-axis and counts on the x-axis. The visualization uses d3.csv to load the dataset from a GitHub gist, then d3.scaleLinear and d3.scaleBand map the data to screen coordinates. The chart is rendered as SVG with d3.axisBottom and d3.axisLeft for axes, and the x-axis tick labels are formatted using d3.format. A title and axis label accompany the bars.

Ppeesarie

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

81% match

Loading thumbnail…

Fork of 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.

Aayodhyanandh

81% match

Loading thumbnail…

Fork of playing with json

This visualization displays cricket batting statistics from a T20 match between Sri Lanka and New Zealand. It uses D3.js v5 (including `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, `d3.axisBottom`, `d3.schemePiYG`, and `d3.scaleSequential`) to render an SVG. Horizontal bars represent each batsman's innings, positioned by their first ball faced and colored by strike rate. Circles mark the last ball faced. The chart includes axis labels and text annotations for player names, runs, and strike rate. Data is loaded from a CSV file.

SshanLU999

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