Skip to main content
SimilarExport ZIP
100%

Customizing Axis

✓ Published0🌍 Public
Rrebeccayc
Last edited Jan 20, 2020
Created on Jan 20, 2020
Forked from Making a Bar Chart

This example shows a horizontal bar chart ranking the ten most populous countries, with population values on a linear axis and country names on a categorical band axis. The SVG rendering uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs, while a custom `format` function converts large numbers to abbreviated labels (e.g., “B” for billions). Axis grid lines extend across the plot area, and the country label axis removes its domain and tick lines for a cleaner look. Data comes from a local CSV file containing population figures per country.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axis

This example displays a horizontal bar chart of the ten most populous countries, with population values on the x-axis and country names on the y-axis. It uses D3 v6’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG. The code customizes tick labels by converting large numbers (e.g., G to B) via `format`, removes gridlines on the y-axis, and adds axis and title text. Data comes from a CSV file loaded with `csv`, and population values are multiplied by 1000 for display.

MModalMBS
94% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart ranking the ten most populous countries, with values reformatted from raw numbers into readable abbreviations (e.g., "1.42B"). Custom axis styling removes default domain lines and tick marks, adds a centered "Population" label, and applies a large, muted color palette to text and gridlines. Built with D3 v5, it uses `scaleLinear` and `scaleBand` to map population and country names, `axisBottom` and `axisLeft` for axes, and `csv` to load the data, which is multiplied by 1000 during preprocessing. The chart is rendered as SVG with rectangles filled in steel blue.

DDan Henri
93% match
Loading thumbnail…

Customizing Axis

A horizontal bar chart displays the ten most populous countries, with population values along the x-axis and country names on the y-axis. The chart uses d3.scaleLinear and d3.scaleBand to map data, while d3.axisBottom and d3.axisLeft render axes with customized tick formatting that abbreviates large numbers (e.g., converting "G" to "B" for billions). Axis lines and ticks are selectively removed using D3 selections, and the data is loaded from a CSV file with populations multiplied by 1,000.

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

Customized Axis

This example shows a horizontal bar chart ranking the top 10 most populous countries, with population values on the x-axis and country names on the y-axis. The chart uses d3.scaleLinear and d3.scaleBand to map data from the CSV file, while d3.axisBottom and d3.axisLeft render the axes with customized tick formatting (using d3.format to abbreviate large numbers). The y-axis labels are styled distinctly, and the chart includes a title and a labeled x-axis. The bars are rendered as SVG rectangles with a fixed fill color.

YYasara Peiris
93% 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
93% match
Loading thumbnail…

Customizing Axis

This bar chart displays the top ten most populous countries, with population values shown on a horizontal axis and country names on a vertical axis. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the population scale and `scaleBand` for country categories. Axis customization includes tick formatting via `format('.3s')` that replaces 'G' with 'B' for billions, plus removal of axis domain lines and grid-line styling through `axisBottom` and `axisLeft` calls. Population data from CSV files is converted to absolute numbers by multiplying by 1000.

Nnick-yadav
93% match