Charts for Fun

100%

Charts for Fun

✓ Published3🌍 Public

BBrenda199708

Last edited Apr 5, 2020

Created on Apr 5, 2020

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.

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 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

94% match

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

92% match

Loading thumbnail…

Charts for Fun

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.

Aala-wahibi

91% 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

88% match

Loading thumbnail…

Scatterplot

This bar chart displays the top 10 most populous countries based on 2018 UN estimates. It uses d3.scaleLinear and d3.scaleBand to map population values and country names, with rectangles rendered in SVG. The code imports specific functions from d3.v5 including csv, axisLeft, axisBottom, and format, and applies tick formatting to abbreviate large numbers. Axes are customized with removed domain lines, colored tick labels, and an x-axis label, while data is loaded from a CSV file and multiplied by 1000 to represent actual population figures.

Ttayyabanisar

88% 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

87% 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

87% 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. The visualization uses D3 v5 scales, axes, and SVG rendering, with a linear scale for population and a band scale for countries. The code imports specific D3 functions including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, and customizes the x-axis tick format using the `format` helper to abbreviate numbers with suffixes. Data is loaded from a local CSV file, and the chart includes a title and axis label.

KKelsey Law

87% match