Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published1🌍 Public
Aantoniojl@gmail.com
Last edited Apr 19, 2022
Created on Apr 19, 2022
Forked from Making a Bar Chart

This example shows a horizontal bar chart ranking the top ten most populous countries using 2018 data from World Population Prospects 2017. D3.js v7 with SVG renders the bars, while `scaleLinear` and `scaleBand` position them, and `axisLeft` and `axisBottom` create the axes. The x-axis uses custom tick formatting via `format('.3s')` to display billions with a 'B' suffix, and grid lines are added through `tickSize`. The chart also removes axis domain lines and adds custom labels for clarity.

AI-generated description

This bar chart shows population of the top ten most populous countries. The data comes from the year 2018 estimate in [his bar chart shows population of the top ten most populous countries. The data comes from the year 2018 estimate in World Population Prospects 2017

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing axes d3

This example shows a horizontal bar chart ranking the ten most populous countries in 2018 by population. The chart uses D3.js v7's `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with bars rendered as SVG `rect` elements. The x-axis employs `tickFormat` with the `.3s` format specifier, converting values into compact notation and replacing 'G' with 'B' for billions. Grid lines extend across the plot via `tickSize(-innerHeight)`, while the y-axis labels omit their domain line. Data comes from the World Population Prospects 2017 dataset, loaded as CSV with populations multiplied by 1000.

JJuanmaBV
95% match
Loading thumbnail…

Customizing Axes

This example presents a horizontal bar chart ranking the top 10 most populous countries (from a 2018 UN World Population Prospects estimate) by their population. The visualization stands out through its custom axes: the y-axis strips away default domain lines and tick lines, while the x-axis uses a custom tick format (d3.format('.2s')) and extends grid lines across the plotting area. Built with d3.v5, the code uses `scaleLinear` and `scaleBand` to map data to coordinates, `axisLeft` and `axisBottom` to generate axes, and SVG for rendering, with extensive styling applied via CSS.

AAna
94% match
Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the top ten most populous countries, using 2018 estimates from the United Nations World Population Prospects. The D3 v6 code imports `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` to construct the visualization. It customizes the x-axis by using a formatter that converts large numbers to abbreviated units and replaces the default "G" suffix with "B". Axis grid lines extend across the chart, while the y-axis labels and domain lines are removed, and the chart is rendered as SVG.

Ddata-inside
94% 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
94% 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
94% match
Loading thumbnail…

Customizing Axes

This example visualizes the top 10 most populous countries using a horizontal bar chart, drawing on 2018 population estimates from World Population Prospects 2017. The chart uses d3.scaleLinear and d3.scaleBand scales, with d3.axisBottom and d3.axisLeft for custom axes. The y-axis ticks are stripped of domain lines, while the x-axis uses a tick format that converts billions to "B" via d3.format. Axis labels and a title are added as SVG text elements, with data loaded from a CSV file using d3.csv.

LLongYuu
94% match
Loading thumbnail…

Customizing Axes

This example presents a horizontal bar chart of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization highlights customized axes, including a band scale for country names on the y-axis and a linear scale for population on the x-axis. The code uses D3 v7 APIs such as `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, with the x-axis labels formatted using `format('.3s')` to abbreviate large numbers. SVG rendering is used to draw the bars, with a title and axis label included.

Yyejichun@naver.com
94% match
Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects. It visualizes population values with horizontal bars and customizes the axes: the y-axis labels are kept, while grid lines are removed, and the x-axis uses a `format('.3s')` tick formatter to abbreviate numbers (with 'G' replaced by 'B' for billions). Built with D3 v5, it uses `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom`, rendering SVG elements directly within a pre-sized `<svg>` container.

Eexcalibur1987
94% match