Skip to main content
SimilarExport ZIP
100%

Customizing aXis

✓ Published1🌍 Public
Llwinmgsoe
Last edited Apr 23, 2020
Created on Apr 23, 2020
Forked from Bar chart

A horizontal bar chart displays the populations of the ten most populous countries, using data from the UN. The chart customizes the bottom axis by converting D3’s default SI-prefix formatting from “G” to “B” via `format('.3s')` and string replacement. It builds scales with `scaleLinear` and `scaleBand`, renders SVG rectangles for bars, and positions the axes using `axisBottom` and `axisLeft`. The visualization is generated with D3 v5 and styled with plain CSS.

AI-generated description

First barchat by D3.js Dataset source UN

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing aXis

This example visualizes the top ten countries by population using a bar chart rendered as circles, with data sourced from the United Nations. It shows how to customize D3 axes by using `d3.axisBottom` with a custom tick formatter that abbreviates numbers using `d3.format('.3s')` and replaces the 'G' suffix with 'B' to display values in billions. The chart applies `d3.scaleLinear` and `d3.scaleBand` for positioning, and renders SVG circles scaled by population. The axis labels and tick formatting are explicitly styled via CSS, demonstrating custom axis configuration.

Llwinmgsoe
93% 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
89% match
Loading thumbnail…

Customizing axes with D3.js!

A horizontal bar chart displays the populations of the ten most populous countries, with data loaded from a CSV file. The visualization customizes D3.js axes by removing the x-axis domain line and all y-axis grid lines and ticks. It uses D3's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs, and formats x-axis tick labels with `format("0.3s")`, replacing "G" with "B" to abbreviate billions.

CCalvin Gomez
88% match
Loading thumbnail…

Customizing Axes

This horizontal bar chart displays the population of the top 10 most populous countries, based on 2018 United Nations estimates. It showcases D3 axis customization, including formatted tick labels that convert values to billions, custom tick sizes, and a labeled x-axis. The code uses `d3.csv`, `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and `format` from D3 v5, rendering an SVG with styled text and gridlines. The visualization is a refined follow-up to a basic bar chart tutorial.

Ssppcmccoy
88% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the population of the ten most populous countries, using CSV data loaded with `d3.csv`. The chart customizes its axes with `d3.axisBottom` and `d3.axisLeft`, applying a `d3.format` tick formatter that converts values from G to B. `d3.scaleLinear` and `d3.scaleBand` position the bars, while gridlines are created by extending x-axis ticks with a negative tick size. The y-axis’s domain and tick lines are removed for a cleaner look.

1123fischer
88% match
Loading thumbnail…

Customizing Axis

A horizontal bar chart displays the populations of the 15 most populous countries, using 2020 estimates from the United Nations World Population Prospects. D3's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs structure the visualization, with the x-axis formatted to abbreviate large numbers (e.g., "1.43B") via `format`. The chart customizes axes by removing default domain lines and tick lines, styling remaining ticks, and adding custom labels and a title.

KKurt J Nilsen
88% match
Loading thumbnail…

Customize Axist

A horizontal bar chart displays the population of the ten most populous countries, using a linear scale for population and a band scale for country names. The x-axis uses a custom tick format that abbreviates large numbers and converts "G" to "B" for billions, while axis lines and ticks are selectively removed via `axisBottom` and `axisLeft`. Data is loaded from a CSV with `d3.csv`, and bars are rendered as SVG rectangles with a padding between them.

JJames
88% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the populations of the top 10 most populous countries, using 2018 United Nations estimates. The chart customizes both axes: the left axis removes domain and tick lines, while the bottom axis uses `d3.axisBottom` with a tick format converting billions to 'B' and adds a "Population" label. The code relies on `d3.csv`, `d3.scaleLinear`, and `d3.scaleBand` to render SVG rectangles with steelblue fills.

SSteven Prichard
88% match