nstafford

@nstafford·6 public vizzes

Fork of MyMapping - zoom

This example presents an interactive world map built with D3.js v6, displaying country boundaries and labels from the World Atlas TopoJSON dataset. The map supports zooming through `d3.zoom` and mouseover interactions that update an info box with country details, including capital, control, and army counts. Natural Earth projection is implemented via `d3.geoNaturalEarth1` and `d3.geoPath`, with SVG rendering. A game-state array tracks country ownership and military strength, while labels are positioned using `path.centroid` and include a halo effect for readability.

Aug 6, 2021

Loading thumbnail…

threejs_attempt

This example displays a static HTML page with the text “Hello myHTML” and logs “Hello JavaScript!” to the browser console. It uses no data visualization or rendering libraries; instead, it relies on plain HTML, CSS, and JavaScript. The page sets a large font size via CSS and demonstrates basic script execution in Three.js’s absence, serving as a minimal starter template.

Jul 7, 2021

Loading thumbnail…

MyMapping - labels

The map projects the world’s countries using a rotating orthographic projection, with each country rendered as an SVG path and labeled by name. The visualization displays a country’s name, capitol, control, and armies in an info box when hovered. Built with D3 v6 and TopoJSON, the code uses `d3.geoPath` and `d3.geoOrthographic` to draw the globe, while drag handlers rotate the projection and update the labels’ positions via `path.centroid`. Country data originates from the world-atlas countries-110m TopoJSON file.

Jun 29, 2021

Loading thumbnail…

Fork of d3map

This interactive globe visualizes country-level data from a TopoJSON world atlas. Users can drag the globe horizontally to rotate it, and hovering over a country updates an information panel showing its name. Built with d3-geo projections and d3-drag, the visualization uses an orthographic projection rendered as SVG paths, with d3.geoPath generating the country outlines. The rotation logic is computed directly from mouse coordinates rather than using versor-based dragging.

Jun 23, 2021

Loading thumbnail…

d3map

This example draws a simple cartoon face using D3 v6, constructing a yellow circular head with black eyes, eyebrows, and a mouth. The code uses d3.arc to create the mouth path and shows mouseover and mouseout console events on that shape. The eyebrows animate by transitioning their group’s transform attribute between two positions over 500 milliseconds each. All shapes render as SVG elements, positioned relative to the center of the 960 by 500 pixel viewport.

Jun 10, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello myHTML” at a massive 12em font size, centered on the page. It is a minimal HTML starter that demonstrates the basic structure of a web page with inline CSS styling and a small JavaScript snippet. The script logs “Hello JavaScript!” to the browser console, but does not perform any data manipulation or visualization. The page relies solely on native HTML, CSS, and JavaScript, using no external libraries or APIs. The rendering approach is straightforward static HTML with no dynamic data source.

Jun 4, 2021