Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published0🌍 Public
Nnicfavfar
Last edited May 7, 2019
Created on May 7, 2019
Forked from Customizing Axes

This visualization displays the most-watched Super Bowls, ranking teams by viewer counts from the provided CSV data. It uses D3 v5’s `scaleLinear` for the horizontal axis and `scaleBand` for vertical categories, with custom formatting via `format('.3s')` to abbreviate numbers. The chart builds on a prior bar chart example, highlighting axis customization through `axisBottom` and `axisLeft`, removing default domain lines, and styling tick marks, labels, and the title with CSS.

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

Customizing Axes

This bar chart displays the heights of 46 wide receivers from a CSV dataset, with the top 10 most populous countries’ population data noted in the README. It demonstrates custom D3 v5 axes by styling tick labels, tick lines, and an axis label with large sans-serif fonts and custom colors. Using the `d3.select` and `d3.csv` APIs, the SVG renders with steelblue bars, while the axis customization is applied via CSS classes on the `.tick` and `.axis-label` elements.

Eecw99
80% match
Loading thumbnail…

Customizing Axes

This bar chart displays the heights of 46 wide receivers from a CSV dataset, with the top 10 most populous countries’ population data noted in the README. It demonstrates custom D3 v5 axes by styling tick labels, tick lines, and an axis label with large sans-serif fonts and custom colors. Using the `d3.select` and `d3.csv` APIs, the SVG renders with steelblue bars, while the axis customization is applied via CSS classes on the `.tick` and `.axis-label` elements.

Eecw99
80% match
Loading thumbnail…

Customizing Axes

This example demonstrates a customized bar chart of NFL career sack leaders, using data from a CSV file listing player names and sack counts. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map the data, with `axisLeft` and `axisBottom` to render the axes. The x-axis features a custom tick format via `format`, and grid lines are created with `tickSize`. Styling is applied through CSS, including custom font sizes, colors, and removal of the default axis domain lines, while the bars themselves are filled green.

UUsbaldoFraire
79% match
Loading thumbnail…

Customizing Axes

This example demonstrates a customized bar chart of NFL career sack leaders, using data from a CSV file listing player names and sack counts. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map the data, with `axisLeft` and `axisBottom` to render the axes. The x-axis features a custom tick format via `format`, and grid lines are created with `tickSize`. Styling is applied through CSS, including custom font sizes, colors, and removal of the default axis domain lines, while the bars themselves are filled green.

UUsbaldoFraire
79% match
Loading thumbnail…

Customizing Axes

This bar chart displays the average values per telescope name from a small CSV dataset. The visualization demonstrates custom axis styling using D3 v5, where both the bottom and left axes are generated with `scaleBand` and `scaleLinear` respectively, and configured via `axisBottom` and `axisLeft`. Tick labels are enlarged to 2.7em, tick lines use a light gray stroke, and a custom axis label appears with a larger font size. The chart renders as an SVG with a fixed width and height, and the data is loaded asynchronously via `csv()`.

LLonwabo11
79% 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…

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