Skip to main content
SimilarExport ZIP
100%

Custom Axis

✓ Published1🌍 Public
PPerry
Last edited Mar 3, 2020
Created on Mar 3, 2020
Forked from Bar Chart

A horizontal bar chart displays the 2018 population of US states and Washington D.C., sourced from datausa.com. The visualization uses D3 v5 with an SVG rendering, where the x-axis is customized using `scaleLinear` and `axisBottom` with a tick formatter to abbreviate large numbers (e.g., converting G to B). The y-axis uses `scaleBand`, and the chart includes a title and axis label styled via CSS.

AI-generated description

Bar chart shows 2018 population data from datausa.com.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart

This bar chart displays 2018 state population data from datausa.com. It uses D3 v5 with an SVG rendering approach, mapping population values to horizontal bar lengths against state labels. The code employs `d3.csv`, `scaleLinear`, and `scaleBand` to process the data and position the bars, with `axisLeft` and `axisBottom` generating the chart’s axes. Each state’s population is represented by a steel-blue rectangle, sorted alphabetically along the vertical axis.

PPerry
83% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the populations of the four most populous countries, with the United States incorrectly plotted as 326,767,000. The chart uses D3 v6 scales and axes, including `scaleLinear` for the population axis and `scaleBand` for the country categories. Custom tick formatting converts large numbers using `d3.format` to abbreviations like “B” for billions. The axes are heavily styled, with grid lines via `tickSize`, and the left axis removes its domain and tick lines entirely.

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

Customizing Axes

This bar chart displays the infant mortality rates for the ten most populous U.S. states, using 2018 population estimates from the United Nations World Population Prospects. It highlights custom axis styling, including removed domains and tick lines on the y-axis, a formatted bottom axis with a custom tick size, and a rotated axis label. Built with D3 v5, the visualization uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG elements, while CSS controls text and tick appearance. The data is loaded from a CSV file and mapped to rect widths.

Cchrismdiaz
82% match
Loading thumbnail…

Customizing Axis

This bar chart displays the 2018 population estimates for the top 10 most populous countries, with country names on the y-axis and population counts on the x-axis. The x-axis uses a custom tick formatter via `d3.format` to abbreviate numbers with suffixes, and gridlines extend across the chart. The visualization is built with D3 v6, using `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`, rendering as SVG. Data comes from the World Population Prospects 2017 dataset.

DDataFeast_71
81% match
Loading thumbnail…

Customizing Axes

This example presents a horizontal bar chart of the top 10 most populous countries using 2018 United Nations population estimates. The chart demonstrates D3 axis customization, using `d3.axisBottom` with `.tickFormat` to abbreviate population numbers (converting "G" to "B"), custom tick sizes that extend through the chart, and hidden domain lines. It also uses `d3.scaleBand` and `d3.scaleLinear` to map countries and populations, with SVG rendered bars and styled text labels.

Xxuinleaf849
81% match
Loading thumbnail…

Customizing Axis

This horizontal bar chart displays the populations of the world’s ten most populous countries, based on 2018 estimates from the United Nations World Population Prospects. Built with D3 version 6, the visualization uses `scaleLinear` and `scaleBand` to map population values and country names. Custom axis styling removes the chart’s default domain lines, applies tick marks with negative sizing to create a grid, and formats tick labels using `format` to abbreviate numbers, such as converting gigabytes to billions.

AAndrewRiceMGW
81% match