Skip to main content
100%

Gist f1bf8c3ebae119b50908ee3e14c67bb9

✓ Published0🌍 Public
YYannael
Last edited Nov 6, 2017
Created on Nov 6, 2017

This visualization shows the evolution of a sparse network of points on a sphere, rendered as an interactive 3D globe. It uses Three.js to display the sphere and its points, while d3.forceSimulation computes a repulsive force between the points to distribute them evenly across the surface. The code reads positions from a data file and applies a custom projection to map geographic coordinates onto the 3D sphere. As the simulation runs, the points visibly repel each other and settle into a more uniform arrangement, with the globe rotating slowly to reveal the entire layout.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist fcaa6cc1968b4cd0eac0f15d1f0ff3f4

This visualization maps geographic data onto a three-dimensional globe using D3.js and Three.js. It renders landmasses as extruded polygons via `d3.geoPath` and converts them to Three.js geometry, while a `d3.forceSimulation` drives the rotation of the globe. The example also applies a canvas-based texture through `getImageData` to overlay graticule lines and subtle shading, and it animates the camera with `transition.attrTween` to smoothly orbit the planet. The data comes from a GeoJSON source embedded in the gist file.

YYannael
81% match
Loading thumbnail…

Gist b90900e705a70b8c3a48b3ec6651dc97

This example visualizes a synthetic dataset of points distributed across a Cartesian plane, showing how a force-directed layout positions them relative to one another. The code uses `d3.forceSimulation` with collision and centering forces to compute node positions, then renders the result as SVG circles via `d3.select` and `d3.forceCollide`. The simulation runs in the browser, and the visualization updates in real time as forces settle, with each node’s color and radius set from the generated data. No external data file is loaded; all values are produced programmatically.

PPeleke
76% match
Loading thumbnail…

Gist 74cc046474366d9e416365251f7d6ead

The visualization shows a force-directed network graph of interconnected nodes, rendered with d3.forceSimulation to compute layout physics and SVG for display. It uses d3’s drag and zoom behaviors for interaction, while node positions update via the simulation’s tick handler. The underlying data appears to be pulled from a local JSON file, as indicated by file uploads and Gaia Hub storage references. The code also demonstrates error handling for encrypted content parsing, with a fallback to unencrypted data access.

YYannael
76% match
Loading thumbnail…

Gist ded019fbd2d7ba05c21985f66949a422

This visualization maps a sparse set of point coordinates from a CSV file onto a geographic or spatial canvas, showing the distribution of three numeric attributes (x, y, z) as positioned marks. It uses D3’s `d3.forceSimulation` to lay out the points with a collision-avoidance force, while the rendering relies on D3’s SVG path generation for any underlying base geometry. The data source is a small `points_xyz.csv` file containing an ID and three numeric columns, which the code parses and binds to circle elements. The example demonstrates how to combine force-directed positioning with a fixed spatial reference frame in a lightweight browser-based chart.

TThomasG77
75% match
Loading thumbnail…

Gist 257543a98ae32a2d951e5f3cd5a06979

This interactive visualization simulates a dynamic network of nodes and edges, showing how force-directed layouts settle into a stable configuration. The scene renders a clustered graph where nodes repel and links constrain movement, with subtle visual feedback as positions update in real time. Built with D3.js, the example uses `d3.forceSimulation` and `d3.forceManyBody` to compute physics, while a canvas element draws the animated paths and circles. The code loads a Gist-sourced dataset via a JSON request, and the simulation updates each frame, demonstrating how forces like charge and link distance shape the final network structure.

MMbrownshoes
75% match
Loading thumbnail…

Gist a7d5ced57721ac3f7075bbbbaee32a49

This interactive visualization uses a force-directed simulation to animate a network of nodes and links, showing how connected elements cluster and repel. The code relies on D3’s `d3.forceSimulation` with custom forces for charge, centering, and collision, while link positions update via the simulation’s tick handler. Node rendering uses SVG circles, and the visualization reads its data from an embedded array of node and link objects, with no external data source. The interaction includes drag-and-drop support via D3’s drag behavior, letting viewers move nodes while the simulation continuously recalculates positions.

11wheel
75% match
Loading thumbnail…

Gist 6db8115f185f7e57cb4395da0474fbf6

This example presents an interactive visualization of a network graph, where nodes are connected by curved links and can be dragged by the user. The code builds the layout using `d3.forceSimulation` for physics-based positioning and renders the scene with `d3.select` and SVG elements, including `transition.attrTween` for smooth link animations. It reads a JSON dataset of node and edge data from an external file, and uses `d3.zoom` for panning and scaling the view. The visualization shows how force-directed algorithms distribute connected nodes while user input adjusts the simulation in real time.

11wheel
75% match
Loading thumbnail…

MIT-License

This visualization uses a physics-based simulation to cluster and connect nodes in a network. It shows a dynamic system of points that repel each other while links pull them together, creating an organic, ever-shifting layout. The code leverages d3.forceSimulation to model the forces and d3.geoPath for rendering the curved edges. Built on a gist of public data, the example demonstrates real-time interaction with the simulation, offering a clear view of how force-directed algorithms explore spatial arrangements.

11wheel
74% match