Charts for Fun

100%

Charts for Fun

✓ Published3🌍 Public

Last edited Mar 5, 2020

Created on Mar 3, 2020

This visualization presents the top 10 most populous countries using both a bar chart and a scatter plot, with population data from the United Nations World Population Prospects 2017 estimate. The bar chart displays population values as horizontal bars, while the scatter plot represents each country as a circle positioned along the same axes. Both charts use D3 v5’s `scaleLinear`, `scaleBand`, and `scalePoint` for scaling, with customized axes via `axisLeft` and `axisBottom`. The data is loaded from a CSV file, and population values are multiplied by 1000 during processing to reflect the original units.

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…

Charts for Fun

This visualization presents two side-by-side charts of the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. A bar chart and a scatter plot both use d3.scaleBand and d3.scaleLinear to map country names and population values. The charts feature customized axes with d3.axisLeft and d3.axisBottom, including tick formatting that converts large numbers to abbreviated forms. Both SVG charts share the same margin, title, and axis label styling, with circles and rectangles rendered in steelblue.

Ssabariah

95% match

Loading thumbnail…

Charts for Fun

This example displays the top 10 most populous countries as both a bar chart and a scatter plot, using 2018 population estimates from the United Nations. Both visualizations share the same title and x-axis label, though the data shown is actually Basel temperature values loaded from an external CSV. The code uses D3 v5 APIs including `scaleBand`, `scalePoint`, `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG charts with customized tick formatting and grid lines. Each chart applies opacity to its red marks, and bars and circles are sized according to the numeric temperature values.

BBrenda199708

91% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the populations of the top 10 most populous countries, using data from the United Nations 2018 estimates. The chart initially appears as a bar chart but renders the data points as SVG circles, with the y-axis listing country names and the x-axis scaled linearly to population values. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the chart, while customizing axis labels and removing tick lines for a cleaner presentation. The data is loaded from a local CSV file.

Yylzami40

91% match

Loading thumbnail…

Charts for Fun

This example presents a data visualization with a bar chart and scatter plot, both using red semi-transparent shapes, that render population data from the United Nations World Population Prospects 2017. The bar chart displays the top 10 most populous countries, while the scatter plot appears to plot timestamp and Basel temperature data, though the title refers to population. The code uses D3 v5 APIs including `scaleBand`, `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `format` to customize axes and tick labels, rendering to SVG elements with a margin-based layout.

BBrenda199708

90% match

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, using a bar chart layout with a linear scale for population and a band scale for country names. The data comes from the 2018 United Nations World Population Prospects. Built with D3 v5 and SVG rendering, the code uses d3.csv, scaleLinear, scaleBand, axisBottom, and axisLeft, with custom tick formatting that converts billions to a readable format and gridlines for the y-axis.

Mmallikgarjuna

90% match

Loading thumbnail…

Making a Scatter Plot

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It shows population values as horizontal bars ordered by country name, with a formatted x-axis using d3.axisBottom and d3.format. The visualization incorporates d3.scaleBand and d3.scaleLinear for positioning, while custom axis labels and a title are added via SVG text elements.

YYongbobloomington

90% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the top 10 most populous countries using 2018 population estimates from the United Nations. The chart orders countries vertically with horizontal bars representing population size, styled as scatter points. Built with D3 v5, it uses `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and custom axes with tick formatting that converts units to billions. The SVG rendering includes styled axis lines, labels, and a title, with data loaded from a CSV file.

Yylzami40

90% match

Loading thumbnail…

Scatterplot

This scatterplot displays the top 10 most populous countries in 2018, based on data from the United Nations World Population Prospects, with country names on the y-axis and population along the x-axis. Each bar’s length is proportional to the population value, formatted in billions using d3.format. The visualization uses d3.csv to load data, d3.scaleLinear for the x-axis with a custom tick format, d3.scaleBand for the y-axis, and d3.axisLeft and d3.axisBottom to generate axes with grid lines. The chart is rendered as an SVG with a title and axis label, and bars are styled with a steelblue fill.

RRenato Francia Castillo

90% match