H

Hirosaji

@Hirosaji·41 public vizzes

Loading thumbnail…

ScrollyTelling with FreeCamera API snippet

This example demonstrates scroll-driven animation in a Mapbox GL map, syncing a free camera’s position and view target along geographic routes. Using Turf.js’s `length` and `along` functions, it interpolates points based on scroll rate, then sets the camera’s mercator coordinates and look-at point via `map.getFreeCameraOptions` and `map.setFreeCameraOptions`. A scroll event listener triggers `requestAnimationFrame` to update the view smoothly. The code shows route and camera path synchronization, with altitude fixed, rendering an animated flythrough tied to page scroll.

Loading thumbnail…

format Arctic sea ice Polygon data

This example shows how to prepare Arctic sea ice polygon data for mapping by splitting coordinate rings that cross the 180° meridian, ensuring each segment stays within a representable longitude range. It processes GeoJSON features containing polygon coordinates, detecting jumps greater than 180 degrees between consecutive points, then rebuilding rings with boundary points at ±180° and the pole. Using Node.js with the built-in `fs` module, it reads `input.geojson`, manipulates the geometry arrays, and writes the cleaned result to `output.geojson`. The output is intended for later visualization with libraries like `d3.geoPath`.

Loading thumbnail…

Mapbox - ScrollyTelling with FreeCamera API

A scrolling narrative climbs Mt. Fuji using a Mapbox map with the FreeCamera API. As the user scrolls, the camera moves along a defined route while the view follows a hiking path drawn as a line layer, with terrain exaggeration and an atmospheric sky. The example combines Mapbox GL JS, D3.js for CSV data loading, and Turf.js to interpolate the camera and target routes.

Loading thumbnail…

d3v5 - Selective Projection Map

This example visualizes a world map with a dropdown menu to switch between over 40 different geospatial projections, including Miller, Mercator, and Robinson. The map is rendered as SVG using d3.geoPath, while the projection options are defined with d3-geo-projection methods like d3.geoMercator and d3.geoMiller. World coastlines come from a GeoJSON file, and a graticule and sphere outline are added to each view.

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.

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.

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.

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.

Loading thumbnail…

Script using Intersection Observer API

This example demonstrates a scroll-tracking interaction that classifies entry and exit directions for target elements as the user moves up or down a page. It uses the browser’s Intersection Observer API within a D3.js selection loop to monitor each element’s vertical position and intersection ratio relative to the viewport. The script logs distinct states like “down enter” and “up leave” to the console, accounting for page-load initialization through a counter that defers logging until all observed elements have been registered. The visualization relies solely on DOM elements selected via the `.box` class, with no external dataset.

Loading thumbnail…

Visualize dataset includes crimes reported to the New York City Police Department.

This visualization maps crimes reported to the NYPD in 2018 as point data on an interactive Kepler.gl basemap, then aggregates incident counts by neighborhood using a spatial join with New York City’s Neighborhood Tabulation Areas shapefile. The point map uses GeoPandas to read the CSV and create point geometries, while the choropleth view is built by grouping joined incidents per neighborhood polygon, merging counts back to the shapefile, and rendering the result in a second Kepler.gl map. Data sources include the NYPD complaint dataset and NYC open-data polygons.

Loading thumbnail…

Google Earth Engine × Mapbox - Reduction in NO2 by COVID-9

This visualization compares nitrogen dioxide (NO2) density in Japan before and during the COVID-19 pandemic, using monthly mean satellite data from April 2019 and April 2020. The map displays a difference layer (2020 minus 2019) that highlights reductions in NO2, with an overlaid color legend ranging from red (negative change) to blue (positive change). Users toggle between the three datasets via radio-button tabs, which control Mapbox layer visibility through `map.setLayoutProperty`. The example combines Mapbox GL JS for the interactive map with D3.js v5 for tab event handling and legend updates, rendering spatial data as raster tiles over Japan.

Loading thumbnail…

Route object architecture in Mapbox API

This example visualizes the nested structure of a Mapbox API route object, showing how a route contains legs, steps, maneuvers, and instruction objects. Built as an interactive tree diagram, it uses the D3.js force-directed layout via `d3.forceSimulation` to position nodes, with edges drawn using SVG paths. The code parses a static JSON gist file containing the route schema and renders each object type as a colored node, with child objects branching downward. Labels identify each object’s role, and the layout updates dynamically as the simulation settles into a stable arrangement.

Loading thumbnail…

Scrollytelling Template

This scrollytelling template uses Mapbox GL JS and Scrollama to guide viewers through a narrative about crime statistics in Tokyo, overlaying data on a map of the city. It shows the geographic distribution of crimes, Olympic venue locations, and popular residential rankings, with map layers and camera positions changing as the viewer scrolls. The code uses Mapbox GL JS’s `setPaintProperty` to adjust layer opacity and the IntersectionObserver API to trigger chapter transitions. Data is sourced from the Tokyo Metropolitan Police and SUUMO rankings.

Loading thumbnail…

Position Helper

Built with Mapbox GL JS v1.5.0 and the Mapbox Geocoder plugin, this interactive map acts as a position helper for scrollytelling projects. A fixed crosshair target sits at the screen center, while a side panel continuously displays the map’s current center coordinates, zoom level, pitch, and bearing. The tool updates these parameters on every map move, and also adds a 3D building extrusion layer from the Mapbox composite source. This provides a practical way to copy camera settings for storytelling sequences, as demonstrated in the linked Mapbox blog example.

Loading thumbnail…

Leaflet.js × D3.js × geojson-vt.js - Redraw Canvas Tiles Map

This example shows a slippy map interface using Leaflet.js alongside D3.js to render geographic boundaries from a GeoJSON dataset. Canvas tiles are generated in the frontend, converting vector data into raster tiles on demand. The core function `addCanvasTile` leverages the `geojson-vt.js` `tileIndex.getTile` API to extract features for a given zoom level and coordinate. Drawing occurs directly on HTML5 canvas elements, and the code uses Canvas `getImageData` to enable click detection on rendered polygons, with D3 selection handling mouse events for property feature identification.

Loading thumbnail…

Leaflet.js × D3.js × geojson-vt.js - Clickeble Canvas Tiles Map

This interactive map displays Japanese municipal boundaries using vector tiles rendered onto Canvas elements within a Leaflet.js map. The visualization employs geojson-vt.js to convert GeoJSON data into tile-based vector features, which are then drawn using D3.js for click interaction handling. Each polygon is rendered with a unique picking color, enabling feature identification through Canvas `getImageData` pixel inspection on mouse events. The map supports zoom-dependent styling with adjustable line widths and dash patterns, showing prefectural city data including Sendai and Ora-machi boundaries.

Loading thumbnail…

three-vrm example

A 3D VRM avatar performs motion capture animation synced to a live webcam feed. The webcam video and PoseNet-detected keypoints are drawn onto a 2D overlay canvas, while the estimated pose data drives the avatar’s joint rotations in a Three.js WebGL scene with GridHelper and AxesHelper. The code uses TensorFlow.js PoseNet, THREE.VRM, GLTFLoader, and OrbitControls, rendering the avatar from a local .vrm model.

Loading thumbnail…

Gist ff27bd2aedab264f5a259d4befd7f54e

This example shows a configuration panel for a BERT model, displaying the file paths and checkpoint settings used to initialize the language model. It presents the Python dictionary `BERT_PRAMS` with its keys and values, including the vocabulary file, BERT config, and model checkpoint. The visualization renders these parameters as a structured, readable layout, likely using a text-based or table-like rendering approach. The code relies on standard Python data structures and does not employ any external plotting or graphics libraries, focusing instead on the raw configuration data.

Loading thumbnail…

Gist 5cb8bf884b466e5a35b2c9d12489454b

This example shows a web service that computes sentence similarity, returning a JSON payload with the target sentence, compared texts, and their cosine similarity scores. The user submits a POST request to the `/sim` endpoint containing a target and list of texts. The application, built with Flask, uses the BERT model to extract `[CLS]` token features from each sentence, then calculates cosine similarity between the target and each comparison. The code explicitly uses `get_futures` for feature extraction and `calc_simlarity` for the similarity computation, all orchestrated through Flask's routing and `jsonify` for the response.

Loading thumbnail…

Leaflet.js × D3.js - location data fix on GUI

This example presents a drag-and-drop system for fixing location data on a Leaflet map, built for the "Houbunsha" map project. Red circular markers, rendered via the Leaflet.js API, show real-life locations from a JSON file. Users can drag these markers to correct their positions, and the updated coordinates are saved back to the data file via an Export button, which uses a D3.js selection to create a downloadable link. The code integrates Leaflet's map and layer-group objects with D3.js's data-loading and DOM-selection functions to provide an efficient editing workflow.

Loading thumbnail…

d3v4 - Gradient Color Line Chart

This example shows a line chart of temperature data over time, where the line’s color shifts through a red-gray-steelblue gradient based on value. The chart uses d3.v4's `d3.line()` with `d3.curveStep` to generate a stepped path, and a `linearGradient` with three `stop` elements, defined in SVG `defs`, applies the color scale via the `stroke` attribute. The data is loaded from a CSV of temperature readings, with x/y axes scaled using `d3.scaleLinear()`.

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.

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.

Loading thumbnail…

Kyoto Wifi Map

The Kyoto Wifi Map visualizes the density of public free Wi-Fi spots across Kyoto using a red hexagonal grid overlaid on a base map. Each hexagon’s fill opacity and stroke weight correspond to the count of Wi-Fi points within it, ranging from transparent to nearly opaque. The map loads point data from a GeoJSON file and uses Turf.js’s `hexGrid` and `aggregate` functions to bin locations, while Leaflet handles map rendering and layer styling. The color legend and tile layer come from Japan’s Geospatial Information Authority.

Loading thumbnail…

Chiba McDonald's Map

The Chiba McDonald's Map overlays McDonald's restaurant locations onto a choropleth map of Chiba Prefecture, visualizing store density through a red-tinted square grid. It uses Leaflet to render the map, with D3.js queueing and parsing two GeoJSON files: one for restaurant points and one for administrative boundaries. Turf.js generates a square kilometer grid, and a custom style function colors each grid cell by counting the number of stores within it, increasing opacity and border weight as store counts rise. Clicking a restaurant marker reveals its name in a popup.

Loading thumbnail…

leaflet - Foreign Guests Map

This example visualizes monthly foreign guest ratios across Japanese prefectures using a Leaflet map. A choropleth layer colors each prefecture by the percentage of foreign guests, with hover tooltips showing total and foreign guest counts. A D3.js line chart overlays the map, displaying foreign guest trends over time for all prefectures. The code merges JSON datasets of guest counts with GeoJSON prefecture boundaries, using `L.geoJson` for map rendering and SVG paths for the line chart.

Loading thumbnail…

A-Frame - VR Horse-Racing

This example presents a virtual horse-racing scene within a 360-degree panoramic view. It displays a horse-racing track as a spherical skybox, allowing the viewer to see the environment in all directions. The visualization is built with the A-Frame virtual reality framework, using the `a-scene` and `a-sky` elements to render the image. It loads a single JPEG image, "horse-racing.jpg," as the environment's texture, with the scene's rotation adjusted to 170 degrees along the Y-axis. The code relies on A-Frame's built-in VR capabilities to create the immersive visual experience.

Loading thumbnail…

leaflet - Map on D3.js points

This example shows a Leaflet map displaying Japanese land price survey points as red circles over a tile-based base map, with the points positioned using geographic coordinates. The visualization combines Leaflet’s mapping and tile-layer API with D3.js to render the data: D3 is used to select the map’s SVG layer, append a group, and create circle elements from a GeoJSON file. The circles’ positions are updated via `map.latLngToLayerPoint`, which converts latitude and longitude into screen coordinates during map view changes. The example uses leaflet 0.7.7 and D3.v3, loading data from `landprice.geojson`.

Loading thumbnail…

leaflet - Map with D3.js outline

This example combines Leaflet with D3.js to render a geographic map of Japanese prefectures. It displays a GeoJSON polygon of Tottori Prefecture, overlaid on a tile layer from the Geospatial Information Authority of Japan. The code uses Leaflet’s `L.map` and `L.tileLayer` for base tiles, while D3’s `d3.geo.path` with a custom `d3.geo.transform` projection converts latitude/longitude coordinates to screen points via `map.latLngToLayerPoint`. The D3-selected SVG paths are redrawn on Leaflet’s `viewreset` event.

Loading thumbnail…

leaflet - Markers on map

This example uses the Leaflet mapping library to place interactive markers on a tile-based map of Tokyo. A small CSV dataset provides the station names and geographic coordinates for each marker, which are loaded with d3.csv. The map background is rendered using Mapbox tile layers, and each station marker is bound to a popup that displays its name. The visualization combines Leaflet’s map interactions with D3’s data-loading capabilities to create a straightforward geographic point display.

Loading thumbnail…

d3v4 - Selective Table

This example presents an interactive table for exploring job-category data across several months, with the data loaded from a TSV file using `d3.queue` and `d3.tsv`. It shows how users can selectively highlight rows and columns by clicking items in two separate lists (jobs and dates), which toggle a `__checked` class and reorder the table’s headers based on click order using `d3.selectAll` and `classed`. The table is rendered with plain HTML elements, and a `__selected` class marks the most recently clicked header.

Loading thumbnail…

d3v4 - Switchable Table

A switchable table visualizes monthly job and industry category data, allowing users to toggle between two datasets via buttons labeled 職種別 and 業種別. The table initially sorts by a default month column and supports interactive re-sorting by clicking any header, which highlights the active column in red. Built with d3.v4, the example uses `d3.queue` and `d3.tsv` to load both tab-separated files, then dynamically appends an HTML table via `d3.select` and handles data binding with `enter()` and `merge()`. Sorting is implemented by comparing string values on the selected header, and header classes are updated with `classed` to reflect the chosen sort key.

Loading thumbnail…

d3v4 - Stack Image Chart

This chart displays a stacked horizontal bar chart where each bar is composed of repeated human silhouette images, representing the number of job postings per category. The length of each image stack corresponds to the rate for that category, with a single partial image indicating any fractional remainder. The visualization uses d3.v4 with SVG rendering, employing a linear scale for the x-axis and a band scale for the y-axis. Images are clipped with `clipPath` elements to show only the appropriate portion of the final image in each series. Data is loaded from a TSV file containing job categories and their associated rates.

Loading thumbnail…

handle tsv data (ex. delete column)

This example demonstrates how to preprocess tab-separated value (TSV) data by removing a column, such as the second field, from a dataset. It reads a TSV file into Python using the `csv.reader` function with a tab delimiter, converts the rows into a list, and then employs NumPy’s `np.delete` function to remove the specified column (index 1). The result is written back to a new TSV file using `csv.writer` with a tab delimiter. The code relies on the standard `csv` module and the NumPy library, with the data sourced from a local file named `test.tsv`.

Loading thumbnail…

read all svg file name in current dir -> edit svg text -> export

This example reads every SVG file in the current directory, extracts its `viewBox` dimensions, and writes a modified copy to an `output` subfolder. Each file’s width and height attributes are explicitly set from the viewBox values, using Node.js’s `fs`, `path`, and `xmlhttprequest` modules to load and parse the raw SVG markup. The script filters files by extension, applies a regular expression to match the viewBox, and then performs a string replacement before saving the edited files. The result is a batch-processed set of SVGs with explicit dimensions for use in web contexts.

Loading thumbnail…

Add a video

This example overlays a video file directly onto a map, using a custom Mapbox GL style that defines a video source with geographic coordinates. It shows the video as a raster layer on top of Mapbox’s satellite imagery, with the video frames georeferenced to fit the given corner points. The map is centered and rotated over the video area, and the style includes a dark background and satellite base layer. The implementation uses the Mapbox GL JS API, specifying the video source, its URL, and the bounding coordinates in the style’s JSON.

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.

Loading thumbnail…

A-Frame × AR.js - WebAR

This example presents a web-based augmented reality scene: a single HTML page displaying a centered image of a marker. When the page is viewed through a compatible browser and camera, the marker acts as a tracking target for an AR model, though the code only shows the static marker image and does not include any AR tracking logic. The implementation uses a simple HTML `<img>` tag with inline CSS styling, rendering the marker from a local `marker.png` file. The code references an external model hosted on Google Poly and mentions a separate drawing program as part of the project’s context, but the visible HTML itself contains no JavaScript, AR library, or A-Frame integration.

Loading thumbnail…

Leaflet.js - Simple Map

This example combines Leaflet.js 0.7.7 with D3 v4 to render a GeoJSON map of Japanese prefectures on an interactive tile-less map. The map is centered on Japan, constrained to a bounding box between latitudes 25–50 and longitudes 112–158, with zoom limits of 5–10. D3 loads the local `ken.geojson` file, which Leaflet then draws as semi-transparent white polygon features using `L.geoJson` with a custom style for weight, opacity, and fill. An invisible rectangle marks the allowed viewing area.

Loading thumbnail…

leaflet - Images on Map (using D3.js)

This example overlays the locations of hot springs in Hokkaido, Japan, onto an interactive Leaflet map. It loads point data from a GeoJSON file and renders each location as an SVG icon, with a tooltip that displays the hot spring name on hover. The code combines a Leaflet tile map with D3.js selections and its `latLngToLayerPoint` method to position icons dynamically during pan and zoom. The map is initialized with a Mapbox tile layer and the icon is a custom SVG file.

Loading thumbnail…

leaflet - Leaflet.js Plugin Cluster on Map

This example displays the locations of hot springs across Hokkaido, Japan, as interactive markers on a Leaflet map. The markers are grouped into clusters using the Leaflet.markercluster plugin to manage dense areas. The map is built with Leaflet.js and uses D3.js to load and parse the CSV data file containing each hot spring’s name and geographic coordinates. The code initializes a Leaflet map with a Mapbox tile layer and binds popups showing the hot spring names to the markers.