Skip to main content
SimilarExport ZIP
100%

The colors used in http://labratrevenge.com/pdx

✓ Published0🌍 Public
CCaged
Last edited Jul 16, 2013
Created on Jul 16, 2013

This example visualizes the color palette from the website labratrevenge.com/pdx as a network of nodes. It shows how each hex color connects to its nearest visual neighbors in a force-directed layout, using `d3.forceSimulation` to position the nodes and `d3.drag` for interaction. Each circle’s fill is the exact color it represents, and edges are drawn as simple links between similar hues. The data is a hardcoded gist by Caged, listing thirteen hex values. The rendering uses SVG with `d3.select` and `d3.forceLink` to compute the linking, while node opacity and stroke come from standard SVG attributes. No external libraries beyond D3.js are used.

AI-generated description

Similar vizzes

Loading thumbnail…

Organization Graph Diagram part 5 (colors +)

This example visualizes an organizational network as a force-directed graph with colored clusters. Four main nodes, each in a distinct color from a paletton.com-generated palette, connect to child nodes and numerous leaf nodes; links between main nodes share the source node’s color. The SVG rendering uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position circles and lines, with labels displayed at each node. The `colors.js` and `data.js` modules define node sizes, link distances, and the hierarchical structure.

Ee-ines
75% match
Loading thumbnail…

8

This example presents a force-directed network graph where circular nodes, colored teal and labeled with text, are connected by light-gray links. The layout is computed using `d3.forceSimulation`, with `d3.forceLink` for edges, `d3.forceManyBody` for repulsion, and `d3.forceCenter` to keep the graph centered. Node positions update on each simulation tick, adjusting the circle and label coordinates via `attr`. The data is loaded as JSON from a GitHub gist, and the visualization is rendered as an SVG inside a React-prepared HTML page using D3 v4.

Hharoldle
75% match
Loading thumbnail…

Gist 05ff2219cb2cc463ad1612e8a501c400

This visualization uses a force-directed simulation to show a network of interconnected nodes, with each node represented as a colored circle and links drawn between related points. The code relies on `d3.forceSimulation` and `d3.forceLink` to compute the layout, while `d3.drag` enables user interaction to move nodes. A canvas element renders the graph, with the simulation updating positions each tick. The data appears to be a small custom-generated dataset of nodes and edges, with node colors mapping to distinct groups, and the visualization does not include any external data source or geographic rendering.

MMistyBlunch
74% match
Loading thumbnail…

Untitled

This example visualizes the 148 CSS named colors as points positioned by their RGB values, with the color of each point matching the named color it represents. Using D3’s `d3.forceSimulation`, the points are arranged in a loose cluster, while a label appears on hover to identify the color’s name. The data is parsed from a CSV file listing color names and hex codes, with the background and interactions powered by D3 selections and event handlers. The layout is computed entirely in the browser, offering a playful, exploratory map of the color space.

NNathannous
74% match
Loading thumbnail…

Gist 021802844523c89a6e3f2aa959bc8421

This visualization uses D3.js to simulate a force-directed network layout, drawing nodes as circles connected by curved links. The code employs `d3.forceSimulation` to compute positions and velocities, with link distances tuned by the `distance` accessor and repulsive forces via `forceCollide`. It renders onto an HTML canvas using the Canvas API, and the animation loop runs continuously via `requestAnimationFrame`. The data is hardcoded in a variable named `data`, containing node and link arrays, but no external dataset is loaded; the example focuses on demonstrating a custom force layout with adjustable parameters.

MMbrownshoes
73% match
Loading thumbnail…

D3 Force Simulation

This example shows a force-directed layout with 100 nodes and 100 randomly generated links rendered as circles and lines in an SVG. The code creates node positions using `Math.random()` and defines link source/target pairs randomly, but it does not run a force simulation or draw the links. It uses D3 v4 to bind data and append circle elements with a steelblue fill, sized at a radius of 3.5 pixels each.

CCarlosACalvo
73% match
Loading thumbnail…

Network Practice

This example visualizes a force-directed network of 11 sites and 37 links, with line thickness indicating link weight. Circles represent nodes at fixed positions, while links connect them according to the data. The visualization uses D3 v5’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to compute layout, and renders nodes and links as SVG circles and lines. A color scale is defined but not applied, as nodes use default fill. Data comes from a local JSON file.

AAbigaily823
73% match
Loading thumbnail…

Untitled

This example presents a small force-directed network graph with six nodes labeled A through F and six weighted links. Node color is a uniform olive, while link thickness reflects the numeric “value” assigned to each connection. The underlying data, loaded from a JSON file, includes additional attributes like gender and occupation for each node, though these are not visually encoded. The visualization uses d3.forceSimulation with link, charge, and center forces, and supports interactive dragging. Node positions are updated on each tick, with SVG circles and text labels rendered through D3’s data join.

HHeide
72% match