Skip to main content
SimilarExport ZIP
100%

Customizing axes

✓ Published1🌍 Public
TTimothy sit
Last edited Dec 28, 2020
Created on Dec 27, 2020
Forked from Making a barchart

This example demonstrates a horizontal bar chart displaying population data for five countries, with custom-formatted axes. The x-axis uses `d3.format('.3s')` to abbreviate large numbers and replaces 'G' with 'B' to show billions, while both axes remove their domain lines and grid lines are extended via `tickSize`. The chart is rendered as SVG using D3 v6, with scales built via `d3.scaleLinear` and `d3.scaleBand`, and axes created through `d3.axisLeft` and `d3.axisBottom`. Data loads from a CSV file using `d3.csv`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of population figures for nine countries, with a customized x-axis that uses abbreviated tick labels (e.g., “1.50M”). The chart is rendered as SVG using D3 v5, with data loaded from a local CSV file. The code employs `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, `d3.axisLeft`, and `d3.format` to position bars and axes. The y-axis lists country names, while the x-axis range is set from zero to the maximum population value.

LLonwabo11
91% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the population of ten countries, sorted by size, using D3 v5. The chart customizes axes by removing domain lines and tick lines, and formats population labels with the `format('.3s')` API, converting billions to "B". Data loads from a CSV file with `d3.csv`. The bars use a linear scale, with a labeled axis and title rendered as SVG text.

Ccyro666
91% match
Loading thumbnail…

Customizing Axes

This example demonstrates how to customize the axes of a bar chart to display the populations of several countries, with a custom tick formatter that abbreviates large numbers (e.g., converting "1.23G" to "1.23B"). The chart uses D3 v5 with `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` to render the axes, with gridlines and styled tick labels. Data is loaded from a CSV file via `d3.csv`, and the visualization is rendered as SVG elements.

Llanzosuarez
91% 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
91% match
Loading thumbnail…

Customizing Axes

This bar chart displays the populations of ten countries, using horizontal bars ordered by country name. The example demonstrates customizing D3 axes by formatting population ticks with the `format('.3s')` API (abbreviating values like “1.41B”) and removing default axis lines. It also applies gridlines via `tickSize` and uses `scaleLinear` and `scaleBand` for scales. Data loads from a CSV file, and the visualization renders as SVG elements with styles from an external stylesheet.

Ttgrex6
91% match
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
90% match
Loading thumbnail…

Customizing Axes

This example presents a horizontal bar chart detailing the populations of the ten most populous countries. The chart emphasizes its custom axes: a bottom x-axis shows population figures, reformatted from thousands to billions using D3's `format` and a custom tick function, while the left y-axis displays country names with its domain and tick lines removed. The chart, rendered as SVG, uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to construct the scales and axes. Data is loaded from a CSV file using `d3.csv`; grid lines are created by extending the x-axis ticks, and the chart is annotated with axis and title labels.

GGunMoLee
90% match
Loading thumbnail…

Customizing axes

A horizontal bar chart displays the populations of ten countries, with bars extending from left to right. The example demonstrates customizing chart axes using D3 v5. Population values are scaled with `scaleLinear`, while country names use `scaleBand` for categorical positioning. The code uses `axisLeft` and `axisBottom` to generate axes, formats tick labels with `format('.3s')` to abbreviate large numbers, and removes default axis lines for a cleaner look. Data is loaded from a CSV file and rendered as SVG rectangles.

Ssara17585
90% match