How big is the Tokyo Dome?

100%

How big is the Tokyo Dome?

✓ Published0🌍 Public

Last edited Feb 19, 2020

Created on Sep 9, 2018

An interactive map lets users compare their current location with the size of the Tokyo Dome. Using the Geolocation API to find coordinates, the code generates a 3D dome-shaped polygon overlaid on a Mapbox GL map, with the height modeled using Turf.js calculations. The visualization renders the dome in semi-transparent pink and red fill-extrusion layers, showing both the structure’s body and roof. This allows viewers to visually grasp the dome’s scale relative to wherever they are standing.

AI-generated description

▶︎ What's this?:　Tokyo Dome Polygon generator on you are here area Satellite Map (3D buildin ver.)

▶︎ How to get current place: using Geolocation API

▶︎ Reference: https://bl.ocks.org/andrewharvey/c1fdbebafe3fc46d743ba9514e4d64b2

▷ Why made this?: Japanese TV often expresses a large area compared with Tokyo Dome. However, many people can not imagine how big Tokyo Dome is. So I made this content. With this content, everyone can compare the you are here area with Tokyo Dome.

▷ Another version: Satellite ver. - https://bl.ocks.org/Hirosaji/788653f2ce96f46c18d3ed5ca3daf82d

[Gist] https://gist.github.com/Hirosaji/ed4443946608237eaddcf1207b3776cb

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

How big is the Tokyo Dome?

This interactive map displays a pink semitransparent dome over a satellite view of the user’s current location, sized to match Tokyo Dome’s exact footprint. After geolocation via the browser’s Geolocation API, Mapbox GL JS renders the satellite basemap, while Turf.js generates a hexagonal grid and computes each hexagon’s height to form the dome’s 3D surface. The fill-extrusion layers in Mapbox GL JS apply the calculated base and roof heights, letting viewers compare their immediate surroundings with Tokyo Dome’s actual dimensions.

HHirosaji

96% match

Loading thumbnail…

Mapbox - Extruding circles (choropleth)

This map visualization shows the locations and heights of Japanese towers with observation decks, using extruded circles on a 3D Mapbox globe. The towers are colored on a yellow-to-red scale based on total height, and hovering over a polygon changes its color to a blue-green scheme and displays the tower's name and height in a white info panel. Built with Mapbox GL JS and d3.v5, the code loads tower data from a CSV, projects point locations into circular polygons using the Turf library, and applies `fill-extrusion` layers with feature-state hover styling. The data comes from the Kiso Sansen National Government Park website and the Social Atlas of Japan.

HHirosaji

67% match

Loading thumbnail…

Mapbox - Extruding circles (simple)

This visualization displays Japanese towers with observation decks on a 3D Mapbox globe, extruding each structure as a blue cylinder whose height corresponds to the tower’s full height—hovering highlights the shaft in red and shows the name, tower height, and observatory height in an info panel. The example loads tower data from a CSV file via D3’s `d3.csv`, geocodes the coordinates into GeoJSON points, and uses Mapbox’s `fill-extrusion` layer to render the bars. Turf’s `turf.circle` generates circular polygons around each point, while `mapObj.queryRenderedFeatures` and `setFeatureState` manage the interactive hover state. The map is tilted at a 60-degree pitch, and the towers’ extrusion heights are scaled by a factor of 600.

HHirosaji

65% match

Loading thumbnail…

Mapbox - Extruding circles (stacked)

This example visualizes Japanese towers with observation decks using Mapbox GL JS and D3 v5. It renders filled 3D extruded circles on a map, with the stacked heights representing each tower’s total height and its observation deck altitude, colored blue and red at hover. The code loads tower height data from a CSV, geocodes points, and uses Turf.js to create circular polygons that are extruded via Mapbox’s fill-extrusion layers and feature-state hover styling.

HHirosaji

63% match

Loading thumbnail…

Mapbox - Extruding circles (gradient)

A Mapbox GL map visualizes Japanese towers with observation decks, displaying each as a stack of extruded circular layers whose heights encode tower height. D3.js parses CSV data, while Turf.js generates circular geometries at each tower’s coordinates, and Mapbox’s fill-extrusion layers render them with a gradient color scale. Hover interactions reveal the tower name and heights, sourced from the Kiso Sansen Park and social statistics datasets.

HHirosaji

62% match

Loading thumbnail…

都道府県マップ

This interactive choropleth map visualizes the number of buildings with basements constructed in each Japanese prefecture from 2011 to 2015, based on data from Japan’s e-Stat statistics portal. Users clickable legend labels switch between total counts and counts per basement floor level, each with 1-second animated color transitions. The map uses D3 v3’s `d3.geo.mercator`, `d3.geo.path`, and TopoJSON to render geographies, with zoom and pan via `d3.behavior.zoom`, plus a hover tooltip. A linear color scale encodes values from blue (low) to red (high). Tokyo, Osaka, and Hokkaido show notably higher counts.

TTakuro0122

59% match

Loading thumbnail…

Display a map

This choropleth map shows the gender ratio of Japan’s population by prefecture, overlaid on a Mapbox light-v9 basemap. The code merges official 2017 population statistics from a TSV file with geographic boundaries from a GeoJSON file using D3 v5’s `d3.json` and `d3.tsv`. A Mapbox GL map renders the fill colors, using a color-stops legend with thresholds for the ratio. Clicking a prefecture displays its name in a popup and briefly highlights it by setting a special value.

HHirosaji

58% match

Loading thumbnail…

Japan Map

This example displays a map of Japan, centered within a full-page layout, on a light gray background. The visualization is built using JavaScript and relies on the D3.js library for map rendering and geographic projections. The map is rendered to the screen through the use of SVG paths generated by D3’s geographic path generator, which converts GeoJSON data into viewable shapes. The page structure is defined in HTML and styled with CSS, while the map’s appearance and positioning are controlled entirely through the D3 code in the included script.

66264kusuma@gmail.com

58% match