Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published0🌍 Public
LLauShang
Last edited Nov 6, 2020
Created on Nov 6, 2020
Forked from Customizing Axes

This example shows a bar chart of the top 10 most populous countries using data from the United Nations World Population Prospects 2017, with population values from a CSV file. It demonstrates customization of D3 axes, including tick formatting with the `format` API to abbreviate numbers, removal of the domain and tick lines, and the addition of custom axis labels. The chart uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` within an SVG rendered via D3 v5, with styling applied through CSS.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries in 2018, using population estimates from the United Nations World Population Prospects 2017. The example shows how to customize axes with D3 v5, including tick formatting, axis labels, and grid lines. It uses `d3.csv`, `scaleLinear`, and `scaleBand` to map data, while `axisBottom` and `axisLeft` render the axes with custom tick formats converting values to abbreviated units. The SVG rendering removes default axis domains and applies styled tick lines via CSS.

Ttmrose
96% match
Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries, using 2018 population estimates from the United Nations World Population Prospects. The chart highlights custom axis formatting and styling, including a tick format that converts large numbers (e.g., G to B) and the removal of default axis lines. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position bars and axes within an SVG canvas. A CSV file supplies the data, and CSS styles the text and tick marks.

DDaniel Piqué
96% match
Loading thumbnail…

Customizing Axes

This bar chart shows the population of the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects estimate. It demonstrates how to customize D3 axes by using `d3.axisBottom` and `d3.axisLeft` to add grid lines, remove the domain, and format tick labels with `d3.format`. The chart also includes custom axis labels and a title, rendered as SVG with margins. Data is loaded from a CSV file via `d3.csv` and scaled with `d3.scaleLinear` and `d3.scaleBand`.

Mmi-desai
95% match
Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries using 2018 data from the United Nations World Population Prospects, presented as horizontal bars with population values on the x-axis. It demonstrates customized axes in D3.js: the x-axis uses a linear scale with tick labels formatted in abbreviated units (e.g., “B” for billions), while the y-axis is a band scale for country names, with grid lines and axis labels styled via CSS. The code uses d3.csv, scaleLinear, scaleBand, axisBottom, and axisLeft to render the SVG chart.

Uucsclk
95% match
Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries using 2018 data from the United Nations World Population Prospects, presented as horizontal bars with population values on the x-axis. It demonstrates customized axes in D3.js: the x-axis uses a linear scale with tick labels formatted in abbreviated units (e.g., “B” for billions), while the y-axis is a band scale for country names, with grid lines and axis labels styled via CSS. The code uses d3.csv, scaleLinear, scaleBand, axisBottom, and axisLeft to render the SVG chart.

Uucsclk
95% match
Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It shows how to customize D3 axes by formatting population values with d3.format, removing axis domains, adding grid lines via tickSize, and styling tick labels and the axis label. The chart uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scales, and d3.axisLeft and d3.axisBottom for rendering SVG axes.

SSukesh Kumar
95% match
Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries, with population values from the 2018 United Nations World Population Prospects estimate. It highlights D3 axis customization by removing default domain lines, adding tick lines across the chart, and formatting tick labels with `d3.format`. The visualization uses `d3.csv` to load data, `d3.scaleLinear` and `d3.scaleBand` for scales, and `d3.axisLeft` and `d3.axisBottom` for axes, rendering as SVG. A custom axis label and a chart title are appended manually.

Aandy-yc-lin
95% match
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The example demonstrates customizing D3 v5 axes, including removing axis domain lines and tick lines from the y-axis, formatting x-axis tick labels with the `format` function, and adding custom axis labels and a title. Data is loaded from a CSV file and rendered as SVG rect elements, with scales created using `scaleLinear` and `scaleBand`.

PPhilippe Rigovanov
95% match