Skip to main content
SimilarExport ZIP
100%

Custominzing Axes

✓ Published1🌍 Public
RRubens
Last edited Sep 6, 2018
Created on Sep 6, 2018
Forked from Customizing Axes

This bar chart displays the population of the top 10 most populous countries in 2018, based on United Nations data. It uses a linear x-scale for population and a banded y-scale for country names. The code employs D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs to render axes, with tick labels formatted using `format(".3s")` and a custom replacement of 'G' with 'B' for billions. Grid lines are drawn via `tickSize(-innerHeight)`, and the chart is rendered as SVG.

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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This bar chart shows the populations of the top 10 most populous countries in 2018, sourced from the United Nations World Population Prospects. The horizontal bars are ordered by country name, with a linear x-axis and a banded y-axis. The code uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to draw axes, while custom tick formatting converts large numbers into abbreviated units like “B” for billions. The x-axis gridlines extend across the chart via negative tick sizes, and the axis labels and title are styled with CSS.

Jjunge870214
95% match
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 United Nations estimates. The visualization emphasizes customized axes: the y-axis removes its domain and tick lines, while the x-axis uses a formatted tick label that converts large numbers into abbreviated values like "1.42B" and draws gridlines across the chart. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and the `format` function. The chart is rendered as SVG, with data loaded from a CSV file and scaled by thousands.

Jjulieducasse
94% match
Loading thumbnail…

Customizing Axes

This bar chart shows the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization highlights customized D3 axes, including a horizontal axis formatted with abbreviated numbers (using `d3.format` to convert millions and billions) and a vertical axis with large tick labels. Using D3 v5, the code employs `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, while rendering as SVG. Grid lines extend across the chart, and the axis labels and title are styled via CSS for clarity.

MMartin Lauf
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 uses D3’s `scaleLinear` for the x-axis population scale and `scaleBand` for the categorical y-axis, with customized `axisBottom` and `axisLeft` components. It removes default axis lines and ticks, applies a custom tick format (e.g., converting 'G' to 'B' for billions), and adds axis labels and a title. The SVG rendering includes grid lines via `tickSize` and styling from CSS classes.

VVyom Raj
94% match
Loading thumbnail…

Customizing Axes

This visualization displays the top 10 most populous countries using a horizontal bar chart, based on 2018 United Nations population estimates. The chart shows customized axes, with the y-axis stripped of its line and ticks, and the x-axis using abbreviated population labels like “1.42B” via `d3.format`. Built with D3 v5, it uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft`, rendered as SVG. Gridlines extend from the x-axis ticks, and axis labels and a title are added manually.

NncjB
94% match
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations estimates, with population values scaled in thousands. It demonstrates customized D3 axes: the y-axis removes all tick lines and domain, while the x-axis uses a custom tick format that abbreviates large numbers with suffix letters (e.g., converting 'G' to 'B' for billions). The chart is built using D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, rendering as SVG.

LLittledevil7
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