Skip to main content
SimilarExport ZIP
100%

custom axis

✓ Published1🌍 Public
FFrançois Plet
Last edited Jul 6, 2019
Created on Jul 6, 2019
Forked from custom axis

This example shows the populations of six countries as orange bars on an SVG chart, with a rotated and custom-formatted y-axis that abbreviates large numbers (e.g., "G" becomes "B" for billions). It uses D3 v5 APIs including `csv`, `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft`, and removes default tick lines and domains for a cleaner look. The data comes from `data.csv`, with a title and axis label added via SVG text elements.

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

custom axis

This example shows a bar chart of country populations using a linear y-axis and a categorical x-axis. The chart uses D3 v5 to load population data from a CSV file, scales it with `scaleLinear` and `scaleBand`, and renders bars as SVG rectangles with orange fill. An `axisBottom` and `axisLeft` are used to create the custom axes, and clicking a bar logs its data to the console.

FFrançois Plet
89% match
Loading thumbnail…

Customizing Axis

This example shows the top 12 most populous countries using horizontal bars ordered by population. It uses d3.csv to load population data (in thousands, converted to raw counts), d3.scaleBand for the categorical country axis, and d3.scaleLinear for the numerical population axis. Customized axes include removed domain lines, formatted tick labels with abbreviations (e.g., "1.41B"), and a custom axis title, all rendered as SVG. D3’s axisLeft and axisBottom generate the ticks and grid lines.

Pprincit
88% match
Loading thumbnail…

Customizing Axis

A horizontal bar chart displays population data for seven countries, ranked by size, with a customized axis. The visualization uses D3 v5's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render SVG bars. Tick labels are formatted using `format('.3s')` to abbreviate numbers, replacing 'G' with 'B' for billions. Population axis tick lines extend across the chart, while the y-axis domain and tick lines are removed, and custom labels and a title are added.

NNikki-gea
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
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
Loading thumbnail…

Customizing Axis

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.

Rrebeccayc
88% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays population data for 27 countries, with bars extending from a linear scale and country names on a band scale. The example demonstrates customizing axes by applying D3’s `axisLeft` and `axisBottom` within a margin-based layout, using `scaleLinear` and `scaleBand` from D3 v6. Data is loaded from a CSV file via `d3.csv`, with population values multiplied by 1000. The SVG rendering uses steelblue rectangles, with axis text styled via CSS at 1.4em.

HHan Jinseok
88% match