qazwsxedcrfv12345

@qazwsxedcrfv12345·5 public vizzes

Customizing Axes

This bar chart displays the populations of the top 2 most populous cities, Shanghai and Beijing, using estimated data from the United Nations World Population Prospects 2017. The visualization highlights customized D3 axes: the y-axis uses a band scale with ticks stripped of lines and domain, while the x-axis uses a linear scale with tick formatting that abbreviates numbers (e.g., converting billions to "B"). The SVG renderer applies distinct styling to ticks, labels, and the chart title via CSS.

May 7, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries using 2018 United Nations estimates. The visualization demonstrates customizing D3 axes, including formatted tick labels that abbreviate large numbers and remove axis domain lines. Built with d3.scaleLinear and d3.scaleBand, it uses d3.axisBottom and d3.axisLeft to render the axes, while SVG text elements add axis labels and a title.

May 7, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects. It shows how D3 axes can be customized, including tick formatting that converts values to billions, tick lines that extend across the chart, and the removal of axis domains. The chart uses `d3.scaleLinear` and `d3.scaleBand` for scales, with axes created via `d3.axisBottom` and `d3.axisLeft`, and renders as SVG.

May 7, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the world’s ten most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It shows that the y-axis uses a band scale for country names, while the x-axis uses a linear scale for population values. The code customizes D3 axes by removing domain lines, adding gridlines, and formatting tick labels to abbreviate billions with a ‘B’. It uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` with SVG rendering.

May 7, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of billionaires Jeff Bezos and Bill Gates, using a horizontal bar layout with customized axes. The data is loaded from a CSV file and scaled with `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. It uses `d3.axisBottom` and `d3.axisLeft` to render ticks, with a custom `d3.format` function that converts values to abbreviated units. The chart removes default axis domain lines and adds custom labels and a title via SVG text elements.

May 7, 2019