Topo.JSON grid that can be used as pixel art on a map or a charting solution

100%

Topo.JSON grid that can be used as pixel art on a map or a charting solution

✓ Published0🌍 Public

Last edited May 3, 2017

Created on Apr 26, 2017

This grid-based TopoJSON file defines 100×100-pixel cells that can be assembled into a larger raster-like map. The geometry uses a repeating pattern of square arcs, each with an identical side length, which lets developers render the data as pixel art on a map or as a discrete grid in a charting library. The author, Hugoberry, published this as a Gist, likely as a lightweight, code-driven way to experiment with topojson without needing external shapefiles.

AI-generated description

Similar vizzes

Loading thumbnail…

topojson example data

This example displays a map of Spanish municipalities using a TopoJSON file from a Gist by Jn1532. The visualization renders geographic boundaries as vector paths with `d3.geoPath`, while the code also defines multiple data fields for interactive features. The JSON structure contains topology arcs and coordinate arrays, which are processed and drawn through the D3.js library. The rendering approach focuses on the raw geographic data rather than an interactive interface, showing how TopoJSON encodes complex spatial relationships.

JJn1532

71% match

Loading thumbnail…

U.S. Counties TopoJSON Mesh

This example renders a minimalist map of U.S. counties using a TopoJSON mesh from the U.S. Census Bureau’s shapefile, served via the `us-10m.v1.json` file. The SVG visualization displays county boundaries as thin black lines with rounded joins, and overlays small circles at each arc’s starting point, revealing the topological structure of the data. The code uses `d3.geoPath` to project the mesh and `topojson.mesh` to extract boundaries, while `topojson.transform` positions the circles. Rendering is entirely SVG-based with D3 v4, and the map uses no fill, focusing purely on geometric outlines.

Mmbostock

70% match

Loading thumbnail…

TopoJSON

This visualization displays a world map rendered as a sphere using the TopoJSON format. The map shows country boundaries in blue with no fill, projected using the geoEqualEarth projection. The code loads geographic data from a gist, converts TopoJSON to GeoJSON using topojson’s `feature` function, and renders paths with d3’s `geoPath`, all within a React component drawing to SVG.

KKoundinya

69% match

Loading thumbnail…

U.S. Counties TopoJSON

This map displays the boundaries of every county in the United States using data from a TopoJSON file fetched from `https://d3js.org/us-10m.v1.json`. It renders the county shapes as filled SVG paths, with a white mesh overlay showing county borders via `topojson.mesh`. Hovering over any county turns it red. The visualization is built with D3 v4, using `d3.geoPath` to project the geometry and `topojson.feature` to extract the features, relying on the `us-atlas` TopoJSON data source.

Mmbostock

69% match

Loading thumbnail…

TopoJSON via MapBox & Leaflet

This example shows a map of the United States with county boundaries rendered as vector shapes, overlaid on a zoomable and pannable MapBox tile layer. It combines D3.js and TopoJSON to load and parse county geometries from a remote GeoJSON-like file, then uses MapBox’s Leaflet-based `L.geoJson` to display them with a simple gray outline style. The map initializes at a low zoom level, and the counties are added as a single layer after asynchronous JSON retrieval, demonstrating integration between D3’s data handling and Leaflet’s mapping API.

CCaged

69% match

Loading thumbnail…

TopoJSON Collection

This example presents a gallery of TopoJSON files converted from original shapefiles and GeoJSON sources, covering world countries, continents, and administrative subdivisions by country. The visualization uses d3.v4 and renders a static SVG scene with a text caption, as the core function is to make the collection discoverable rather than display mapped data. The code initializes an SVG canvas and adds a label referencing the repository’s README, while the data sources are documented as Natural Earth and DIVA-GIS.

FFrissAnalytics

68% match

Loading thumbnail…

TopoJSON Points

This example maps a collection of airport locations across the United States using a TopoJSON MultiPoint geometry object. The airports are rendered as small dots over a gray landmass with white state boundaries, using an Albers projection. The code loads geographic base data from a separate US TopoJSON file and the airport points from a local TopoJSON file via the queue library, then draws everything with d3.geo.path and SVG paths.

Mmbostock

68% match

Loading thumbnail…

Gist 5967514

This example displays a map of U.S. counties using a TopoJSON shapefile from the U.S. Census Bureau, rendered as gray-filled paths with white borders that turn red on hover. It shows the geographic boundaries of counties and responds to clicks, though the click behavior only logs to the console. The visualization uses D3 v3’s `d3.geo.path()` to project and draw the SVG paths, and TopoJSON’s `topojson.feature` to extract GeoJSON features from the topology. The map is static, with no zoom or pan, and the hover effect is the only interactive styling.

CCaged

68% match