Customizing Axes

100%

Customizing Axes

✓ Published0🌍 Public

Last edited Nov 26, 2020

Created on Nov 26, 2020

This example shows the loss of forest area in Morocco across years as a horizontal bar chart, with each bar representing a year and its length corresponding to the area lost in hectares. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to customize tick formatting with `format('.3s')` and remove default domain lines for a cleaner look. Data is loaded from a CSV file and rendered as SVG, with labels for the title and x-axis provided in French.

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 Axis

This example shows a horizontal bar chart of the percentage of drought-vulnerable land in five North African countries, using a custom-styled axis. It highlights the top values with steelblue bars and includes axis labels and a title. The chart is rendered with SVG, using D3 v6 scales and axis generators, specifically `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. The code removes default axis domain lines and tick lines, customizes tick labels and formatting, and adds rotated or shifted titles. Data comes from a CSV file with country and percentage columns.

Mmanalhilali

81% match

Loading thumbnail…

Customizing Axes

This example shows the decline in rainforest area in square kilometers from 1998 to 2018, using an area chart with a green fill. The chart customizes its axes by rotating the date labels on the x-axis vertically and adding descriptive axis titles for both year and rainforest area. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for scaling, and d3.axisBottom and d3.axisLeft with custom tick sizes to create grid lines. The area path is generated using d3.area with a curveBasis interpolation.

JJake

80% match

Loading thumbnail…

Trees and Carbon - Customizing Axes

A bar chart displays the forest area of ten countries in 1990, sourced from Global Forest Research data. The visualization customizes axes by removing default domain lines and tick lines, applying a `.1s` tick format for compact numbers, and adding a custom axis label. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render an SVG, with green rectangles and hover interaction.

YYoram

79% match

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of population data for ten countries, with customized axes. The y-axis displays country names using a band scale, while the x-axis uses a linear scale with tick labels formatted in abbreviated units (e.g., “1.42B”) via d3.format and a custom replace function. The chart is rendered as SVG using d3-scale, d3-axis, and d3-selection, with data loaded from a CSV file and styled through external CSS.

MMarrnj2

78% match

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of lion populations in various African countries, with the y-axis listing country names and the x-axis representing population. The chart uses custom tick formatting via `d3.format` with a `.3s` specifier, and the `d3.axisBottom` and `d3.axisLeft` functions for axis generation. Rendered as SVG, it loads data from a local CSV file, and styling is applied through CSS classes like `.tick text` and `.axis-label`, demonstrating how to customize axes with D3 v5.

Mmargaretgoode

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

77% match

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the ten most populous countries, using a linear scale for population and a band scale for country names. The axes are customized with a filtered y-axis, a formatted x-axis that converts billions to "B", and a title. Built with D3 v5, it loads data from a CSV and renders SVG rectangles, removing domain lines and tick marks for a cleaner look.

DDhaval Potdar

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

77% match