Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published1🌍 Public
LLonwabo11
Last edited May 9, 2019
Created on May 9, 2019
Forked from 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()`.

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 shows a horizontal bar chart of country populations, with a custom tick format that abbreviates large numbers from billions (G) to billions (B). It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to position bars and axes, with data loaded from a CSV via `d3.csv`. The axis ticks are formatted using D3’s `format` function and the bars are styled with a blue fill in SVG.

LLonwabo11
85% match
Loading thumbnail…

Customizing Axes

This example demonstrates customized chart axes with an SVG bar chart of country populations loaded from a local CSV file. It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to create the plot, applying a custom tick formatter that abbreviates large numbers with `format('.3s')` and replaces ‘G’ with ‘B’. The x-axis is styled as a full-length gridline, while the y-axis removes its domain and tick lines for a cleaner look.

IIan
83% match
Loading thumbnail…

Axes customization.

This example demonstrates customizing axes in a bar chart built with D3 v5, loading data from an external CSV file and rendering it as SVG rectangles. It uses `d3.scaleLinear` and `d3.scaleBand` to map numeric and categorical values, while `d3.axisBottom` and `d3.axisLeft` generate the axes with custom tick formatting via `d3.format`. The code removes default domain lines, adds a custom axis label and title, and styles tick marks and text through CSS.

CChocoOrange
83% match
Loading thumbnail…

Customizing Axes

This example presents a bar chart of model accuracy, using data from a local CSV file. It demonstrates how to customize D3 axes with `d3.axisBottom` and `d3.axisLeft`, removing default domain lines and adjusting tick labels with `d3.format`. The chart’s layout uses `d3.scaleLinear` and `d3.scaleBand`, with a custom tick format that replaces 'G' with 'B' for large numbers. Styling is applied via CSS to the SVG output.

Iisaac-ux
83% match
Loading thumbnail…

Customizing Axes

This example shows how to customize axes in D3 bar charts, displaying event names on the y-axis and their start years on the x-axis. It uses D3 v5’s `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the chart, with custom tick formatting via `format('.3s')` and removal of default domain lines. The SVG rendering includes axis labels, a title, and grid lines generated by setting negative tick sizes. Data comes from a local CSV file parsed with `d3.csv`.

SShehroze Aamer
83% match
Loading thumbnail…

Customizing Axes

This bar chart visualizes node insertion distances from a dataset, showing both absolute and relative distances across node IDs. The chart uses dual y-axes: a left axis for node distance and a right axis for relative distance, with red circles overlaid on bars to highlight relative values. Built with D3 v5, the code demonstrates customizing axes through `scaleLinear`, `scaleBand`, `axisLeft`, `axisRight`, and `axisBottom`, with `.tickFormat` and `.tickSize` controls. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering includes labeled axes and a title.

Uucsclk
83% 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
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
82% match