Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published1🌍 Public
LLonwabo11
Last edited May 10, 2019
Created on May 9, 2019
Forked from Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations data, with a particular focus on axis customization. The visualization demonstrates how D3’s `scaleBand` for the categorical x-axis and `scaleLinear` for the numeric y-axis are styled with custom tick text sizes, colors, and tick line strokes via CSS. It also includes labeled axes and a title, using the `axisBottom` and `axisLeft` API functions. The chart is rendered as SVG within an HTML page, and the code references external CSV data for the temperatures.

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 based on 2018 United Nations estimates. The visualization highlights D3 axis customization, including styled tick labels, grid lines, and a title. Built with D3 v5, it uses `scaleLinear` and `scaleBand` for scales, along with `axisLeft` and `axisBottom` for axes. Data from `data.csv` is loaded via D3’s `csv` function. The chart renders as SVG with animated bar transitions, demonstrating custom axis formatting and label styling.

Sstephanie liu
96% 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 highlights the customization of D3 axes, with styled tick marks, labels, and axis titles. The visualization uses D3’s `scaleBand` and `scaleLinear` for positioning, along with `axisLeft` and `axisBottom` for the axes. Data is loaded from a CSV file and rendered as SVG rectangles within an HTML canvas.

LLonwabo11
95% match
Loading thumbnail…

Customizing Axes

This horizontal bar chart displays the population of the top 10 most populous countries, based on 2018 United Nations estimates. It showcases D3 axis customization, including formatted tick labels that convert values to billions, custom tick sizes, and a labeled x-axis. The code uses `d3.csv`, `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and `format` from D3 v5, rendering an SVG with styled text and gridlines. The visualization is a refined follow-up to a basic bar chart tutorial.

Ssppcmccoy
94% match
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations estimates, using population values multiplied by 1000. The visualization emphasizes customized axes: the left axis removes domain and tick lines, while the bottom axis uses a tick format that converts gigabytes to billions. Built with D3 v5, it employs `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG chart, with styled tick text, axis labels, and a title defined in CSS.

EErichOh
94% match
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations estimates, using population values multiplied by 1000. The visualization emphasizes customized axes: the left axis removes domain and tick lines, while the bottom axis uses a tick format that converts gigabytes to billions. Built with D3 v5, it employs `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG chart, with styled tick text, axis labels, and a title defined in CSS.

EErichOh
94% 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. The visualization demonstrates axis customization using D3 v5, including custom tick formatting, axis labels, and styled tick lines through CSS. It builds on a simpler bar chart example, applying margin conventions and scale functions like `scaleLinear` and `scaleTime`. The SVG rendering uses `d3.csv` to load data and `axisLeft` and `axisBottom` for the axes.

LLonwabo11
94% match
Loading thumbnail…

Customizing Axes

This example shows a bar chart of the top 10 most populous countries using 2018 data from the United Nations, and it demonstrates how to customize D3 axes. The chart uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and d3.axisBottom with a custom tick format that converts billions to "B". The code removes axis domains and tick lines, applies custom styling via CSS, and appends axis labels and a title. Rendering is done with SVG via D3 v5.

Xxiaopangzi2333
94% match
Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries in 2018, based on United Nations data. It highlights customized D3 axes, including a formatted x-axis using `format('.3s')` to abbreviate population values and gridlines via `tickSize`. The y-axis removes its domain and tick lines for a cleaner look, while axis labels and a title are added using SVG text elements. The code uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to build the visualization.

Mmoonstorm86
94% match