Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published0🌍 Public
Ssppcmccoy
Last edited May 7, 2019
Created on May 7, 2019
Forked from Customizing Axes

This bar chart shows the top 10 highest income tax states, using population values as a proxy for tax-percent of income, with data from the 2018 United Nations World Population Prospects estimate. The visualization emphasizes customization of D3 axes: a linear x-axis formats tick labels using `format('.3s')` to abbreviate numbers like billions, and the y-axis removes its domain and tick lines for a cleaner look. The code uses `d3.scaleLinear`, `d3.scaleBand`, `axisBottom`, and `axisLeft` within an SVG rendered via D3 v5, pulling data from a local CSV file.

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 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
86% 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 demonstrates customized D3 axes: the y-axis uses an `axisLeft` with a band scale for country names, while the x-axis uses `axisBottom` with a linear scale and a custom tick format that converts large numbers to abbreviations (e.g., G to B). The `d3.scaleBand` and `d3.scaleLinear` APIs handle positioning, and `d3.csv` loads the data. The SVG render uses `d3.select` and `d3.max` to compute the domain.

CCodeHandLuke
85% 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 builds on a basic bar chart by customizing the axes: the y-axis labels are kept while the domain and tick lines are removed, and the x-axis uses a linear scale with a custom tick format function, though currently it renders raw numbers. The chart employs `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft`, with an SVG rendering, and includes styled tick text, axis labels, and a title via CSS.

TTolldvis
85% 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 builds on a basic bar chart by customizing the axes: the y-axis labels are kept while the domain and tick lines are removed, and the x-axis uses a linear scale with a custom tick format function, though currently it renders raw numbers. The chart employs `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft`, with an SVG rendering, and includes styled tick text, axis labels, and a title via CSS.

TTolldvis
85% match
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects. It demonstrates customized D3 axes: the y-axis removes its domain and tick lines, while the x-axis uses a custom tick format that converts values like "1.42G" to "1.42B" and includes a label. The chart is rendered as SVG with D3 v5, using `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`.

Jjnpatel
85% match
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects, with population values multiplied by 1,000 from the CSV data. The visualization demonstrates customized D3 v5 axes: a linear x-axis uses a tick formatter to abbreviate numbers (replacing ’G’ with ’B’) and includes an axis label, while the band y-axis removes its domain and tick lines for a cleaner look. The code relies on `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format` from D3, rendering to SVG with margins, a title, and grid lines via negative tick sizes.

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

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. It demonstrates customization of D3 axes by removing default axis lines, styling tick marks, and applying a custom tick format that converts values to abbreviated numbers with 'B' for billions. The visualization uses D3's `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs, with SVG rendering. Population data is read from a CSV file, multiplied by 1000, and mapped to bar widths.

PPezanne Khambatta
85% match