Skip to main content
100%

Atrawog / kartenwerkstatt.at / source / project / globe-geography-class / layers / country-interaction.geojson — Bitbucket

✓ Published0🌍 Public
Aadkatrit
Last edited Jan 13, 2014
Created on Jan 13, 2014

This example displays country interaction data from a GeoJSON file within a Bitbucket repository, showing geographic relationships through a web-based visualization. The code uses the D3.js library with `d3.forceSimulation` to compute node positions and `d3.geoPath` to render country boundaries on a map. It references the `country-interaction.geojson` data source, which likely contains links between nations, and renders the result using Canvas or SVG elements. The visualization combines geographic mapping with network-style force-directed layout to illustrate connections between countries.

AI-generated description

Similar vizzes

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
78% match
Loading thumbnail…

Gist 8393709

This visualization displays a world map rendered from GeoJSON data using D3.js, with country polygons colored according to a categorical scale. The map focuses on named regions and includes a legend and hover interactions, allowing viewers to explore geographic boundaries and associated metadata such as country names and people listed in the properties.

Aadkatrit
74% match
Loading thumbnail…

interactions!

This interactive world map displays country boundaries using a natural Earth projection, with countries rendered in light green and hovering states highlighted in red. The visualization loads geographic data from the world-atlas TopoJSON dataset, merging it with a TSV file to map ISO numeric codes to country names for tooltips. Built with D3 v5, it uses `d3.geoPath` and `d3.geoNaturalEarth1` for projection and path generation, while `topojson.feature` converts the TopoJSON topology into GeoJSON features. The sphere background appears blue, with semi-transparent black strokes outlining each country.

Kkaviya-ds
74% match
Loading thumbnail…

Gist 8393658

This visualization uses a GeoJSON file containing country boundaries to render a map of the world. The geographic coordinates are drawn using a canvas-based rendering approach, with each country's polygon boundaries displayed as vector shapes. The map displays country outlines from the UN-countries dataset, enabling spatial reference for geographic data analysis. The visualization focuses on the geometric representation of national borders rather than thematic data, providing a clean base map for potential further analysis or overlaying of additional information.

Aadkatrit
74% match
Loading thumbnail…

Interactions on a Budget

This interactive map displays world countries from the World Atlas TopoJSON dataset using a natural Earth projection rendered as SVG. The visualization supports zooming and panning through d3.zoom, which applies transform updates to a group element. Countries are drawn with d3.geoPath and feature extraction from topojson, while hovering over any country changes its fill color and reveals the country name via a title tooltip. The styling is handled through CSS classes, with the sphere background and country borders defined in style.css.

Ggoodej
73% match
Loading thumbnail…

Interaction

A D3.js visualization displays a world map using a natural Earth projection, with countries rendered as SVG paths colored in bright green against a dark sea. Hovering a country turns it red and reveals its name via a tooltip. The map is built with `d3.geoPath`, `d3.geoNaturalEarth1`, and `d3.zoom` for interactive panning and zooming, while `d3.tsv` and `d3.json` load country names and geometries. A `topojson` feature layer draws each country, and CSS handles hover styling.

MMatan
73% match
Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows an interactive world map built with D3.js, where hovering over any country turns it red and displays its name as a tooltip. The visualization renders a geo-projection sphere and country boundaries as SVG paths, using the `d3.geoNaturalEarth1` projection and `d3.geoPath` to generate the map geometry. The globe can be zoomed and panned via the `d3.zoom` API, which applies a transform to the grouped map elements. Country names come from a TSV data file joined with GeoJSON topology from the world-atlas package, processed with the topojson `feature` function.

Kkindermannhannah
73% match
Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example displays a world map rendered with SVG paths generated by `d3.geoPath` and the `geoNaturalEarth1` projection, using TopoJSON data from the world-atlas package. Country names are loaded via TSV and added as `<title>` tooltips. The visualization supports pan and zoom through `d3.zoom`, with a `g` element’s transform updated on zoom events. Countries are styled with white fills that turn gold on hover, while the background sphere uses a dark teal fill.

AAbhishek Singh
72% match