Skip to main content
SimilarExport ZIP
100%

Custom axis

✓ Published1🌍 Public
Vvladvaculin
Last edited Oct 14, 2019
Created on Aug 27, 2019
Forked from Making a bar chart

A horizontal bar chart displays city areas with custom-formatted axis labels, converting abbreviations like "G" to "B" for billions. The chart uses d3.csv to load data, d3.scaleLinear for the x-axis, d3.scaleBand for categorical y-values, and d3.axisBottom with a custom tick format function. SVG rectangles render the bars, with hover effects via CSS. The visualization includes a centered title and axis legend, with gridlines generated through tick sizing.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Customising axes

A horizontal bar chart displays population data for ten countries, with custom tick formatting abbreviating numbers by converting "G" to "B" for billions. The example uses d3.csv to load data, d3.scaleBand and d3.scaleLinear for scales, and d3.axisBottom with d3.axisLeft for axes. Custom styling removes default domain lines and adds a centered axis label and title, while tick lines extend across the chart using d3.axisBottom’s tickSize.

Eevapavlinek
86% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of country populations, with a custom tick format that abbreviates large numbers from billions (G) to billions (B). It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to position bars and axes, with data loaded from a CSV via `d3.csv`. The axis ticks are formatted using D3’s `format` function and the bars are styled with a blue fill in SVG.

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

Cusomizing Axis

This example shows a horizontal bar chart of regional populations, with a customized axis that formats large numbers (e.g., converting billions to a compact "B" suffix) and removes default axis domain lines. It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, along with the `format` API for tick labels. Data is loaded from a CSV via `d3.csv` and rendered as SVG rectangles. The chart also includes a titled label for the population axis and light-green bars.

HHadi Boukdir
84% 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
84% match
Loading thumbnail…

Customizing axes

This example shows how to customize axes in a bar chart of country populations, formatting tick labels to abbreviate billions as "B" and removing axis domain lines for a cleaner look. A vertical band scale positions countries, while a linear scale maps population values to bar widths. The code uses d3.csv to load data, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, with SVG rendering and CSS styling for tick colors and font sizes.

Aakshayms0
83% match
Loading thumbnail…

Customizing Axis

This example displays a horizontal bar chart of the top ten most populous countries, using a custom logarithmic-like axis that converts large numbers into abbreviated forms like "1.41B." The SVG visualization is built with D3 v5, using `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the population x-axis. It loads data from a CSV via `d3.csv`, and customizes both axes by removing default domain lines and applying a tick format that replaces "G" with "B" for billions. The chart includes labeled axes and a title.

Bbambaleq
83% match