Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published1🌍 Public
PPabloReyesBetanzo
Last edited Dec 27, 2018
Created on Oct 31, 2018
Forked from Making a Bar Chart

This example shows a horizontal bar chart of the ten most populous countries, with country names on the y-axis and population on the x-axis, using a red fill for each bar. It customizes the axes by removing domain lines and tick marks from the left axis, while the bottom axis uses a tick format that converts "G" (giga) to "B" (billion) via `d3.format`. The chart is rendered in SVG using `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`, 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 of the ten most populous countries, with population values transformed from thousands to absolute numbers. The chart customizes both axes: the y-axis removes domain lines and tick marks, while the x-axis uses a tick formatter via `d3.format` to abbreviate numbers and replace "G" with "B". The code uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and `d3.axisLeft` and `d3.axisBottom` to render the axes. Data is loaded from a CSV file using `d3.csv`.

Nntds12
95% match
Loading thumbnail…

Customizing axes

This example shows a horizontal bar chart of the top 10 most populous countries, using population data loaded from a CSV file. It customizes the axes by removing domain lines and tick lines from the y-axis, while the x-axis uses a custom tick format that abbreviates large numbers (e.g., converting billions to "B") via d3.format. The chart is rendered with SVG using d3.scaleBand for the categorical country labels and d3.scaleLinear for population values. Axis generation relies on d3.axisBottom and d3.axisLeft, with tick size extended across the plot for grid lines, and a title and axis label added as text elements.

AAnita Tse
94% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top ten most populous countries, with population values in billions and country names as categorical labels. The visualization customizes both axes by removing default domain lines, styling tick marks and labels via CSS, and formatting tick values with D3’s `format(".3s")` to convert gigabytes into billions. Using `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, it renders SVG rectangles with a steelblue fill, a title, and an x-axis label, all positioned within computed margins.

EEllednera
94% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the ten most populous countries, using a linear scale for population and a band scale for country names. The axes are customized with a filtered y-axis, a formatted x-axis that converts billions to "B", and a title. Built with D3 v5, it loads data from a CSV and renders SVG rectangles, removing domain lines and tick marks for a cleaner look.

DDhaval Potdar
94% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top ten most populous countries, with the x-axis formatted in billions and the y-axis stripped of its domain line and ticks for a cleaner look. The chart loads population data from a CSV file, multiplies the raw values by 1,000, and renders SVG bars using D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. The y-axis is customized by removing its domain and tick lines, while the x-axis tick labels use D3’s `format(".3s")` to abbreviate numbers and replace "G" with "B".

AAndres Bizzarri
94% 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
94% 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
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