Skip to main content
SimilarExport ZIP
100%

Invitations Links Map

✓ Published0🌍 Public
CCurran Kelleher
Last edited Jun 18, 2016
Created on Nov 23, 2015

This visualization displays a chain of user invitations on an equirectangular world map, with each person represented by an orange dot positioned by their latitude and longitude, and orange lines connecting each invitee to the person who invited them. Built with D3.js v3 and the TopoJSON library, it projects geographic coordinates using `d3.geo.equirectangular`, renders a graticule, land masses, and country boundaries, then overlays the network data loaded from a CSV file (`invitation_chain.csv`). The code demonstrates how to merge geographic and relational data into a single view.

AI-generated description

A visualization of fake data that shows connections between points on a map.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3757119'>Equirectangular (Plate Carrée)</a>

forked from <a href='http://bl.ocks.org/maureentsakiris/'>maureentsakiris</a>'s block: <a href='http://bl.ocks.org/maureentsakiris/14e29858efdd19253787'>Invitations</a>

Built with blockbuilder.org

<!-- Start of SimpleHitCounter Code --> <div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=1980880&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div> <!-- End of SimpleHitCounter Code -->
mit Licensed

Similar vizzes

Loading thumbnail…

Country Centroids on a Map

This example plots the centroids of countries on an equirectangular world map using D3 v3, rendering each centroid as a translucent pink circle. The map displays graticules, land masses, and country boundaries, with centroids computed via `d3.geo.path().centroid()` on TopoJSON features from a world-50m dataset. Users can pan and zoom the entire visualization through `d3.behavior.zoom`. The code also includes an unused CSV file of invitation chains, though the map itself only visualizes geographic centroids.

CCurran Kelleher
71% match
Loading thumbnail…

world Map

This visualization displays an interactive world map using a simple equirectangular projection. Countries are rendered as SVG paths with light green fills and indigo outlines, with hover states that turn them maroon. The map supports pan and zoom interactions. The code uses d3.geoEquirectangular, d3.geoPath, and d3.zoom, loading GeoJSON data from the world-atlas TopoJSON file via topojson.feature.

Mmandadi1999
71% match
Loading thumbnail…

Fork of US Immigrants

This visualization shows a world map rendered with an equirectangular projection, where each country is displayed as a green filled area with black outlines. The map includes a blue sphere backdrop and features a hover effect that changes country fills to orange. Built with D3 v5 and TopoJSON, the code uses `d3.geoPath` and `d3.geoEquirectangular` to project geographic data from the world-atlas 110m dataset. Country boundaries are generated via the `feature` method from TopoJSON, and the SVG output is styled through external CSS.

RReggieW
71% match
Loading thumbnail…

Click to select with D3.js!

This example displays a world map using an equirectangular projection, with each country rendered as a green SVG path with a black stroke. The data is loaded from the world-atlas TopoJSON dataset and converted to GeoJSON features via `topojson.feature`. The visualization relies on D3 v6’s `d3.json`, `d3.geoEquirectangular`, and `d3.geoPath` to generate the map geometry, and appends all paths to the SVG container at once. No click interaction or selection behavior is implemented beyond the title’s suggestion.

LLidiamir
70% match
Loading thumbnail…

An interactive D3 map

This interactive D3 map displays a world map with countries colored pink and overlaid with green-bordered circles, visualizing numerical values from a CSV dataset via a color-coded choropleth. Built with React and D3 v5, it loads GeoJSON topology data from the world-atlas package and uses topojson’s feature and mesh functions to render land and country boundaries as SVG paths, while the data CSV is joined by ISO country codes for the visual encoding.

Nnouralkhoury
70% match
Loading thumbnail…

D3 World Map.js!

This example renders an interactive world map using D3.js and TopoJSON. It displays all countries as green SVG paths on a blue sphere, with countries highlighted in pink on hover. The map uses the `geoEquirectangular` projection and `geoPath` to draw geographic features from the world-atlas dataset loaded via `json`. The code demonstrates basic D3 data joins with `selectAll`, `data`, and `enter`, and applies styling through CSS classes.

RRaja Srinivas Nelluri
70% match
Loading thumbnail…

d3 World Map

This visualization displays a world map using an orthographic projection, with countries rendered as light green polygons that highlight orange on hover. The code loads geographic data from the world-atlas package via TopoJSON and joins it with country names from a TSV file. Using d3.geoPath and d3.geoOrthographic, it draws the globe’s sphere and country boundaries as SVG paths, with tooltips showing each nation’s name via appended title elements. The implementation relies on d3.v5, topojson-client, and a React-friendly structure with Promise.all for asynchronous data loading.

NNoah Weinberg
70% match
Loading thumbnail…

Let's make a face with D3

This example shows a world map rendered from TopoJSON data, with red circles marking port locations from a CSV file. The map uses an equirectangular projection centered on a specific region, and the visualization supports zooming and panning through D3’s zoom behavior. The code uses `d3.geo.equirectangular()`, `d3.geo.path()`, and `topojson.feature` to draw country boundaries, while circles are placed using the projection function on longitude and latitude coordinates. The SVG output is styled with a hidden overflow.

Bbschatzabel
69% match