Skip to main content
SimilarExport ZIP
100%

A bar Graph with custom Axis.js

✓ Published1🌍 Public
DDavideSanto
Last edited Mar 21, 2020
Created on Mar 20, 2020

This example displays the world population in 2016 for 24 countries as horizontal bars, sorted by population size. Using D3 v5, the code loads data from a CSV file and renders an SVG bar chart with custom axes. The y-axis uses `scaleBand` for country names, while the x-axis uses `scaleLinear` with custom tick formatting via `format('.3s')` to abbreviate numbers, and grid lines are drawn with `axisBottom` and `tickSize`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axis

This bar chart displays population sizes for a list of countries, using a linear scale for the x-axis and a band scale for the y-axis. The visualization is rendered as SVG using D3 v5, with axes customized via `axisLeft` and `axisBottom`. Country names appear on the vertical axis while horizontal bars show population values, with data loaded from a CSV file and scaled by a factor of one thousand.

JJustin Gieselbach
86% match
Loading thumbnail…

axes and stuff

This example displays a horizontal bar chart of population by country. The chart uses a linear scale for the population axis and a band scale for country names, with gridlines extending across the plot area. Built with D3 v5, it uses `svg.append`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render SVG bars. The code loads population data from a CSV, multiplies values by 1000, and formats tick labels using D3's `format('.3s')`.

AAndrew Fletcher
86% match
Loading thumbnail…

Customizing Axis

A horizontal bar chart displays population data for seven countries, ranked by size, with a customized axis. The visualization uses D3 v5's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render SVG bars. Tick labels are formatted using `format('.3s')` to abbreviate numbers, replacing 'G' with 'B' for billions. Population axis tick lines extend across the chart, while the y-axis domain and tick lines are removed, and custom labels and a title are added.

NNikki-gea
86% match
Loading thumbnail…

Customizing Axes

This example displays a bar chart of the world's most populous countries, using a horizontal layout where bar length encodes population. The code demonstrates custom axis styling with D3 v5, applying tick formatting that converts large numbers to abbreviated forms and removing default axis lines. It uses `d3.scaleLinear` and `d3.scaleBand` for scales, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.format` to customize tick labels. The chart is rendered as SVG, with data loaded from a CSV file.

Nnoelmiranda
86% match
Loading thumbnail…

Customizing axes!

This bar chart displays the population of eight countries in 2020, with countries on the y-axis and population on the x-axis. The visualization uses D3.js v5 to render an SVG, employing a linear scale for population and a band scale for countries. The code customizes the x-axis tick format with a `format` function and removes the y-axis domain and tick lines. Data is loaded from a CSV file, with population values multiplied by 1000. Styling is applied via an external stylesheet.

Aalicjakot
86% match
Loading thumbnail…

D3JS bar chart custom axis

A D3.js v6 bar chart displays population counts for nine countries using an SVG rendering with a custom horizontal axis. The axis converts D3’s default SI-prefix formatting (like “1.4G”) into readable labels using “B” for billions via `axisBottom` and `format('.3s')`. The vertical axis uses a band scale for country names, while bar widths come from a linear scale over population values loaded from a CSV file.

FFedor Sharygin
86% match
Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the ten most populous countries, with countries on the y-axis and population counts on the x-axis. Built with D3.js v5, it uses `scaleLinear` and `scaleBand` to map data, and `axisBottom` and `axisLeft` for custom axes. Population values from a CSV file are formatted with abbreviations (e.g., 'B' for billions), and the chart removes default axis lines for a cleaner look. All elements render as SVG.

RRiccardo Pressiani
85% match
Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the ten most populous countries, with countries on the y-axis and population counts on the x-axis. Built with D3.js v5, it uses `scaleLinear` and `scaleBand` to map data, and `axisBottom` and `axisLeft` for custom axes. Population values from a CSV file are formatted with abbreviations (e.g., 'B' for billions), and the chart removes default axis lines for a cleaner look. All elements render as SVG.

RRiccardo Pressiani
85% match