Skip to main content
SimilarExport ZIP
100%

Charts for Fun

✓ Published0🌍 Public
BBrenda199708
Last edited Apr 5, 2020
Created on Apr 5, 2020
Forked from 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.

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

Making a Bar Chart

This bar chart displays the population of the top 10 most populated countries, based on 2018 estimates from the United Nation’s World Population Prospects 2019. It uses D3 v5 with SVG rendering, employing `d3.csv` to load data, `scaleLinear` and `scaleBand` for positioning, and `axisLeft` and `axisBottom` for axes. Population values are converted from thousands to absolute numbers before plotting, with red bars showing relative magnitudes.

RRajab Ssemwogerere
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. 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
87% match
Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, using data from the 2017 United Nations World Population Prospects. The code uses D3 v5 to create an SVG visualization with circles positioned by d3.scaleLinear for population and d3.scalePoint for country names. Axes are customized with d3.axisBottom and d3.axisLeft, including tick formatting that converts values to billions. The chart includes axis labels and a title, with styling applied through external CSS.

Hhberrong
87% match
Loading thumbnail…

Making a Bar Chart

This example presents a horizontal bar chart showing 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's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs to map population values and country names to SVG rectangles. Data is loaded from a CSV file and processed by multiplying the population values by 1000. The chart renders entirely as SVG, with bars styled in steelblue, and the code illustrates a basic data-join and margin setup for reusable visualization.

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