How big is the Tokyo Dome?

100%

How big is the Tokyo Dome?

✓ Published0🌍 Public

Last edited Feb 19, 2020

Created on Sep 8, 2018

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.

AI-generated description

▶︎ What's this?:　Tokyo Dome Polygon generator on you are here area Satellite Map (Satellite 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: 3D building ver. - https://bl.ocks.org/Hirosaji/ed4443946608237eaddcf1207b3776cb

[Gist] https://gist.github.com/Hirosaji/788653f2ce96f46c18d3ed5ca3daf82d

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

How big is the Tokyo Dome?

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.

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

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

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

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

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

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

60% match

Loading thumbnail…

Japan Country

This map of Japan renders land areas as aquamarine shapes with black outlines, using a Mercator projection. The visualization uses topojson data fetched from a GitHub gist, with TopoJSON APIs (`topojson.presimplify`, `topojson.feature`) for simplification and conversion to GeoJSON. It applies D3’s `d3.geoTransform` to filter polygon details based on a threshold, which is adjustable via a range slider, and draws paths with `d3.geoPath` onto an SVG canvas. The map redraws dynamically when the slider changes or the window resizes.

Hhappymail6

59% match