Skip to main content
SimilarExport ZIP
100%

Customizing axes

✓ Published2🌍 Public
SSimmer999
Last edited Feb 20, 2021
Created on Feb 12, 2021
Forked from Bar Chart

This example displays a horizontal bar chart of the top ten most populous countries. Built with D3 v5, it uses `scaleLinear` and `scaleBand` to map population and country names. The chart features a customized x-axis that formats large numbers using `format('.3s')` and replaces 'G' with 'B'. Both axes remove their default domain lines, while `axisBottom` adds population labels and grid ticks from the CSV data.

AI-generated description
MIT Licensed

Similar vizzes

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

Customizing Axes

This example demonstrates a horizontal bar chart of the top 10 most populous countries, highlighting customized axis styling. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map population and country names, with `axisBottom` and `axisLeft` rendering ticks. The code removes default axis domains and gridlines, applies custom tick formatting via `format('.3s')` to abbreviate numbers, and sets an SVG title. Data loads from a CSV file, and rendering uses SVG with `select` and `csv` from D3.

BBo Yang
94% 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
94% match
Loading thumbnail…

Customizaing Axes

This example displays a horizontal bar chart of the top 10 most populous countries, using a D3 v5 SVG rendering. The chart shows population values on a linear x-axis with custom tick formatting that abbreviates large numbers (e.g., converting billions to 'B'), while the categorical y-axis lists country names. The code uses D3's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the scales and axes. It removes default domain lines and tick lines, and adds custom axis labels and a title. Data is loaded from a CSV file and multiplied by 1,000.

Nnkohdatavis
94% match
Loading thumbnail…

Customizing axes

This example demonstrates a horizontal bar chart of the top 10 most populous countries, with custom axis formatting. The x-axis uses `d3.axisBottom` with a tick formatter that abbreviates population values (e.g., converting billions to "B"), while the y-axis uses `d3.axisLeft` with grid lines removed. The chart is rendered as SVG using D3 v5, reading data from a CSV file, and applies styling via CSS classes for the title and axis labels.

Iikimes
94% match
Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the ten most populous countries, with population values in thousands. The chart customizes both axes by removing domain lines, adding grey tick lines for the x-axis, and styling tick labels. Built with D3.js v6, it uses `scaleLinear` and `scaleBand` for scales, `axisBottom` with a custom tick format, and `axisLeft` for the categorical axis. Data is loaded from a CSV file.

Sscarlet shao
94% match
Loading thumbnail…

Customizing Axes!

This example displays a horizontal bar chart of the top 10 most populous countries, using D3.js (v5) to render the visualization in an SVG. Population values are read from a CSV file and scaled with `scaleLinear`, while country names are mapped to the vertical axis using a band scale (`scaleBand`). The left axis is stripped of its default line and domain, and the bottom axis uses a custom tick formatter that abbreviates numbers and converts "G" to "B" for billions. Grid lines extend across the chart via a negative tick size, and the chart includes custom axis labels and a title.

NNathan Cheever
94% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries, with custom formatting on the population axis that converts values into billions using a "B" suffix. It loads data from a CSV file and renders SVG bars using D3 v5, applying a linear scale for population and a band scale for countries. The chart uses `d3.axisLeft` and `d3.axisBottom` with tick customization, removes default axis lines, and adds a title and axis label.

Mmatthewfresh
94% match