Skip to main content
SimilarExport ZIP
100%

Customising axes

✓ Published0🌍 Public
Pp4pravin
Last edited Mar 24, 2020
Created on Mar 24, 2020

This example shows a horizontal bar chart of country populations, with customized axes that improve readability. The y-axis displays country names using `d3.scaleBand`, while the x-axis uses `d3.scaleLinear` with a tick format that abbreviates large numbers via `d3.format`. The chart renders as SVG within a React framework, loading data from `data.csv` and styling bars with steelblue fills. Axes are generated using `d3.axisLeft` and `d3.axisBottom`.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

customizing axes

This example shows a horizontal bar chart of population by country, with customized axes that remove the default axis lines and use formatted tick labels (abbreviating millions with "B"). The chart is built with React and rendered as SVG, using D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format`. Population data is loaded from a CSV file and multiplied by 1000, with grid lines generated via negative tick sizes and axis titles added as text elements.

Llinkshady
91% match
Loading thumbnail…

Customizing Axes

This example demonstrates how to customize axes in a bar chart showing population by country. The code loads data from a CSV file and uses D3 v5's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to generate the scales and axes within an SVG. It renders horizontal bars, with the y-axis listing country names and the x-axis displaying population values. The `csv` function parses the data, and the chart is structured with explicit margins and a grouped `<g>` element for positioning.

Ccbinh951
90% match
Loading thumbnail…

Customizing Axes

This example demonstrates how to customize axes in a bar chart showing population by country. The code loads data from a CSV file and uses D3 v5's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to generate the scales and axes within an SVG. It renders horizontal bars, with the y-axis listing country names and the x-axis displaying population values. The `csv` function parses the data, and the chart is structured with explicit margins and a grouped `<g>` element for positioning.

Ccbinh951
90% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of country populations, with each bar’s length proportional to population and country names along the y-axis. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population and country values, rendering bars as SVG rectangles within a grouped `<g>` element. Data is loaded from a CSV file via `csv()`, with population values converted from billions to raw numbers. The chart includes fixed margins for spacing but does not display axes or labels, focusing on the raw bar layout.

GGeMixl
90% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the ten most populous countries, with customized axes and tick formatting. It uses d3.csv to load population data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom to render axes. The code removes default domain lines, applies a custom tick formatter that abbreviates numbers (converting 'G' to 'B'), and rotates labels via SVG text elements, all rendered with React-compatible D3 v5 in an SVG container.

Ssherryyx
90% match
Loading thumbnail…

Customizing Axes

This example demonstrates how to customize both the x- and y-axes of a bar chart, using D3 v5 within a React framework. The chart displays population data by age band, sourced from a local CSV file, and renders bars as SVG rectangles with a steelblue fill. The y-axis uses `scaleBand` for categorical age ranges, while the x-axis uses `scaleLinear` with a custom tick format that abbreviates large numbers (e.g., converting "G" to "B" for billions) via `format('.2s')`. Axes are drawn with `axisLeft` and `axisBottom`, with their domain lines removed for a cleaner look, and custom labels and titles added as SVG text elements.

LLucasj01UK
89% 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
89% 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
89% match