Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published0🌍 Public
DDaniel Weston
Last edited Jul 12, 2019
Created on Jul 12, 2019
Forked from Making a Bar Chart

The chart displays a horizontal bar chart of country populations, sorted by size, with a customized axis layout. D3 v5 APIs `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` position the bars, while `format` abbreviates tick labels (e.g., "400K"). The y-axis removes its domain and ticks, and the x-axis uses negative tick lines to create a grid. Data loads from `data.csv`, with population values multiplied by 1,000 before rendering in SVG.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the population of ten countries, sorted by size, using D3 v5. The chart customizes axes by removing domain lines and tick lines, and formats population labels with the `format('.3s')` API, converting billions to "B". Data loads from a CSV file with `d3.csv`. The bars use a linear scale, with a labeled axis and title rendered as SVG text.

Ccyro666
93% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the top 10 most populous countries, with population values scaled by 1,000 and formatted in billions. D3 v5’s `scaleLinear` and `scaleBand` position bars, while `axisLeft` and `axisBottom` render axes with custom tick formatting via `format('.3s')`. The SVG chart removes default axis lines and domain strokes, styling ticks and labels through CSS. Data loads from a CSV file using `csv`, and margins define the plotting area.

Ttmangeard
92% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of national populations, with country names on the y-axis and population counts on the x-axis. The chart uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct a clean, margin-based SVG layout. Population values from the CSV are parsed and multiplied by 1000, and bars are rendered as `rect` elements with a steelblue fill.

AAnthony Lee
92% 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
92% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart shows the population of the ten most populous countries, ordered from largest to smallest. The example customizes D3 axes by removing default domain lines and tick marks on the y-axis, adding grid lines with negative tick sizes on the x-axis, and formatting population labels with a custom tick formatter that converts billions to "B". It uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, d3.axisBottom, and d3.format, rendering population values multiplied by 1,000 as SVG rectangles filled with steelblue.

11995ana
92% 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
92% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the population of the ten most populous countries, using CSV data loaded with `d3.csv`. The chart customizes its axes with `d3.axisBottom` and `d3.axisLeft`, applying a `d3.format` tick formatter that converts values from G to B. `d3.scaleLinear` and `d3.scaleBand` position the bars, while gridlines are created by extending x-axis ticks with a negative tick size. The y-axis’s domain and tick lines are removed for a cleaner look.

1123fischer
91% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays population counts for ten countries, with countries listed along the y-axis and population values along the x-axis. The visualization uses D3 v5's `scaleLinear` for the population axis and `scaleBand` for the categorical country axis, with axes rendered via `axisLeft` and `axisBottom`. Data is loaded from a CSV file using `csv`, with population values multiplied by 1000 before rendering. The chart is drawn as blue SVG rectangles, positioned using the band scale's bandwidth and the linear scale's width mapping.

LLonwabo11
91% match