Skip to main content
SimilarExport ZIP
100%

09 - customizing axes - dataviz 2018

✓ Published1🌍 Public
Zzach b.
Last edited Nov 16, 2021
Created on Nov 16, 2021

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The chart uses D3 v7’s `scaleLinear` and `scaleBand` for axes, with a customized `axisBottom` that formats tick labels (e.g., converting G to B) and removes domain lines. Left axis labels are simplified by deleting ticks. The SVG rendering includes a title and axis labels, with styling applied via CSS classes.

AI-generated description

datraviz 2018 #9 - bar chart 1, csv file

-- 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.

MIT Licensed

Similar vizzes

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 visualization highlights customized axes, with D3’s `axisBottom` and `axisLeft` used to render tick marks and labels, while `scaleLinear` and `scaleBand` map population and country values. Tick labels are formatted with `format('.3s')` to abbreviate numbers, replacing 'G' with 'B' for billions. The SVG chart removes default axis domains and lines, adds an axis label, and styles text and rectangles via CSS.

NNirjan Khadka
94% 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 focuses on customizing D3 axes, removing default domain lines and adding custom tick styling, axis labels, and a title. It uses `d3.scaleLinear` for the population axis and `d3.scaleBand` for countries, with `d3.axisBottom` and `d3.axisLeft` for rendering. The SVG output is styled via CSS, with tick lines in gray and large, muted text for readability.

Mmi-jjang
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 bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The axes are customized through D3’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs, with tick formatting converting values to billions. The bottom axis includes a label and the chart is rendered as SVG, with bars drawn as `rect` elements. The code removes default axis lines and ticks, and the visualization omits the left axis line for a cleaner design.

JJacob van Lingen
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 chart uses D3 v5's `scaleLinear` and `scaleBand` to map population values and country names, with customized `axisBottom` and `axisLeft` for tick formatting and styling. The SVG rendering includes styled grid lines, a title, and an axis label, demonstrating how to tailor axes for improved readability.

SSajib Khan
94% 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 chart customizes its axes by removing default domain lines and tick marks, applying a custom tick format that abbreviates large numbers (e.g., converting billions to "B"), and adding descriptive axis labels. Built with d3.v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG, with data loaded from a CSV file.

Ddtdenver
94% 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. It demonstrates customization of D3 axes, including removal of default domain lines, custom tick formatting with `format('.3s')`, and grid lines created via `tickSize`. The visualization uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with SVG rendering. Labels for the title and axis are added as text elements.

Ssophburke
93% 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 visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to customize axis ticks, formats, and grid lines. Population values are formatted in abbreviated units (e.g., billions) via `d3.format`. The SVG rendering highlights styling of tick labels, axis labels, and the chart title.

Ccharliemok
93% match