test_echarts

100%

✓ Published0🌍 Public

Last edited Apr 17, 2021

Created on Apr 17, 2021

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.

AI-generated description

Try to replicate this figure.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This visualization displays the character network from Victor Hugo's *Les Misérables*, with nodes representing characters and curved links showing their relationships. The graph uses ECharts 5.2.1, loading the JSON data via jQuery's `$.getJSON` from the ECharts examples repository. It applies a force-directed layout with `layout: 'none'` to position nodes, colors links based on their source node via `lineStyle: { color: 'source' }`, and enables interactive roaming and adjacency highlighting on emphasis. Node labels appear only for prominent characters with larger symbol sizes.

RRivaan

80% match

Loading thumbnail…

Untitled

This example visualizes the character co-occurrence network from *Les Misérables* as a force-directed graph. Nodes represent characters, colored by group, with links sized by interaction weight. The visualization uses D3 v4’s `d3.forceSimulation` with link, charge, and center forces to position elements, while SVG circles and text render the nodes and labels. Data loads from a local `miserables.json` file, and nodes support dragging via `d3.drag`.

NNathannous

76% match

Loading thumbnail…

test multi-effect

This interactive network diagram displays the character relationships from Les Misérables using a force-directed layout, with nodes colored by group and link thickness encoding connection weight. Hovering over a node highlights it and all its direct neighbors with a black stroke, making local connections immediately visible. Built with d3.v4, the visualization uses `d3.forceSimulation` with link, charge, and center forces, `d3.drag` for node repositioning, and SVG circles and lines for rendering. The data comes from the bundled `miserables.json` file, while the hover effect is implemented by querying SVG elements by their generated `id` attributes.

BBrunoDumas

75% match

Loading thumbnail…

Les misérables (graphe)

This D3.js force-directed graph visualizes the character interactions in Victor Hugo’s *Les Misérables*, using a JSON dataset of nodes (characters) and weighted links (co-appearances). The SVG rendering uses `d3.forceSimulation` with link, many-body charge, and centering forces to position nodes, while node fill colors are assigned by categorical group via `d3.scaleOrdinal`. Link stroke-width encodes interaction strength, and nodes are draggable, with a tooltip showing each character’s name.

JJulesSauvinet

75% match

Loading thumbnail…

Untitled

This example visualizes the character co-occurrence network from Victor Hugo’s *Les Misérables* as an interactive force-directed graph. Nodes represent characters, colored by group, while links show relationships with thickness scaled by connection weight. The visualization uses D3 v4’s `d3.forceSimulation` with link, charge, and center forces to position elements, and `d3.drag` enables node dragging. Rendered in SVG, it labels each node with the character’s name and includes hover tooltips. Data comes from the bundled `miserables.json` file.

NNathannous

74% match

Loading thumbnail…

Untitled

This example shows a force-directed network graph of character co-appearances in Les Misérables, with curved links connecting nodes. The visualization uses D3 v4’s `d3.forceSimulation` to compute node positions and `d3.drag` for interactive dragging. Each original link is split into two straight segments through an intermediate node, and `path` elements with quadratic Bézier curves (`S` commands) render these bilinks as smooth arcs. Node colors are assigned by group using `d3.scaleOrdinal` with `d3.schemeCategory20`, and the data comes from the included `miserables.json` file, rendered as SVG.

RRivaan

74% match

Loading thumbnail…

Untitled

A force-directed network diagram visualizes character relationships from Les Misérables, with nodes representing characters and curved links indicating interactions between them. The graph uses d3.forceSimulation with link, charge, and center forces to position elements, while zoom and drag interactions enable exploration. The code loads miserables.json data and renders the network as SVG, assigning colors by group membership and using intermediate nodes to create curved edge paths.

JJoker-tr

74% match

Loading thumbnail…

Graph Demo

This interactive graph visualization displays the character relationships from Les Misérables as a node-link diagram. Users can switch between Force Directed, Spring, Circle, and Hierarchy layouts, and adjust the rendering scale. Built with the HPCC Platform’s `hpcc-viz` library, it uses `Graph`, `Vertex`, and `Edge` objects to map characters and their connections, with color-coded groups and random annotation icons. The example showcases the library’s interactive capabilities, including highlight on hover and layout options.

GGordonSmith

74% match