Skip to main content
SimilarExport ZIP
100%

Custom Axis

✓ Published1🌍 Public
DdeafMother
Last edited Jan 18, 2020
Created on Jan 18, 2020
Forked from MAKING BARS

This example visualizes country populations with a horizontal bar chart, using a custom axis that formats large numbers (e.g., converting gigabytes to billions) via D3’s `format` API. The bar lengths are scaled by `d3.scaleLinear`, while country names are positioned using `d3.scaleBand`. The chart is rendered as SVG with React, importing `csv`, `scaleLinear`, `scaleBand`, `max`, `axisLeft`, `axisBottom`, and `format` from D3 v5. Data comes from `data.csv`, with gridlines and axis labels styled through CSS.

AI-generated description

A bare minimum HTML page.

See also React Starter.

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

Customising axes

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`.

Pp4pravin
89% match
Loading thumbnail…

Customising Axis

This example displays a horizontal bar chart of the top 10 most populous countries, with population values formatted in billions using the `d3.format` API. The chart customizes both axes by removing default domain lines and tick marks, adding a label for the population axis, and using a `scaleBand` for countries and a `scaleLinear` for populations. Data is loaded from a CSV file and rendered as SVG elements, with axis ticks styled through CSS.

Nnsadath
88% match
Loading thumbnail…

Customizing Axis

This example presents a horizontal bar chart of the top 10 most populous countries using data from a CSV file. Customized axes include a formatted population scale that abbreviates numbers with “B” for billions, and grid lines extending across the chart. The code imports specific D3 v5 functions like `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, rendering the visualization as SVG within a React framework.

SSchmittYannic
88% 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
88% 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
88% 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
88% match