harshitveda

@harshitveda·3 public vizzes

Customizing Axes

This visualization displays a bar chart of the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. The chart demonstrates customized D3 axes, including rotated tick labels and styled tick lines. It uses D3 v5’s `scaleBand` for the categorical country axis and `scaleLinear` for the population axis, with `axisBottom` and `axisLeft` to render the axes. The bars are SVG rectangles, and the layout applies margins with explicit positioning for the axis labels and title.

Jan 19, 2020

Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries using 2018 United Nations population estimates, with customized axes. It builds on a basic bar chart by applying D3’s `axisBottom` with a tick format that abbreviates large numbers (e.g., converting billions to “B”) and removing default axis domain lines. The left axis uses `axisLeft` with its domain and tick lines stripped. The visualization uses `d3.scaleLinear` and `d3.scaleBand` for scales, with SVG rendering, and includes styled axis labels and a title via CSS.

Jan 18, 2020

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 demonstrates customizing D3 axes: the y-axis has its domain line and tick lines removed, while the x-axis uses a tick format function to abbreviate large numbers and adds a custom axis label. The chart uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`. Population values are multiplied by 1000, and bars are rendered as SVG rectangles with steelblue fill.

Jan 18, 2020