Bar Chart of the 10 Highest Skyscrapers in the World

100%

Bar Chart of the 10 Highest Skyscrapers in the World

✓ Published0🌍 Public

Last edited May 14, 2023

Created on May 14, 2023

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Bar Chart of the 10 Highest Skyscrapers in the World

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.

NNigel

93% match

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

92% 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…

Scales

This example visualizes the heights of five tall buildings as a bar chart, with building names on the x-axis and height in meters on the y-axis. It uses the D3.js v5 library within a React framework, rendering as an SVG. The code employs `d3.scaleBand` for positioning along the x-axis and `d3.scaleLinear` for mapping height values to both the y-axis position and bar height. Data is loaded from a local `buildings.json` file, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

DdeafMother

75% match

Loading thumbnail…

Skyscrapers Bar Chart

A bar chart displays the counts of material types used in U.S. skyscrapers up to 2016, with categories such as steel, concrete, and composite. The chart uses D3 v7 and SVG rendering, loading data from a CSV file. The code aggregates material counts with `d3.rollups`, scales the axes with `d3.scaleLinear` and `d3.scaleBand`, and renders bars and axes via D3’s selection and scale APIs.

Ssyu36

73% match

Loading thumbnail…

Bar chart with react and D3

This example displays a horizontal bar chart of the top ten countries by population for 2020, using React to manage state and render the SVG, while D3 provides the scales and data loading. The chart uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis categories, and `d3.csv` to fetch data from a GitHub Gist. Axis labels and tick marks are generated manually with React components and D3’s tick function, with no additional libraries beyond the core React 16.9 and D3 v5 APIs.

Sshimos12468

73% match

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart visualizes the top 10 most populous countries, displaying their populations as bars whose heights are encoded on the y-axis. The chart uses a linear scale for both axes and renders tick marks and labels with custom SVG elements. It is built using React and D3.js, with d3.scaleLinear for scaling and d3.csv to load data from a local CSV file. The chart’s styling comes from Cascading Style Sheets rules, which specify fonts, colors, and the appearance of tick marks.

JJiapengFan

73% match

Loading thumbnail…

BarChart

This bar chart displays the top 10 most populous countries for 2020, using horizontal bars where length encodes population. A React app renders SVG elements, with axes generated from D3’s `scaleBand` and `scaleLinear`. The chart includes a bottom axis for population values and a left axis for country names, though the README notes it is a “pathetic bar chart with no axes” despite the code drawing them. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`.

AAlex

73% match