geoShape

100%

✓ Published0🌍 Public

Last edited Jan 31, 2017

Created on Jan 31, 2017

Six parametric curves define custom shapes on a sphere, each generated by a `d3.geoShape().generator(t)` function. These shapes animate, changing their position, size, and form every 800 milliseconds. The visualization uses D3 v4's `d3.geoPath` with a `d3.geoConicEqualArea` projection to render the sphere and the shapes as SVG paths. The shapes, filled with semi-transparent colors from `d3.schemeCategory10`, demonstrate how the `geoShape` generalization of `d3.geoCircle` creates diverse closed forms.

AI-generated description

A generalization of d3.geoCircle with a parametric curve generator:

d3.geoCircle() == d3.geoShape().generator(t => [Math.cos(t), Math.sin(t)])

TODO: add a .rotate() method, based on:

// rotation
var r = angle * Math.PI/180,
    c = Math.cos(r),
    s = Math.sin(r);
return [x * c - y * s, y * c + x * s];
```

See the code at [github:Fil/d3-geo/geoShape](https://github.com/Fil/d3-geo/commit/cd6ad7a916ed99d5f74bd6004cd9ad66a67a6266)

mit Licensed

Similar vizzes

Loading thumbnail…

geoVoronoi circumcircles

This example visualizes the Voronoi tessellation of a sphere using 100 random points, rendered as colored triangles with white links and site markers. Hovering over a triangle reveals its circumcircle, drawn as a semi-transparent circle with dashed rays connecting the circumcenter to each vertex. Built with D3 v5 and the d3-geo-voronoi plugin, it uses d3.geoPath with an Equal Earth projection to draw the geometry in SVG, and d3.geoCircle to construct the interactive circumcircles.

PPhilippe Rivière

76% match

Loading thumbnail…

geoCircle in d3.v4

This example visualizes concentric geo-circles radiating from two fixed points on a world map: the North Pole and Washington, D.C. It uses `d3.geoCircle()` to generate spherical circles at increasing radii, with `d3.geoPath()` and an equirectangular projection to render them as SVG paths. The code draws the circles in red and blue before overlaying landmasses from TopoJSON. It demonstrates how d3.v4’s geographic circle generator computes geodesic rings, with radii ranging from 5 to 85 degrees. The map is rendered at 960×500 pixels using D3’s `d3.geoEquirectangular` projection.

PPhilippe Rivière

76% match

Loading thumbnail…

geoVoronoi polygons()

One hundred random points on a sphere are partitioned into Voronoi polygons using `d3.geoVoronoi`. The orthographic projection, rendered via `d3.geoPath`, displays the colored cells with dark borders and white site markers. A gentle animation rotates the projection continuously by updating the projection’s rotation, redrawing all paths every 50 milliseconds. The example uses `d3.geoOrthographic`, `d3.range`, and `d3.schemeCategory10` for colors, with SVG output.

PPhilippe Rivière

74% match

Loading thumbnail…

geoCircle in d3.v4 (geoOrthographic)

This example visualizes concentric circles radiating from two geographic points—the North Pole and Washington, DC—using a d3.geoOrthographic projection. The circles, generated with d3.geoCircle, are drawn as SVG paths via d3.geoPath, with radii incrementing from 5 to 85 degrees. The map includes land masses rendered from TopoJSON world data, styled with fills and strokes. The code loads d3.v4 and topojson.v1 from CDNs, and the interaction between the circle generator and projection demonstrates how to create geodesic rings on a globe-like view.

PPhilippe Rivière

74% match

Loading thumbnail…

geoVoronoi triangles()

This example visualizes a spherical Voronoi triangulation of 100 random points, with each triangle filled by a random hue and the original sites marked as white dots. The orthographic projection rotates continuously to reveal the globe’s surface. Built with d3-geo-voronoi and d3-delaunay, it uses d3.geoPath and d3.geoOrthographic to render SVG paths, while d3.interval drives the animation by updating the projection’s rotation every 50 milliseconds. The points are generated as a GeoJSON FeatureCollection with coordinates spanning longitude 0–360 and latitude from -90 to 90.

PPhilippe Rivière

73% match

Loading thumbnail…

Shapes

The visualization displays a collection of basic geometric shapes—an ellipse, rectangle, and circle—colored individually and grouped to illustrate SVG styling and transformation. A second group applies a uniform fill and stroke, while a line and an unclosed path demonstrate stroke properties and line joins. The example is built with d3.v5, using the `select` API to target the SVG, and relies on raw SVG elements and CSS classes for rendering, with a fixed viewport enforced by the stylesheet.

Bbakstorage00001

72% match

Loading thumbnail…

geoVoronoi mesh()

This example shows a dynamic Voronoi diagram on a globe, with a mesh of cell boundaries overlaid on a rotating orthographic projection. It generates 100 random geographic points, computes their spherical Voronoi tessellation using the `d3.geoVoronoi` plugin, and renders the resulting polygons and sites as SVG paths via `d3.geoPath`. The animation uses `d3.interval` to rotate the projection over time, continuously redrawing all paths. The code relies on D3 v4, the d3-delaunay library, and custom geo-Voronoi logic, with a light beige sphere and dark gray mesh for contrast.

PPhilippe Rivière

72% match

Loading thumbnail…

shapes

This example demonstrates how to generate a smooth, curving line path in D3 version 7 using the `d3.line` generator with the `curveCardinal` interpolation. The code defines an array of six coordinate points and passes them to the generator, whose output is then assigned to an SVG `<path>` element via the `attr` method. The visualization runs entirely in an SVG renderer with a single path displaying the resulting curved shape on a 2000x2000 canvas. The example highlights a minimal, direct approach to converting raw coordinate data into a visual shape.

HHeet Bhatt

72% match