Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published0🌍 Public
Kkesmith21
Last edited Nov 29, 2020
Created on Nov 29, 2020
Forked from Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries, using 2018 population estimates from the United Nations World Population Prospects. It demonstrates customized D3 axes by removing default domain lines, adding axis labels with large fonts, and applying tick formatting. The code uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, with SVG rendering. Axes are manually styled via CSS classes, and the x-axis ticks are sized to span the chart height.

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 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
97% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of population for the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It demonstrates how to customize D3 axes by removing domain lines, adjusting tick sizes and formats (using d3.format to abbreviate large numbers), and adding axis labels. The visualization uses D3 v5 with d3.scaleBand and d3.scaleLinear for scales, and d3.axisLeft and d3.axisBottom for rendering axes as SVG elements, with custom styling applied via CSS.

Jjacobs-splunk
97% 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
97% 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
97% match
Loading thumbnail…

Customizing Axes

This example presents a 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, including removing domain lines, styling tick marks, and adding axis labels in large fonts. The visualization uses d3.scaleLinear and d3.scaleBand for positioning, d3.axisLeft and d3.axisBottom for rendering, and d3.format to abbreviate population numbers (e.g., replacing “G” with “B”). Data is loaded via d3.csv and rendered as SVG rectangles.

BBirmanTAZ
97% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. The visualization highlights custom axis styling, removing default domain lines and tick lines on the y-axis while adding grid lines and a formatted x-axis that converts values from billions to a "B" suffix. The code uses D3.js v5, scaling data with `scaleLinear` and `scaleBand`, and configures axes via `axisBottom`, `axisLeft`, and `.tickFormat`. Custom fonts, colors, and labels are applied through CSS, with SVG rendering for the output.

Ttkreglhn
97% 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 2017, with data loaded via d3.csv. It shows how to customize D3 axes: the y-axis uses d3.axisLeft with its domain and tick lines removed, while the x-axis uses d3.axisBottom with a custom tick format that converts values from billions to a readable "B" suffix and extends tick lines across the chart. The code employs d3.scaleLinear and d3.scaleBand to map data to SVG rectangles, with styling for tick text, labels, and titles defined in CSS.

Ssunilkrishnav
97% match
Loading thumbnail…

Customizing Axes

This bar chart visualizes the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It demonstrates customizing D3 axes by removing domain lines, styling tick marks and labels, and adding a custom axis label. The code uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisBottom, and d3.axisLeft to render the SVG.

TTolldvis
97% match