Skip to main content
SimilarExport ZIP
100%

Customising Axes

✓ Published1🌍 Public
AAndreas Papastergiou
Last edited Aug 16, 2021
Created on Aug 14, 2021
Forked from Customizing Axes

This visualization displays the top 10 most expensive football transfers, using a horizontal bar chart where bar lengths correspond to transfer fees in euros. The chart demonstrates custom axis styling with d3-format’s `.format('.3s')` for tick labels, while removing default domain lines and tick marks from both axes. The y-axis uses `scaleBand` for player names, and a custom title and axis label are appended as SVG text elements. Data loads from a CSV file using d3.csv, with fees parsed as numbers.

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…

Customizing Axes

This bar chart displays the top 10 goal scorers in the world, with countries and goal counts drawn from a CSV file. It shows how D3 v5 axes can be customized: the y-axis uses `axisLeft` for country labels, while the x-axis uses `axisBottom` with a custom tick formatter that converts large numbers into abbreviated units (e.g., "805" to "805"). The chart also removes default axis domains and gridlines, adds an axis label and title, and uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis.

Ppblanas
78% match
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 goal scorers in the world, with countries and goal counts drawn from a CSV file. It shows how D3 v5 axes can be customized: the y-axis uses `axisLeft` for country labels, while the x-axis uses `axisBottom` with a custom tick formatter that converts large numbers into abbreviated units (e.g., "805" to "805"). The chart also removes default axis domains and gridlines, adds an axis label and title, and uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis.

Ppblanas
78% match
Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the net worth of the top 8 most valuable football clubs, using data from a CSV file that is loaded and parsed with the `csv` method. The visualization customizes D3 axes by removing domain lines and tick lines from the y-axis, applying a tick format to the x-axis, and adding axis labels. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG elements, with the x-axis showing values in billions.

TTomislav Pezer
77% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the top six Dota 2 teams by earnings, using custom tick formatting that abbreviates large numbers with an “s” prefix and then converts “G” to “B” to show values in billions. The chart removes axis domains and gridlines from the y-axis while adding a custom axis label and title. It uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, rendering as SVG. The data comes from a local CSV file with team names and earnings.

PPushkov Fedor
76% match
Loading thumbnail…

Fork of Making a Bar Chart

This interactive bar chart shows Premier League team transfer spending (incoming fees) for a selected season, with teams ordered alphabetically or by final league position. Users toggle between seasons and transfer types via dropdown menus, which trigger re-rendering with D3’s `scaleBand` and `scaleLinear`. The SVG chart loads data from a local CSV file using `d3.csv`, with axes formatted via `axisLeft` and `axisBottom`. Bars update dynamically as selections change, displaying transfer totals in euros.

JJonathan Taylor
76% match
Loading thumbnail…

Customizing Axes

This example visualizes the heights of wide receivers from the 2010 NFL draft, using data from a local CSV file. It builds on a basic bar chart to demonstrate how D3 axes can be customized, applying styled tick labels, grid lines, and axis titles through the `d3.axisLeft` and `d3.axisBottom` APIs. The SVG rendering uses `d3.scaleBand` and `d3.scaleLinear` for the chart’s scales, with formatting via `d3.format`.

Eecw99
76% match
Loading thumbnail…

Customizaing Axes

This example displays a horizontal bar chart of the top 10 most populous countries, using a D3 v5 SVG rendering. The chart shows population values on a linear x-axis with custom tick formatting that abbreviates large numbers (e.g., converting billions to 'B'), while the categorical y-axis lists country names. The code uses D3's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the scales and axes. It removes default domain lines and tick lines, and adds custom axis labels and a title. Data is loaded from a CSV file and multiplied by 1,000.

Nnkohdatavis
75% match
Loading thumbnail…

Customising Axes

This example shows current Premier League standings as a horizontal bar chart, with teams sorted by points and a custom-styled axis layout. It uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisLeft and d3.axisBottom to render the axes. The code removes default tick lines and domain paths for the y-axis, adds rotated titles, and uses CSS classes to style tick text and axis labels. The SVG rendering loads data from a CSV file.

Bbenholvey
75% match