Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Fork of Customizing Axes

✓ Published0🌍 Public
Nnagamaheswar
Last edited Mar 7, 2022
Created on Mar 7, 2022

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.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

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
98% 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
93% 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
84% 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
84% 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
83% match
Loading thumbnail…

Fork of HTML Starter

This visualization shows total runs scored by individual Indian cricket players as a bar chart, with player names on the x-axis and run totals on the y-axis. The code loads data from a CSV file using d3.csv, then encodes the values through bar height and position using d3.scaleBand and d3.scaleLinear. Rectangles are drawn into an SVG container with a blue fill, and axes are rendered with d3.axisBottom and d3.axisLeft, with rotated player labels for readability.

Aankitgoudpoodhari07@gmail.com
82% 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
82% 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
81% match