Skip to main content
SimilarExport ZIP
100%

Costumizing Axes

✓ Published1🌍 Public
Ddanielchamone
Last edited Oct 30, 2019
Created on Oct 29, 2019
Forked from Making a Bar Chart

This chart displays the populations of the most populous countries as a horizontal bar chart, using a linear scale for population and a band scale for country names. D3’s `axisBottom` and `axisLeft` are customized, with tick formatting via `format(".3s")` converting values to billions, and grid lines shown through `tickSize(-innerHeight)`. The data is loaded from a CSV file using `csv`, and rectangles are drawn in SVG with `scaleLinear` and `scaleBand`. The chart also includes a title and an axis label.

AI-generated description

This is a population chart by country.

MIT Licensed

Similar vizzes

Loading thumbnail…

Costomizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries, with population values labeled in billions using a custom tick format that converts “G” to “B.” The chart strips default axis lines and gridlines, using only tick marks and labels, while adding axis and title text. The visualization is built with D3 v5, using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, and renders as SVG. Data is loaded from a CSV file via `d3.csv`, with population values scaled by 1,000.

PPourmahmood
91% match
Loading thumbnail…

Costumising axes

This example displays the top 10 most populous countries as a horizontal bar chart, with the x-axis showing population and the y-axis listing country names. The code uses d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft to construct the scales and axes, while applying a custom tick format that converts large numbers to abbreviated forms like "B". The chart removes default axis domains and tick lines, adds grid lines via tickSize, and renders an SVG with styled text labels. Data is loaded from a CSV file using d3.csv.

Bbencestubnya
89% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the populations of the ten most populous countries, sorted by size, using a logarithmic-free linear scale. The axes are customized with abbreviated tick labels (e.g., "1.4B") and colored gridlines, while the y-axis removes its domain line. Built with D3 v7, the example loads data from a CSV via `d3.csv`, uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, and formats ticks with `d3.format`.

PPenguin-jpg
89% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the populations of the ten most populous countries, with population values transformed from raw numbers into abbreviated labels like "1.42B" using d3.format. The chart uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis, with custom tick formatting and axis labels applied via d3.axisBottom and d3.axisLeft. Data comes from a CSV file, rendered as SVG rectangles with gridlines and a title, all styled through external CSS.

Rruubi0807@gmail.com
88% 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
88% match
Loading thumbnail…

Costumazing Axes

This bar chart displays the populations of the world’s ten most populous countries, based on 2018 United Nations estimates, with population values shown in thousands. The chart uses d3.scaleLinear and d3.scaleBand to map population and country names, while d3.axisBottom and d3.axisLeft generate the axes. The y-axis labels are cleaned by removing domain lines and ticks, and the x-axis tick labels are formatted with d3.format to abbreviate large numbers (e.g., converting “G” to “B”). The SVG rendering includes custom axis labels and a title, with the dataset loaded via d3.csv.

IIsmaelHernandezL
88% match
Loading thumbnail…

Customising Axes

A horizontal bar chart displays the ten most populous countries using data from a CSV file. Population values are formatted with D3's `format` shorthand, converting gigabytes to billions (e.g., "1.41B"). The chart uses `scaleLinear` for the x-axis and `scaleBand` for the y-axis. D3's `axisBottom` and `axisLeft` generate custom axes, with grid lines and tick styling, all rendered as SVG.

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