Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published0🌍 Public
SShengjie-Sun
Last edited May 13, 2019
Created on May 12, 2019

This example shows a horizontal bar chart ranking the top 10 most populous countries, with population values formatted using abbreviated notation. The chart customizes both axes: the y-axis removes domain lines and tick marks, while the x-axis uses a tick format and negative tick size to create gridlines. Built with D3 v5, it uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to render SVG elements, with data loaded from a CSV file.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart ranking the top 10 most populous countries, with population values scaled and formatted in billions. It demonstrates customized axes: the y-axis removes its domain and tick lines, while the x-axis uses a tick format that abbreviates numbers (e.g., converting "G" to "B") and includes a translated label. The code uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, rendering SVG rectangles with a steelblue fill. Data comes from a local data.csv file, processed by multiplying population values by 1,000.

Sshungshung
96% match
Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries, with population values on the x-axis and country names on the y-axis. The chart uses custom tick formatting to abbreviate large numbers (e.g., converting billions to "B") and removes axis domains and tick lines, replacing them with subtle gridlines. Rendered as SVG, the visualization is built with D3 v5, using `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, `d3.axisLeft`, and `d3.format`. Data is loaded from a CSV file and parsed into numeric population values.

CClara Hu
95% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries, with population values displayed in billions on a custom axis. The code uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scales, and d3.axisBottom with a custom tick format that abbreviates numbers (e.g., converting "G" to "B"). The left axis hides its domain and tick lines, while a title and axis label are added as SVG text elements.

RRiccardo Pressiani
95% match
Loading thumbnail…

Customizing Axes

This example demonstrates a horizontal bar chart of the top 10 most populous countries, using a custom-styled axis to improve readability. The chart maps population values to bar lengths and country names to vertical bands, with the x-axis formatted in compact notation (e.g., “1.41B”) via `d3.format`. The bar chart is rendered in SVG using D3 v6, with `d3.scaleLinear` for the x-scale and `d3.scaleBand` for the y-scale. Both axes are customized by removing default domain lines and adding tick marks that extend across the plot. Population data is loaded from a CSV file and multiplied by 1000 before rendering.

GGordon Yang
95% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries, using a linear scale for population and a band scale for country names. The y-axis labels are enlarged, while the x-axis applies a custom tick formatter that converts values into abbreviated units (e.g., "1.42B"). The chart uses `d3.csv` to load data, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` with SVG rendering. The axis domain lines are removed, and tick marks extend across the plot area.

Jjblaskovich
95% match
Loading thumbnail…

Customizing axes

This example shows a horizontal bar chart of the top 10 most populous countries, with population values displayed along the x-axis and country names on the y-axis. It customizes axis elements by removing domain lines, using abbreviated tick labels that convert "G" to "B" via `format('.3s')`, and adding a rotated axis title. The chart is built with D3 v5, using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, rendering to SVG from a CSV file. Grid lines are created through `tickSize(-innerHeight)`, and the y-axis’s domain and tick lines are removed.

HHasideluxe
95% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries, with axes customized to improve readability. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map population and country names, while `axisBottom` and `axisLeft` generate the axes. The x-axis tick labels are reformatted from scientific notation (e.g., “1.4G”) to a clearer “B” suffix using D3’s `format` with string replacement, and grid lines extend across the plot area. The y-axis labels and domain line are removed, and data comes from a local CSV file loaded via `d3.csv`.

OOhayouKaminari
95% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries, with customized axes. The y-axis displays country names using d3.axisLeft, while the x-axis uses d3.axisBottom with a tick formatter that converts values to abbreviations like "1.42B" and draws grid lines via tickSize. The code removes default axis domains and tick lines, and adds axis labels and a title with custom text styling. Data is loaded from a CSV file using d3.csv, with population values multiplied by 1000.

LLukas Schießer
95% match