Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published2🌍 Public
Iianleekq
Last edited May 13, 2019
Created on Feb 13, 2019
Forked from Making a Bar Chart

This visualization shows the ten most populous countries as a horizontal bar chart, using population data from the UN. The bars are sorted by population, with China and India dominating the chart. The example focuses on customizing both the x-axis and y-axis: the x-axis uses a tick format function to abbreviate large numbers (e.g., converting billions to "B"), while the y-axis labels are styled with custom tick text. The chart is rendered with SVG, using D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs, with data loaded via `d3.csv`.

AI-generated description

This bar chart...UN.

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 United Nations population estimates, with China and India leading by a wide margin. The example focuses on customizing D3 axes, removing default domain lines and using tick lines as horizontal gridlines. It employs `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`, with custom tick formatting that converts billions to abbreviated labels. The SVG rendering includes styled tick text, an axis label, and a chart title, all defined through CSS classes.

SScubaman911
93% match
Loading thumbnail…

05_Customizing Axes

This visualization shows the top 10 most populous countries based on 2018 United Nations estimates, with China, India, and the United States leading. It builds on a basic bar chart by customizing d3.axisBottom with tick formatting that converts large numbers to abbreviated labels, turning G into B for billions. The chart removes default domain lines and tick marks from both axes, adds a rotated title, and includes explanatory axis labels. Data is loaded from a CSV file and rendered as SVG rectangles using d3.scaleLinear for the population scale and d3.scaleBand for the country categories.

LLuiz Domingues
92% match
Loading thumbnail…

05_Customizing Axes

This visualization shows the top 10 most populous countries based on 2018 United Nations estimates, with China, India, and the United States leading. It builds on a basic bar chart by customizing d3.axisBottom with tick formatting that converts large numbers to abbreviated labels, turning G into B for billions. The chart removes default domain lines and tick marks from both axes, adds a rotated title, and includes explanatory axis labels. Data is loaded from a CSV file and rendered as SVG rectangles using d3.scaleLinear for the population scale and d3.scaleBand for the country categories.

LLuiz Domingues
92% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the top ten most populous countries in 2018, with China and India leading by a significant margin. The visualization uses D3 v5 to load CSV data and render SVG elements, employing `scaleLinear` and `scaleBand` for positioning, and `axisLeft` and `axisBottom` for the axes. Custom tick formatting converts large numbers into abbreviated units (e.g., "B" for billions), while removed domain lines and styled gridlines highlight the data values.

Sslipperyd
91% match
Loading thumbnail…

Customizing Axes

This bar chart shows the ten most populous countries, ordered by population with a linear x-axis and a categorical y-axis. The visualization customizes both axes by removing their domain lines and tick marks, adding a text label for population, and formatting tick labels to abbreviate millions as “B”. Built with D3 v6, it loads data from a CSV, scales values by 1,000 for display, and uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG.

Iihatelearning
91% match
Loading thumbnail…

Customizing Axes

This example demonstrates a bar chart displaying the population of ten countries, including China and India, sorted by value, with customized axes. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map population counts and country names, while `axisBottom` and `axisLeft` render the axes. The x-axis applies a `tickFormat` with the `.3s` specifier to abbreviate large numbers. Data is loaded from a CSV file via `csv`, and the visualization is rendered as SVG rectangles with steelblue fills.

ZZY Huang
91% match
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It emphasizes customized axes: the y-axis removes domain and tick lines, while the x-axis uses a tick format that abbreviates large numbers (e.g., converting "G" to "B") and includes a custom label. The visualization uses d3.scaleLinear and d3.scaleBand, with d3.axisBottom and d3.axisLeft for rendering. Data is loaded via d3.csv and rendered as SVG rectangles.

VVineel Gannu
91% match
Loading thumbnail…

Customizing Axes

This example visualizes the ten most populous countries using a horizontal bar chart, ordered by population. The chart customizes both axes: the y-axis displays country names, while the x-axis formats population values in billions using `d3.format` and a custom tick function. The visualization uses `d3.csv` to load data, `d3.scaleLinear` and `d3.scaleBand` for scaling, and `d3.axisBottom` and `d3.axisLeft` for axes, with grid lines and styled tick marks.

FFahad Bin Emran
91% match