I'm Learning D3

100%

I'm Learning D3

✓ Published0🌍 Public

Last edited Nov 16, 2019

Created on Nov 16, 2019

Forked from Untitled

This bar chart visualizes the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects 2017. The visualization employs d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, with d3.axisLeft and d3.axisBottom to display axes. Population data is loaded from a CSV file using d3.csv, and rectangles are bound to the data to render the bar heights and widths. The chart demonstrates customized D3 v4 axes alongside basic SVG rendering.

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…

d3 js

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects 2017. It shows a horizontal bar for each country, with the population value scaled linearly along the x-axis. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the axes, while customizing tick formats to abbreviate large numbers and removing axis domain lines. Bars are rendered as SVG rectangles, with data loaded from a local CSV file. The code also demonstrates styling through an external CSS file.

Jjhansi

91% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 most populous countries in 2018, using population estimates from the United Nations World Population Prospects 2017. It shows how d3.csv loads the data and d3.scaleLinear and d3.scaleBand map populations to bar widths and countries to vertical positions. The SVG rendering draws rectangles with cyan fills, while D3 axes are customized to demonstrate formatting. The code also uses d3.max to set the scale domain and d3.select to append elements.

Rrishyossarian

90% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects 2017. It demonstrates customized D3 v5 axes and a linear scale for population values, with a band scale for country names. The code imports specific APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, and formats tick labels using `format('.3s')`. Data is loaded from a CSV file and rendered as SVG rectangles with a steelblue fill.

Zzilvus

90% match

Loading thumbnail…

Bar Chart D3

This bar chart displays the populations of the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects estimate. The visualization demonstrates customized axes, employing d3.scaleLinear for the population values and d3.scaleBand for country categories, with d3.axisBottom and d3.axisLeft for tick marks. Rectangles render the bars in SVG, with population numbers formatted using d3.format and scaled to thousands. The chart also removes axis domains and tick lines, and appends custom labels for the title and x-axis.

SSophia Cofone

90% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 most populous countries in 2018, using population estimates from the United Nations World Population Prospects 2017. It renders horizontal bars with D3 v5’s `scaleBand` for the y-axis and `scaleLinear` for the x-axis, using `axisLeft` and `axisBottom` for ticks. The data is loaded from a CSV via `d3.csv`, with population values multiplied by 1000. The SVG output uses `g.selectAll('rect')` to draw each bar, styled with a steelblue fill.

IIyke2909

90% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. Built with D3 v5, it renders SVG bars using `scaleLinear` for the x-axis and `scaleBand` for the y-axis. The axes are customized via `axisBottom` and `axisLeft`, with a group element applying margins for layout. Data is loaded from a CSV file, with population values converted to numbers before rendering.

AAdrianTNare

90% match

Loading thumbnail…

Making a bar chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects 2017. It uses D3 v5 to load the data via `d3.csv` and renders bars as SVG rectangles. The visualization demonstrates customized axes, including a formatted x-axis that abbreviates large numbers and removes gridlines, while the y-axis hides its line and tick marks. The chart also annotates its title and axis label directly within the SVG.

SSimon Pettersson

90% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries using 2018 data from the United Nations World Population Prospects. The chart uses D3 v5 with SVG rendering, employing `scaleLinear` and `scaleBand` for positioning, and customizes the axes with `axisLeft` and `axisBottom`. Population values are loaded from a CSV file and formatted with a custom tick format that abbreviates large numbers. The visualization also includes axis labels and a title, with gridlines created through the x-axis tick size.

PPhilippe Rigovanov

90% match