Skip to main content
100%

Gist 225a8101d5a07e32e73562acaa938692

✓ Published0🌍 Public
VVioletVivirand
Last edited Aug 1, 2016
Created on Aug 1, 2016

This visualization uses a world map made of equally sized hexagonal tiles, with each country represented by a labeled hexagon. The tiles are colored in varying shades of blue, creating a choropleth-style effect that distinguishes geographic regions while maintaining a uniform grid layout. The map is generated from a JSON dataset listing country names and numeric codes, likely rendered with D3.js. Hovering over a hexagon highlights it, and the visualization appears to support zooming or panning for exploration. The title suggests a "gist" style example, focusing on a clean, tile-based cartogram aesthetic.

AI-generated description

Similar vizzes

Loading thumbnail…

Hex Map

This animated visualization presents a hexagon-based map of the contiguous United States, with each state rendered as a cluster of individual hexagons. The TopoJSON data (Hex1000Topo.json) contains a grid of 1,000 hexagons, and D3.js v3 projects and renders these as SVG polygons. On load, the hexagons assemble into place with an animation, building the map from a central point outward. Each hexagon is color-coded to represent the state it belongs to, creating a mosaic-like representation of U.S. state boundaries. The hover interaction could be used to reveal additional information, though the core visualization emphasizes the hexagonal tiling of geographic regions through smooth, animated transitions.

BBrideau
75% match
Loading thumbnail…

Colorful Flexagons

This interactive globe renders the world’s countries using D3’s geoOrthographic projection on a Canvas, layered with a graticule and a colorful overlay of the 122 base hexagons from Uber’s h3-js library. Each hexagon is stroked with a randomly generated color, creating a vibrant, flexagon-like pattern across the sphere. Users can drag to rotate the globe and zoom with the wheel, implemented via D3’s drag and zoom behaviors. Geographic data comes from the visionscarto-world-atlas TopoJSON source.

CCurran Kelleher
74% match
Loading thumbnail…

hex-cartogram-2

This visualization is a hex-cartogram of the United Kingdom, transforming the geographic boundaries of Westminster Parliamentary constituencies into a grid of evenly sized and colored hexagons. Each hexagon, colored by the constituency’s regional name using a categorical color scheme, represents one constituency, prioritizing a uniform tile-based layout over true geographic shape. The map is built using the D3.js library, leveraging loaded GeoJSON data for shape coordinates and its scaleLinear and scaleOrdinal APIs for spatial projection and color mapping. The data was sourced from the parlitools database and converted using mapshaper.org, with the final placement adjusted to a custom hex-bin layout to prevent overlaps.

11wheel
73% match
Loading thumbnail…

Hex map

This example renders a map of the world as a hexagonal grid using the `d3-hexgrid` library. The SVG output shows continents and country boundaries formed by hexagons, with a color scale distinguishing land from water. The visualization is built with React and uses D3’s hexbin mapping to project geographic coordinates onto hexagon cells, creating a stylized, low-resolution representation of global geography. The code initializes a 1960x800 SVG canvas and loads the hexgrid library via a CDN.

SSam de Man
73% match
Loading thumbnail…

Gist 34bad0b124f4effdf99d5555cb3222d8

This example shows how spatial relationships between geographic features can be explored through an interactive map. It uses D3.js with `d3.geoPath` to render country outlines from a GeoJSON source, while a force-directed layout via `d3.forceSimulation` positions non-overlapping markers for data points. The visualization computes marker placement on a Canvas, reading pixel colors with `getImageData` to detect land versus water and ensure points remain on landmasses. Hover interactions trigger a tooltip and highlight neighboring regions, with smooth transitions handled by `transition.attrTween`. The data originates from a public GitHub gist and is embedded in a Power BI report, where the canvas is updated on each zoom or pan event.

HHugoberry
73% match
Loading thumbnail…

Gist d6e714e97e5e937623a7

This visualization plots each country as a point positioned by latitude and longitude, with circle size representing total population and color indicating HIV/AIDS prevalence. The chart uses D3’s `d3.geoPath` and a geographic projection to place points over a world map background. Data is loaded from a CSV containing country statistics, and hover interactions reveal specific country details. The rendering relies on standard SVG elements with scales for sizing and color encoding, following a scatterplot-over-map approach.

LLTymn
73% match
Loading thumbnail…

Gist 81bb1fe48aaac31ecad321fb46af0847

The visualization maps discovered geospatial features onto a grid of cells, using color intensity to show the frequency of feature occurrences per cell. It highlights clusters of high-density areas, such as locations with counts of 23, 5, and 4, while most cells remain empty. The code uses JavaScript with a custom grid-rendering approach, likely employing canvas drawing or SVG elements, to display the distribution of features across the mapped region. Feature counts are stored in a two-dimensional array, with each cell’s value determining its visual encoding.

JJustinGOSSES
73% match
Loading thumbnail…

ICE08 11604571

This example displays a choropleth-style world map rendered as an SVG, with countries shown in a light color against an olive-green sphere background. The visualization uses D3 v5's `geoEquirectangular` projection and `geoPath` to generate the map geometry from TopoJSON data loaded from the world-atlas dataset. Country boundaries are drawn as individual path elements, and hovering highlights the selected country in cyan, using CSS transitions on the fill property. The implementation leverages D3 selections and data joins to bind country features to paths, with a static projection of the globe.

KKiran Jyothi Bodduluri-11604571
72% match