Kikkolatsch

@Kikkolatsch·9 public vizzes

Untitled

This interactive orthographic globe displays world landmasses, graticules, and city labels with mouse-controlled rotation. It uses D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path` to render SVG, with TopoJSON world-110m data for land. A `places.json` dataset adds point markers and text labels for cities like San Francisco and Kiev. Radial gradients simulate ocean shading, a drop shadow, and globe highlight, while mouse drag rotates the projection and reposition labels.

Aug 5, 2021

Loading thumbnail…

Fork of D3 Course 7: World Map - Rotating Globe

This example displays an interactive orthographic globe that automatically rotates over time. It renders world land masses, country boundaries, and a graticule grid using D3’s `geoOrthographic` projection and `geoPath`. The globe’s rotation is driven by a `d3.timer`, and users can pan and zoom via the `d3.zoom` behavior. Hovering highlights countries with a title tooltip. Data comes from the World Atlas TopoJSON and TSV files, with country names matched by ISO numeric codes.

Aug 5, 2021

Loading thumbnail…

globe-test-02

This globe visualization displays city population data on an interactive, rotatable Earth. It shows both low-resolution landmasses during drag interactions and high-resolution country boundaries when idle, with red circles sized according to population. Built with d3.geoPath and d3.geoOrthographic, it uses topojson for country features and d3-tip for hover tooltips. City data comes from a local monoliths.csv file, while world geometries are loaded from world-atlas packages.

Aug 5, 2021

Loading thumbnail…

Fork of Fork of Monoliths on a Globe

The visualization displays city names and population counts as red circles positioned on an orthographic globe, rendered in SVG. Users can drag to rotate the Earth, which triggers low-resolution country boundaries during motion and high-resolution boundaries when stopped. The code uses d3.geoOrthographic, d3.geoPath, and d3.zoom for interaction, with d3-tip for hover tooltips. Data comes from an external CSV file, while country geometries load from the world-atlas TopoJSON dataset.

Aug 4, 2021

Loading thumbnail…

globe-test-02

This example shows the locations of reported monoliths on a rotating globe, plotting red circles at each site with hover tooltips displaying the location name. Using an orthographic projection with d3.geoPath, the visualization renders country boundaries from the world-atlas TopoJSON datasets, switching between 110m and 50m resolutions during drag interactions. The code leverages d3.drag for rotation, d3.scaleSqrt and d3.schemeSet3 for sizing and colors, and d3-tip for interactive popups. Data comes from the included monoliths.csv file.

Aug 4, 2021

Loading thumbnail…

coldcases-trial

A geo-voronoi diagram maps custom locations from a CSV file as red points on an orthographic globe projection, with semi-transparent polygons filling the space between them. The visualization uses d3-geo-voronoi to compute the Voronoi cells, d3.geoPath for rendering the projected shapes, and d3-tip for hover labels showing name and population data. Country boundaries from the world-atlas TopoJSON are overlaid, and the sphere is filled with a solid blue color. The code also applies hexbin preprocessing and random jitter to site coordinates.

Aug 4, 2021

Loading thumbnail…

D3 trials (fork of Cities on a Globe)

This interactive globe displays cities with populations over 100,000 as red circles, using an orthographic projection with drag-to-rotate and zoom capabilities. The visualization renders country boundaries from TopoJSON world-atlas data (110m resolution while dragging, 50m when stationary) and city locations from a CSV file, with circle sizes scaled by population. Tooltips show city names and populations via d3-tip. The implementation uses d3.geoOrthographic, d3.geoPath, d3.drag, and d3.zoom, filtering out cities on the hidden hemisphere based on their projected coordinates.

Aug 4, 2021

Loading thumbnail…

Fork of D3 map drag demo

An interactive orthographic globe displays country boundaries from the World Atlas TopoJSON dataset, rendered as SVG paths via `d3.geoPath` with a `d3.geoOrthographic` projection. Users drag to rotate the globe, which updates the projection’s rotation based on the drag event’s delta and the current scale. A graticule overlay and zoom via `d3.zoom` complement the interaction, while hovering reveals country names from a TSV lookup table. Clicking a country logs its name to the console.

Aug 3, 2021

Loading thumbnail…

making a map

This example renders a world map using the Mercator projection, displaying country boundaries as SVG paths. The code loads geographic data from the World Atlas TopoJSON file, converts it to GeoJSON using `topojson.feature`, and draws the countries with `d3.geoPath`. The map is created with d3.v7, using a static SVG canvas sized to 960 by 500 pixels. The visualization demonstrates a straightforward approach to converting TopoJSON into a projected map with minimal styling.

Aug 3, 2021