Skyscrapers Bar Chart

100%

Skyscrapers Bar Chart

✓ Published0🌍 Public

Last edited Feb 24, 2022

Created on Feb 22, 2022

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.

AI-generated description

A bar chart comparing the types of materials used for U.S. skyscrapers up until 2016.

MIT Licensed

Similar vizzes

Loading thumbnail…

Skyscrapers Histogram

This histogram shows the distribution of construction start years for U.S. skyscrapers, with bins set at ten-year intervals. The chart uses `d3.bin` to group the data and `d3.scaleTime` with `d3.axisBottom` for the time axis. Bars are drawn as SVG rectangles, colored `cornflowerblue`, on a gray background with horizontal grid lines. The data comes from `skyscrapers.csv`, which is filtered to exclude rows where construction has not started.

Ssyu36

79% 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

77% match

Loading thumbnail…

Skyscrapers Boxplot

This visualization uses a log-scale boxplot to compare the number of above-ground floors for U.S. skyscrapers from a 2016 CSV dataset, filtering out buildings with zero floors that are not yet completed. Outliers are highlighted as jittered orange dots, while the box, median, and quartile lines are drawn using D3 v7 SVG elements with explicit `d3.scaleLog`, `d3.quantile`, and `d3.median` calls.

Ssyu36

75% match

Loading thumbnail…

The total number of skyscrapers in each country

This bar chart displays the total number of skyscrapers (buildings over 100 meters) per country, using a bar for each country with the bar height representing the count and a color encoding for the city. The visualization is built with the Vega-Lite API, using `markBar` and a groupby transform to aggregate the data by country. It loads data from a CSV file containing city-level skyscraper counts and uses the `vl` library with Vega-Lite’s specification to render the chart, with tooltips showing the city and its building count.

AAbdul Salam Almadani

75% 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

74% 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

73% match

Loading thumbnail…

Making a Bar Chart

This example demonstrates how to build a basic bar chart using React and D3.js, displaying the heights of six notable buildings from a CSV data file. The SVG-based visualization renders steelblue rectangles for each bar, with text labels sized at 1.4em. The code initializes by selecting the SVG element from the HTML, then loads the data using D3's `csv` function, which parses the building names and heights. The current implementation focuses on data ingestion and console logging, with the visual encoding already defined in the stylesheet.

Ddivyanshu7073

72% match

Loading thumbnail…

Year Completed Skyscraper Histogram

This histogram visualizes the distribution of skyscraper completion years using 10-year bins from 1850 to 2019, with outliers removed. Hovering over a bar displays a tooltip with the exact count. Built with the p5.js library, the visualization loads data from a CSV via `loadTable`, computes bin counts in `calculateBins`, and renders the chart using `rect` and interactive mouse-position detection for tooltips.

Ssyu36

72% match