Fork of Fork of Customizing Axes

100%

Fork of Fork of Customizing Axes

✓ Published0🌍 Public

Last edited Nov 25, 2021

Created on Nov 24, 2021

This bar chart displays suicide counts by country, sourced from a United Nations dataset covering multiple years and demographics. The visualization highlights the top 10 most populous countries, with horizontal bars representing suicides_no values. Built with D3 v5, the code uses `scaleLinear` and `scaleBand` for positioning, `axisBottom` and `axisLeft` for customized axes, and `format('.2s')` for tick labels. SVG rendering applies custom styling to ticks, grid lines, and labels, with axis customization removing default domain lines.

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…

Fork of Fork of Making a Bar Chart

This bar chart displays suicide numbers across countries for specific years, with horizontal bars ordered by count magnitude. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for categorical country labels on the y-axis. Data is loaded from a CSV file using `d3.csv`, with the `suicides_no` field converted to numeric values. The chart includes axis labels and a title, while the dataset originates from the United Nations World Population Prospects 2017 estimates.

Jjerry691

90% match

Loading thumbnail…

Customizing Axes

This bar chart displays suicide counts by country, using data from 1979 to 2014 for Canada, France, and Germany. It customizes the D3 v5 axes by applying a linear scale to the quantitative x-axis and a band scale to the categorical y-axis. The code uses `axisBottom` and `axisLeft` to generate ticks, removes default domains and tick lines, and adds grid lines via `tickSize`. The x-axis labels use the `format` function for compact number display.

Wwishcsdev

86% match

Loading thumbnail…

Fork of Customizing Axes

This horizontal bar chart displays the population of the top 10 most populous countries using 2018 UN estimates. Written with D3 v5, the visualization uses `scaleLinear` for the x-axis and `scaleBand` for categorical y-axis placement of each country. The chart customizes axes by removing default domain lines and tick marks, adding gridlines via negative tick sizes, and styling labels with large fonts. The SVG rendering includes a title and an axis label, with data loaded from a local CSV file.

KKinjal-Goyani

85% match

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the population of the top 10 most populous countries, with data from the 2018 United Nations World Population Prospects estimate, multiplied by 1000 for actual figures. It demonstrates custom axis styling using D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with tick labels formatted via `format('.3s')` and gridlines styled through CSS. SVG rendering shows horizontal bars with tick marks and labels, while title and axis labels use custom font sizes and colors.

AApril Fangzhu Guo

85% match

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries, with population values sourced from the United Nations World Population Prospects 2017. It demonstrates D3 axis customization, using `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` to render formatted tick labels. The SVG chart is styled via CSS, with grid lines and custom fonts. Data is loaded from a CSV file and scaled by 1000.

SSadafNaseem

85% match

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, based on 2018 United Nations estimates, with values scaled from thousands to millions. It highlights customized axes using D3 v5 APIs such as `scaleLinear` and `scaleBand`, while `axisBottom` and `axisLeft` generate tick marks. The chart removes default axis lines, applies tick formatting via `format('.3s')`, and renders SVG rectangles with steel-blue fills and styled text elements.

Aadriana-ss

85% match

Loading thumbnail…

Fork of Customizing Axes

This bar chart visualizes the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. Horizontal bars represent each country’s population, with a custom-styled axis and a labeled title. Built with D3 v5, the code uses `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom` with a tick formatter that converts values to billions. The SVG rendering applies custom fonts, gridlines, and axis labels via CSS.

CCharlie Smith

85% match

Loading thumbnail…

Suicide prevention bar chart

This bar chart displays the highest suicide counts per country from 1985 to 2016, using a horizontal bar layout where bar length encodes the number of suicides and country names label the y-axis. The visualization uses D3 v5 with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG graphic. Data comes from a CSV file containing country, year, sex, age, and suicide counts, aggregated to show total suicides per country. The chart includes axis titles and a title text, with bars rendered in slateblue.

Mmnalk

85% match