Skip to main content
SimilarExport ZIP
100%

Charts for Fun

✓ Published0🌍 Public
Ssabariah
Last edited Mar 4, 2020
Created on Mar 4, 2020
Forked from 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.

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 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
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
92% match
Loading thumbnail…

Bar Charts

This bar chart visualizes the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. The chart displays population counts per country with a horizontal bar layout, using a linear scale for the x-axis and a band scale for the y-axis to position country names. The visualization is rendered as SVG using D3 v5, with custom axis formatting that abbreviates population numbers and uses scaleLinear, scaleBand, axisLeft, and axisBottom APIs. The code also demonstrates axis customization by removing domain lines and adding axis labels and a title.

Eexcalibur1987
91% match
Loading thumbnail…

Bar Charts

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The bars are rendered in SVG with a steelblue fill, while D3’s axis generator provides customized tick labels and lines in muted grays. The chart uses `d3.csv` to load the data and `d3.scaleBand` and `d3.scaleLinear` for positioning and scaling. An axis label and a title are added as text elements, with font sizes and colors styled via CSS.

Tthebeef5
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
91% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects 2017. It uses d3.scaleLinear and d3.scaleBand to map population values and country names, with d3.axisBottom and d3.axisLeft for the axes. The chart customizes tick formatting using d3.format to abbreviate numbers, replacing 'G' with 'B' for billions. Data is loaded from a CSV file via d3.csv, rendered as SVG rectangles with a steelblue fill.

DDaniel Frey
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 population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with an SVG rendering, featuring a linear scale for population values and a band scale for country names. Customized axes include formatted tick labels that convert units to billions and a horizontal grid. The chart applies a steelblue fill to bars and includes a title and axis label.

KKevinw97
90% match