Urquhart graph of container ports

Urquhart graph

This visualization demonstrates the Urquhart graph, a subset of the Delaunay triangulation, applied to 2,000 randomly generated points. The graph edges are drawn in red over the Voronoi diagram’s gray polygon boundaries. The code uses `d3.voronoi` to compute the Voronoi cells, links, and triangles, then removes the longest edge from each triangle to derive the Urquhart graph. Sites are rendered as black-stroked circles, with SVG paths and lines for the polygons and edges.

76% match

Missions to Mars Urquhart Graph

This interactive visualization maps the locations of Mars lander missions on a globe, overlaying a red Urquhart graph derived from the landing sites’ Voronoi diagram. Moving the cursor selects the nearest mission, causing its Voronoi cell to highlight and radiate green lines outward. The globe is rendered via WebGL with a shader for orthographic projection, using a USGS Viking mosaic texture. The graph is computed with `d3.geoVoronoi`, and the mission data comes from Ryan Hodges’ GeoJSON dataset.

68% match

geoVoronoi Delaunay links and Urquhart graph

One hundred random points on a sphere generate a geospatial Voronoi diagram, with Delaunay links drawn as white lines and the Urquhart graph subset emphasized in bold. The d3-geo-voronoi library computes the tessellation, while d3.geoPath and an orthographic projection render the polygons and links to SVG. Sites appear as open circles. The legend notes the graph distinction.

67% match

via:geojson.io

This visualization maps ship locations from a GeoJSON FeatureCollection, plotting each vessel as a point on a geographic backdrop. It shows the spatial distribution of maritime traffic across various years, with each point encoded by coordinates and labeled with ship name and voyage date. The map is rendered using D3.js, leveraging `d3.geoPath` for map projection and `d3.forceSimulation` to adjust label or point placement, while the raw GeoJSON data is parsed directly. The visualization uses a Canvas-based rendering approach, with `getImageData` potentially used for pixel-level interactions or distance queries.

Assignment 2 6q

This visualization displays a map of Uruguay using a transverse Mercator projection, with each country region filled in red and outlined in black. The map is rendered as an SVG using D3.js version 5 and TopoJSON to decode geographic data from a GitHub gist. Users can zoom and pan the map via the `d3.zoom` interaction, which applies transformations to the map group. Hovering over a region triggers a CSS transition that changes its fill color to maroon, enhancing interactivity.

HHarshiiiiiiiip

Baltic Container Traffic

The visualization displays 2013 container traffic volumes for Baltic Sea countries, sorted in descending order using horizontal bar lengths scaled proportionally to TEU values. Hovering over each bar reveals the country’s exact traffic figure via a title tooltip. The page uses D3 v3 to load CSV data, sort entries, and append SVG rectangles, while the static header and legend are hand-coded SVG polygons and text elements. Data comes from the provided `balticcontainers2.csv` file, with the bar width formula dividing each value by 100,000 and multiplying by 1.33 to fit the chart area.

HHermanniB

Country map + voronoi.find

This visualization uses a Voronoi diagram to divide a world map into regions, each centered on a country's centroid, with the polygons dynamically re-calculated to highlight the spatial relationships between countries. The map is rendered as an SVG using D3 v4, and the Voronoi overlay is generated from the centroids of the countries. The original country shapes are filled in white with black strokes, while the Voronoi cells are drawn as semi-transparent overlays, and the graticule adds a subtle geographic grid. The animation likely involves transitioning between the original country boundaries and the Voronoi cells, or animating the centroids themselves.

Urquhart Force Mesh

A force-directed simulation of 200 points, with the Urquhart graph—a subset of the Delaunay triangulation—drawn as gray links on a canvas. The code uses `d3.forceSimulation` for layout, `d3.voronoi` to compute the Delaunay diagram, and a custom `urquhart()` function to extract the graph by removing the longest edge of each triangle. Canvas 2D rendering shows the moving nodes as black dots. The first node follows the mouse, injecting a small `alpha` restart to keep the network shifting. The data is procedurally generated with `d3.range`.