noe-d

@noe-d·2 public vizzes

test_echarts

This example shows a character interaction network from _Les Misérables_ as a static graph layout with nodes sized by degree and labeled only when sufficiently large. The visualization uses ECharts' `graph` series with a precomputed JSON layout, applying categories for legend grouping and emphasizing adjacent nodes and thicker links on hover. Curved edges, directional coloring from the source node, and a tooltip complete the interactive view, with loading handled via jQuery’s `getJSON` to fetch the `miserables.json` data.

Apr 17, 2021

Loading thumbnail…

Untitled

This interactive network visualization displays the character relationships from Les Misérables, with nodes representing individuals and links showing their connections. Users can adjust force simulation parameters through control panels, including charge strength, collision radius, link distance, and X/Y gravity forces. The graph renders as SVG circles and lines using D3 v4's force simulation APIs (d3.forceSimulation, d3.forceLink, d3.forceManyBody, d3.forceCollide, d3.forceCenter). Node dragging and tooltips are implemented with d3.drag, while the simulation alpha value is visualized as a dynamic progress bar.

Apr 17, 2021