Skip to main content
SimilarExport ZIP
100%

Making a Bar Chart

✓ Published1🌍 Public
CChooo4u
Last edited Oct 31, 2018
Created on Sep 8, 2018
Forked from Making a Bar Chart

This example visualizes the top 10 best-selling video games by sales, using a horizontal bar chart. The chart encodes each game’s title on the y-axis and its sales figure on the x-axis, with the data sourced from a CSV file containing 2018 United Nations population estimates. It uses D3 v5 APIs including `scaleLinear` and `scaleBand` for scales, `axisLeft` and `axisBottom` for axes, and SVG `rect` elements for the bars. The code imports functions via ES modules and renders the chart by appending elements to an SVG.

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.

MIT Licensed

Similar vizzes

Loading thumbnail…

The Best-selling Video Games of All Time

This bar chart displays the top 10 best-selling video games of all time, ranked by total units sold, with sales figures from Wikipedia’s list of best-selling games. The visualization uses D3 v5’s `scaleLinear` for the sales axis and `scaleBand` for the game titles, rendering bars as pink SVG rectangles. The code loads data via `csv()` from `data.csv`, multiplies each sales value by 1000 for readability, and applies `axisLeft` and `axisBottom` to generate the axes.

CChooo4u
85% match
Loading thumbnail…

Video game Sales Global Bar Chart

This bar chart visualizes the top 10 best-selling video games globally, ranked by total sales in millions of dollars. It uses d3.csv to load the vgsales.csv dataset, then computes the top 10 entries using d3.maxIndex on the Global_Sales field. The chart renders with SVG rectangles positioned via d3.scaleBand and d3.scaleLinear, and includes axes using d3.axisBottom and d3.axisLeft with custom tick formatting. Tooltips are added via SVG title elements, and the y-axis labels are formatted using d3.format.

JJustin Chan
85% match
Loading thumbnail…

Bar Chart of Top Video Game Sales

This bar chart displays the top 20 video games by global sales in millions, ranking them from highest to lowest. It uses d3.scaleLinear for the x-axis (sales) and d3.scaleBand for the y-axis (game names), with axes rendered via d3.axisLeft and d3.axisBottom. Data is loaded from a CSV file using d3.csv, and the chart is drawn as SVG rectangles. The code formats sales ticks with d3.format and labels the chart with a title and x-axis caption.

TT-Reiser
84% match
Loading thumbnail…

The Best-selling Video Games of All Time

This horizontal bar chart displays the top ten best-selling video games by total sales, with Tetris and Minecraft leading in copies sold. Built with D3 v5, the visualization uses `scaleLinear` and `scaleBand` to map sales values and game titles, while `axisLeft` and `axisBottom` render the axes. SVG rectangles encode the data, and the axis tick labels are formatted with D3’s `format` function to abbreviate large numbers. Data comes from a CSV file listing sales figures sourced from Wikipedia.

CChooo4u
82% match
Loading thumbnail…

The Best-selling Video Games of All Time

This horizontal bar chart displays the top ten best-selling video games by total sales, with Tetris and Minecraft leading in copies sold. Built with D3 v5, the visualization uses `scaleLinear` and `scaleBand` to map sales values and game titles, while `axisLeft` and `axisBottom` render the axes. SVG rectangles encode the data, and the axis tick labels are formatted with D3’s `format` function to abbreviate large numbers. Data comes from a CSV file listing sales figures sourced from Wikipedia.

CChooo4u
82% match
Loading thumbnail…

D3 Bar chart

This bar chart displays global sales figures for top-rated video games in 2016, with each game’s name on the x-axis and sales in millions on the y-axis. The D3.js code uses d3.csv to load the data, then maps it to a d3.scaleBand for the x-axis and a d3.scaleLinear for the y-axis. Rectangular SVG elements are colored steelblue, and d3.axisBottom and d3.axisLeft generate the labeled axes. A rotated text element labels the y-axis. The chart renders entirely as inline SVG within an HTML page.

KKwasi Acquaye
82% match
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart for the top 10 most populous countries, using population estimates from the 2018 United Nations World Population Prospects. It renders as an SVG, with bars drawn as rectangles whose lengths encode population values. The code uses D3 v3 APIs such as `d3.csv` to load the data, `d3.scale.linear()` and `d3.scale.ordinal()` for the axes, and `d3.svg.axis()` to draw them. A dropdown menu lets users select a cereal brand, triggering an animated transition that updates the bar heights and rescales the y-axis domain.

Vvasukipriyam
81% match
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart for the top 10 most populous countries, using population estimates from the 2018 United Nations World Population Prospects. It renders as an SVG, with bars drawn as rectangles whose lengths encode population values. The code uses D3 v3 APIs such as `d3.csv` to load the data, `d3.scale.linear()` and `d3.scale.ordinal()` for the axes, and `d3.svg.axis()` to draw them. A dropdown menu lets users select a cereal brand, triggering an animated transition that updates the bar heights and rescales the y-axis domain.

Vvasukipriyam
81% match