Skip to main content
SimilarExport ZIP
100%

Bar Chart of the 10 Highest Skyscrapers in the World

✓ Published0🌍 Public
NNigel
Last edited May 14, 2023
Created on May 14, 2023

This bar chart displays the ten tallest skyscrapers worldwide, with building names on the x-axis and heights in meters on the y-axis. Each bar is labeled with its exact height. The visualization uses D3 v4's `d3.select`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` APIs to render an SVG with rectangles and text labels. The data is hardcoded in the script, listing structures like Burj Khalifa and Shanghai Tower.

AI-generated description

Stacked bar chart showing estimated religion breakdown.

Interactions:

  • Hover over the bars for tool tips.
  • Hover over the legend to highlight religions.

Based on an example from the tutorial Splitting Charts. Derived from the following examples published on bl.ocks.org:

Estimated 2010 religion breakdown of the most populous 20 countries.

Data is from The Global Religious Landscape by Pew Research, generated using this processing script.

TODO: Upgrade dependencies to latest D3 & friends.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart of the 10 Highest Skyscrapers in the World

This bar chart displays the heights of five of the world’s tallest skyscrapers, using the D3 v4 library to render SVG rectangles scaled along a band scale for the x-axis and a linear scale for the y-axis. Each tower’s height value appears as a text label offset within its corresponding bar. The data is hardcoded in the script. The visualization includes axis groups for reference, with a fixed viewport size of 900 by 500 pixels.

NNigel
95% match
Loading thumbnail…

Bar Chart of the 10 Highest Skyscrapers in the World

This bar chart displays the heights of the world’s ten tallest skyscrapers, such as the Burj Khalifa and Shanghai Tower, using a static SVG rendered with D3 version 7. The code creates scales with `d3.scaleBand` and `d3.scaleLinear`, then appends SVG `<rect>` elements for each bar. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, while mouseover and mouseout events change bar fill colors to red and black. The dataset is hardcoded in JavaScript, with heights in meters.

NNigel
93% match
Loading thumbnail…

Barchart of the 10 Highest Skyscrapers in the USA

This example displays a bar chart of the ten highest skyscrapers in the USA, with each bar labeled with its height in feet. Built with D3 v5, it uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, rendering bars as SVG rectangles within a group. The chart reads data from a static JavaScript array, applies a blue fill to the bars, and appends text labels above each bar. The code also relies on D3 selections to append an SVG container and a title to the page.

NNigel
84% match
Loading thumbnail…

Tallest Buildings in the World

This animated visualization compares the relative heights of five notable structures, from the Burj Khalifa to an average ten-story building, using circles scaled proportionally to each structure’s height in meters. Rendered on a black background with labeled white text, the circles animate in sequentially with a slow fade, while updates and exits use faster transitions. The code leverages D3’s `transition` and `easeLinear` APIs, along with `select` and data joins, to drive the animation. Data originates from Kaggle’s World Tallest Buildings dataset and Wikipedia’s Prudential Center page.

AAri Schechter
74% match
Loading thumbnail…

10 largest cities in the world

This bar chart displays the populations of the ten largest cities in the world in 2018, using data from World Atlas. The bars are sorted by country name, with population values formatted in billions using d3.format. Built with D3 v5, the visualization uses scaleLinear and scaleBand for axes, axisLeft and axisBottom for ticks, and SVG rendering. A horizontal gridline pattern is created via tickSize on the x-axis, while the chart’s title and axis label are added as SVG text elements.

Mmargaretgoode
73% match
Loading thumbnail…

Bar Chart

This bar chart displays the populations of the top 10 most populous countries, using horizontal bars ranked by descending population. The visualization uses D3 v6 with SVG rendering, employing `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` for the axes. Data is loaded from a CSV file and parsed with `csv`, with the chart drawn using `select` and `append` on the SVG container.

Sshikharpa
73% match
Loading thumbnail…

Making A Bar Chart!

This bar chart displays the populations of the ten most populous countries, based on 2020 estimates from Worldometers. It uses D3 v6’s scaleLinear and scaleBand to map population values and country names to a horizontal bar layout, rendered as SVG rects that change color on hover. The visualization includes axis labels and a title, with x-axis tick values formatted in billions and gridlines drawn using axisBottom.

MMainul Islam
73% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the world’s ten most populous countries, with each bar’s length proportional to its value. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Data is loaded from a CSV file via `d3.csv`, and axes are generated using `axisLeft` and `axisBottom`. The chart applies a fixed margin layout and styles the rectangles with steelblue fill.

GGino Dzin
72% match