Spin on sphere

100%

Spin on sphere

✓ Published0🌍 Public

Last edited Apr 17, 2018

Created on Apr 10, 2018

Eight animated table-tennis balls arranged in a four-by-two grid illustrate common spin types from the server’s perspective. Each sphere rotates continuously, with three mutually perpendicular great circles and a red marker showing the spin axis and direction. The visualization distinguishes topspin, backspin, sidespin, corkscrew, and their combinations based on rotation speeds. Built with D3 v3, it uses an orthographic projection (`d3.geo.orthographic`), graticule, and a `d3.timer` loop to update the paths in SVG. Spin values come from a CSV file.

AI-generated description

#Common Table Tennis Spins

####As seen from server's POV.

##Top Row:

####Topspin

Causes ball to jump off of opponents racket, often off the table. Difficult to attack strongly.

Increases downwards G force allowing stronger attacks that still get pulled down in time to hit the table. (i.e. higher arcs)

####Counter-Clockwise Sidespin

Causes ball to curve towards the left. Causes ball to jump towards your righthand side (e.g. setting up forehand)

####Counter-Clockwise Corkscrew

Causes ball to jump towards the left on table contact. Normally minor effect on opponents paddle as major equator of spin faces the sides.

Corkscrew spin is not commonly seen/used.

####Topspin & Counter-Clockwise Sidespin

Common result of a pendulum serve. Common serve deception is backspin as topspin and vice versa resulting in returns that pop high or hit the net.

Adding in sidespin helps disguise amount of back/top spin.

##Bottom Row:

####Backspin

Causes ball to jump downwards from opponents paddle into net. Safely returned with a backspin stroke. Can be attacked with a topspin stroke given enough racket speed. (if racket speed is faster than ball's tangential velocity.)

####Clockwise Sidespin

Causes ball to curve towards the right. Causes ball to jump towards your lefthand side. (e.g. setting up backhand/forehand-step-around )

####Clockwise Corkscrew

Causes ball to jump towards the right on table contact. Normally minor effect on opponents paddle as major equator of spin faces the sides.

Corkscrew spin is not commonly seen/used.

####Backspin & Counter-Clockwise Sidespin

Common result of a pendulum serve. Common serve deception is backspin as topspin and vice versa resulting in returns that pop high or hit the net.

Adding in sidespin helps disguise amount of back/top spin.

forked from <a href='http://bl.ocks.org/dlwjiang/'>dlwjiang</a>'s block: <a href='http://bl.ocks.org/dlwjiang/c8c7aad75d3e7d8b90b8'>Spin</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Spinny

This example visualizes a classic “spinny” loading icon using D3.js version 3. It shows a rotating ring of ten small circles that continuously spin around the center of the screen. The circles are positioned using sine and cosine functions based on a linear angle scale, with their radii varying from larger to smaller around the ring. The animation is driven by `d3.timer`, which updates the rotation attribute of a group element each frame, incrementing the angle by a fixed amount. The visualization uses SVG for rendering and relies on D3’s data join to bind an array of numbers to the circles.

CCurran Kelleher

79% match

Loading thumbnail…

Spinny Globe

A sphere rotates continuously, displaying only the visible front hemisphere through a navigable orthographic projection. The example uses D3’s `d3.geo.orthographic` projection with great-circle clipping and renders land geometries onto a Canvas via `d3.geo.path`. The rotation is driven by a `d3.timer` that updates the projection’s rotation over time. Land data comes from Natural Earth’s world-110m dataset, loaded as TopoJSON.

Mmbostock

77% match

Loading thumbnail…

Spinning Globe

A spinning globe displays the world’s landmasses in an orthographic projection, rotating continuously while its tilt oscillates. The visualization uses D3 v4’s `d3.geoOrthographic()` projection and `d3.geoPath()` to render country polygons from the `world-110m` TopoJSON dataset. A timer updates the projection’s rotation and tilt, redrawing the SVG path each frame to create the animated effect.

CCurran Kelleher

74% match

Loading thumbnail…

Spinning Globe

A dark globe rendered with an orthographic projection spins continuously, its country borders drawn in red against a black background. The animation updates the projection’s rotation each frame via `requestAnimationFrame`. Built with D3 v7, it uses `geoOrthographic`, `geoPath`, and `geoGraticule` to draw the sphere and graticule, while country outlines come from the `visionscarto-world-atlas` TopoJSON dataset processed with `topojson-client`.

LLauren

73% match

Loading thumbnail…

Spinning Globe

A spinning globe rendered with an orthographic projection, showing country boundaries from the visionscarto World Atlas TopoJSON dataset. The view rotates continuously around its vertical axis using `requestAnimationFrame` to incrementally adjust `projection.rotate`. Built with `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule`, the animation highlights the graticule lines, country outlines, and a bold sphere outline as the Earth turns.

CCurran Kelleher

72% match

Loading thumbnail…

Spinning Globe

This example displays a continuously rotating orthographic globe, with landmasses rendered in a light gray and internal country borders drawn as a subtle mesh over a pale blue ocean. The map is built using the D3 libraries `d3.geoOrthographic`, `d3.geoPath`, and `topojson-client`, which fetch and process a world-atlas GeoJSON file from unpkg. Each animation frame slightly decrements the rotation parameter, driving the spinning effect, while the view is initialized to fit the browser window.

SShad Frigui

72% match

Loading thumbnail…

Spinning Globe

A spinning orthographic globe renders world landmasses as gray paths on a blue sphere, with the rotation state controlled externally. Using `d3-geo`’s `geoOrthographic`, `geoPath`, and `geoGraticule`, the visualization fades in the sphere outline and country features from topoJSON data fetched from the Visionscarto world atlas. The code supports a `requestAnimationFrame` loop that decrements the longitude on each frame, though it is initially disabled, and the sphere’s rotation is manually adjustable via the `rotation` state.

SShad Frigui

72% match

Loading thumbnail…

Spinning Globe

A world map spins continuously to show all continents and the graticule grid, rendered as an orthographic projection that creates the illusion of a rotating globe. The code uses `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule` to draw the sphere outline, graticule, and country borders, with data loaded from the visionscarto world-atlas TopoJSON file via `topojson-client`. Animation is driven by `requestAnimationFrame` in React, updating the projection’s rotation array each frame.

Sstchiang

71% match