Skip to main content
SimilarExport ZIP
100%

Customize axis

✓ Published1🌍 Public
Mmichielpunt86
Last edited Jul 23, 2020
Created on Jul 23, 2020
Forked from HTML Starter

This example shows a horizontal bar chart of country populations using a linear scale for the x-axis and a band scale for the y-axis. The code imports `d3.select`, `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.max`, `d3.axisLeft`, `d3.axisBottom`, and `d3.format` to load `data.csv`, compute the domain, and render SVG rectangles. The bottom axis is customized with a `.2s` tick format, abbreviating population values (e.g., 1.4M).

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Customize axis

This example shows a horizontal bar chart of country populations using a linear scale for the x-axis and a band scale for the y-axis. The code imports `d3.select`, `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.max`, `d3.axisLeft`, `d3.axisBottom`, and `d3.format` to load `data.csv`, compute the domain, and render SVG rectangles. The bottom axis is customized with a `.2s` tick format, abbreviating population values (e.g., 1.4M).

Mmichielpunt86
100% match
Loading thumbnail…

Customize axis

This example demonstrates a horizontal bar chart of population data for the top ten countries, with customized axes to improve readability. The y-axis displays country names using `scaleBand`, while the x-axis uses `scaleLinear` with a tick format of `format('.2s')` to abbreviate large population numbers (e.g., millions). The visualization is rendered as SVG elements, with data loaded from a CSV file and processed by multiplying population values by 1,000. The chart uses `axisLeft` and `axisBottom` to generate the axes within a margin-defined layout.

Mmichielpunt86
93% match
Loading thumbnail…

Customizing Axis

This example demonstrates a horizontal bar chart of population data for selected countries, with customized axis formatting. The visualization uses a linear scale for population values and a band scale for country names, rendering bars as SVG rectangles filled with steelblue. It customizes the x-axis tick labels using `d3.format` to abbreviate large numbers with SI prefixes, while the y-axis displays country names. Data is loaded from a CSV file using `d3.csv`, and the chart layout applies explicit margins and padding.

SSophia Murage
90% match
Loading thumbnail…

Customizing Axis

This example demonstrates a horizontal bar chart of population data for selected countries, with customized axis formatting. The visualization uses a linear scale for population values and a band scale for country names, rendering bars as SVG rectangles filled with steelblue. It customizes the x-axis tick labels using `d3.format` to abbreviate large numbers with SI prefixes, while the y-axis displays country names. Data is loaded from a CSV file using `d3.csv`, and the chart layout applies explicit margins and padding.

SSophia Murage
90% match
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
90% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart ranking country populations, with a linear x-axis and a categorical y-axis. D3’s `scaleLinear` maps population values to bar widths, while `scaleBand` positions the country labels with padding. Axes are generated using `axisBottom` and `axisLeft`, with tick labels formatted via `format('.3s')` to display compact numbers like “1.41M”. The chart updates from a CSV file, which the code loads with `d3.csv` and multiplies each population value by 1000.

MMajaha21
90% match
Loading thumbnail…

Customizing Axis

This example shows a horizontal bar chart of population data for ten countries, with a customized axis layout using margins to position the labels and tick marks. The visualization uses D3 v5 with an SVG rendering approach, importing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from the D3 library. Population values from the CSV file are multiplied by 1000 before being mapped to the x-axis scale, while country names are mapped to the y-axis band scale. The chart displays the data as steelblue rectangles, with the bottom axis explicitly translated to the inner chart height.

RRenato Francia Castillo
90% match
Loading thumbnail…

customizing axis

This example shows a horizontal bar chart of population by country, with a customized x-axis that reformats large numeric values from scientific notation to abbreviated text (e.g., "1.44B" instead of "1.44G"). Using D3 v7, it loads data from a CSV file and maps population to a linear scale and country names to a band scale for the bars. The axes are generated with `axisLeft` and `axisBottom`, while the tick formatter uses `d3.format` with string replacement. Bars are drawn as SVG rectangles with heights derived from `yScale.bandwidth()`.

AAkash
90% match