Skip to main content
SimilarExport ZIP
100%

Fork of Let's make a face with D3.js!

✓ Published2🌍 Public
Bbrett@cloudaccelerator.co
Last edited Mar 27, 2024
Created on Mar 26, 2024

A force-directed graph of the Les Misérables character network is constrained to a movable rectangular boundary. Using the WebCola library with D3.js v4, nodes and links are rendered as SVG circles and lines, with a toggleable lock button that fixes boundary corner weights to prevent nodes from escaping. The layout respects separation constraints, keeping all nodes within the page bounds while allowing interactive dragging.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Let's make a face with D3.js!

This example builds an interactive OS-threat dashboard using D3.js v4 and WebCola, visualizing a force-directed network graph of characters from *Les Misérables*. Users can toggle between sightings, tasks, impacts, events, and company/me views, and switch node shapes between rectangular, round, or empty styles. The graph is rendered as an SVG, with the layout constrained by the WebCola library to manage node positions and minimize overlap. Bootstrap styles provide the UI chrome, while a tooltip div offers contextual feedback. The visualization demonstrates how D3 can integrate with external layout libraries and dynamic UI controls to create a functional, multi-view network exploration tool.

Bbrett@cloudaccelerator.co
88% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates a force-directed graph of character relationships from *Les Misérables*, rendered as an interactive SVG network. The visualization uses `d3.forceSimulation` to position nodes and links, with drag support via `d3.drag` for user manipulation. Node colors encode character groups using `d3.scaleOrdinal` and the `d3.schemeTableau10` palette, while link weights reflect connection strength. The code loads data from a local `miserables.json` file and builds the visualization with D3 v5's selection and join methods.

SShengHao-Shi
85% match
Loading thumbnail…

Fork of Network

This example visualizes a small network of characters from *Les Misérables*, colored by group and connected by a single link. Using D3.js v5, it loads data from a JSON file and applies a force-directed layout via `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`. Circles represent nodes in SVG, positioned dynamically on each simulation tick, while lines show edges with stroke width proportional to link value. Node colors come from a `d3.scaleOrdinal` with `d3.schemeCategory10`.

SSnapika
80% match
Loading thumbnail…

Fork of Force Directed Graph Starter

This example shows a force-directed network graph of characters from Les Misérables. The SVG renderer uses d3.forceSimulation, d3.forceManyBody, d3.forceLink, and d3.forceCenter to compute the layout, with nodes and links drawn as circles and lines. The data, consisting of 77 character nodes grouped by affiliation and weighted links between them, is hardcoded in the script and fully visible in the source.

OOwen Thiele
80% match
Loading thumbnail…

Unconstrained WebCola!

This example uses WebCola to perform force-directed graph layout on the Les Misérables character co-occurrence dataset, rendered as SVG circles and lines. The nodes are colored by their group assignment using `d3.scaleOrdinal` with `d3.schemeCategory20`, and link thickness varies with edge weight. Clicking a node fixes it in place while the layout continuously updates, with positions driven by WebCola’s `cola.d3adaptor` and `on("tick")` callback using `d3.json` to load the graph data.

Bbrett@cloudaccelerator.co
80% match
Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in *Les Miséables*, using a physical simulation to position related characters closer together. Based on data compiled by Donald Knuth, the layout applies charged-particle repulsion and spring-like link forces, with node color encoding community group and link thickness reflecting co-appearance frequency. The D3 v4 implementation precomputes the layout over 300 ticks, then renders static SVG circles and lines, with drag-and-drop interaction to explore the network.

GGerardoFurtado
79% match
Loading thumbnail…

d3-force

A force-directed graph of the Les Misérables character co-occurrence network, rendered as SVG circles and lines. Node color encodes each character's group, derived from the number of links in the data.tsv file, which contains 410 nodes and 2,399 edges. d3.forceSimulation with forceLink, forceManyBody, and forceCenter drives the layout, while d3.drag enables node repositioning. A d3.zoom handler applies pan and zoom transforms to the entire graph.

Cchungmin-yu
79% match
Loading thumbnail…

Fork of Network Visualization

This network visualization displays the character relationships from Les Misérables, with nodes colored by group type and a legend mapping categories like Document, Email, and Person. It uses d3.forceSimulation with link, charge, and center forces to position the nodes, while links are rendered as lines whose stroke width reflects edge weight. The SVG is built using d3.v5, with nodes and links appended as circles and lines, and a custom colorLegend function creates the legend using d3.scaleOrdinal with the schemeCategory10 palette.

Hherbertamakloe
79% match