Star Map

100%

✓ Published0🌍 Public

Last edited Sep 30, 2019

Created on Feb 23, 2016

A star map of the Northern Hemisphere renders stars from the Yale Bright Star Catalog as white circles sized by magnitude, with a flipped stereographic projection. A graticule and declination/right ascension ticks provide coordinate context, while hovering over a star highlights it and draws yellow crosshairs through the center using d3.geom.voronoi for hit detection. The visualization uses d3.geo.projection, d3.geo.path, and SVG elements.

AI-generated description

A star map of the Northern Hemisphere using a flipped stereographic projection, showing declination and right ascension. I believe the data is from the Yale Bright Star Catalog, but I got it from Matteo Abrate’s sky map.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Berghaus Star

This visualization displays a world map using the Berghaus star projection, a polyhedral layout that unfolds the globe into a star-like shape with pointed lobes. The map shows landmasses in dark gray, country boundaries as white lines, and a graticule grid, all rendered as SVG. The code uses d3.geo.berghaus, d3.geo.path, d3.geo.graticule, and topojson to load and project world-50m.json data, with a clip path limiting shapes to the sphere.

Mmbostock

76% match

Loading thumbnail…

Star Map

This visualization plots time-series temperature data from the Data Canvas Sense Your City dataset as a smooth, connected line chart. The React application uses d3.scaleTime and d3.scaleLinear to map timestamps and temperatures to SVG coordinates, with d3.line and curveNatural generating a flowing path. A subtle star-map background from a JSON GeoJSON file enhances the visual presentation. The chart includes labeled axes for time and temperature, rendered with custom React components.

JJumblii

69% match

Loading thumbnail…

Embedded Observablehq Stars

An interactive globe displays stars and constellations, rendered as a three-dimensional sphere overlaid with a star map and constellation lines. The visualization embeds an ObservableHQ notebook within a VizHub page, loading the runtime and module through the Observable runtime API and the `Inspector` class. Dragging rotates the globe using versor dragging, a technique that keeps the dragged point under the cursor. The underlying data and rendering rely on Observable's standard libraries, though specific d3 or Three.js calls are not directly visible in the provided code.

RRussell Watson

69% match

Loading thumbnail…

Cylindrical Stereographic

A world map is rendered using the cylindrical stereographic projection, showcasing global landmasses and country boundaries over a graticule grid. The visualization uses the `d3.geoCylindricalStereographic` projection from the d3-geo-projection plugin, with `d3.geoPath` drawing the geographic features. Land areas are filled dark, while country borders appear as white lines, and the sphere outline is traced in black. The map is built from TopoJSON world data loaded via `d3.json`, with geographic features extracted using the `topojson.feature` and `topojson.mesh` APIs.

Mmbostock

68% match

Loading thumbnail…

Stereographic

A world map is displayed using the stereographic projection, showing landmasses in dark gray and country boundaries in white over a graticule grid. The projection rotates the globe by -20 degrees longitude and clips the view to a square. Built with D3 v3, the example uses `d3.geo.stereographic`, `d3.geo.path`, and `d3.geo.graticule`, rendering SVG paths from TopoJSON world data. The graticule is drawn beneath the land and boundary layers.

Mmbostock

68% match

Loading thumbnail…

star circle spin - canvas

Nine red stars orbit a central point on a 500-pixel Canvas, each tracing a circular path while collectively spinning as a group. Built with D3.js v4, the animation uses custom shape elements to store angular state, updating each star’s position every 5 milliseconds. The stars’ coordinates come from a hardcoded SVG path, scaled and offset dynamically per iteration, creating a smooth, rotating constellation effect.

PPatrick Wojda

67% match

Loading thumbnail…

D3 Shapes - Star shaped scatter plot

Six points, plotted along the x-axis from 0 to 500, each render as a hollow, gray star symbol. The visualization demonstrates D3’s `d3.symbol()` generator with the `d3.symbolStar` type and a fixed `size(80)`, applied as the `d` attribute for every SVG `<path>`. All stars share the same path data, and their positions come from a hardcoded `points` array, translated via each datum’s coordinates. The example uses a static SVG container with a `g` element, showing how a single generated symbol can be reused through D3’s data join.

SSubhendu Karmakar

67% match

Loading thumbnail…

Globe Zoom - Animate

A world map rendered with SVG marks a projected globe, where graticules, landmasses, and country interiors are drawn via `d3.geoPath` and `d3.geoGraticule`. Nuclear test explosion sites, loaded from a CSV, are plotted as small circles whose positions are calculated using a Mercator projection (`d3.geoMercator`). The visualization demonstrates how multiple geographic datasets can be overlaid and interactively explored, with tooltips showing each site’s name and coordinates. The implementation uses React for state management and `d3` v3 APIs for map and projection handling.

AAbhishek Singh

67% match