xie ming better

@1998x-stack·6 public vizzes

Fork of arrow

This interactive network graph visualizes trade relationships between countries, showing nodes sized by country group and colored by category. The visualization uses d3.forceSimulation with link, charge, collision, and center forces to position connected nodes dynamically. Links are displayed with arrowheads and stroke widths proportional to trade weight, while node labels show country names. Users can drag nodes to rearrange the layout, triggering the simulation to recalculate positions. The example loads JSON data containing node attributes and weighted links rendered as SVG lines and circles via D3 v6.

Aug 3, 2023

Loading thumbnail…

Fork of Network graph

This network graph visualizes Facebook friendships between countries in Southern Africa, using a node-link diagram where circles represent countries and connecting lines represent relationships weighted by their strength. The visualization is built with D3.js (v4) and uses a force-directed layout via `d3.layout.force()` with gravity, distance, and charge parameters to position nodes. The SVG is rendered with circles and text labels, with node size and color determined by the group field in the loaded JSON data, while link thickness scales with the `weight` attribute. The algorithm updates node positions on a tick event, allowing for interactive dragging of nodes.

Oct 7, 2022

Loading thumbnail…

Fork of Network Graph

A force-directed network graph depicts relationships between murder case entities, including victims, suspects, and a witness. Nodes are positioned by a physics simulation using the D3.js `d3.layout.force()` API, with link stroke width scaled by the `weight` attribute from the JSON data. The SVG output uses `d3.select` and `.append` to render purple links and yellow circles, with drag interaction enabled via `force.drag`.

Sep 28, 2022

Loading thumbnail…

Fork of arrow

This is a force-directed network graph built with D3 v6, visualizing trade relationships between countries in 2014. It shows nodes representing countries, colored by group, and links weighted by trade volume, with arrowheads indicating flow direction. The visualization uses `d3.forceSimulation` with link, charge, collision, and center forces, and renders as an SVG. Data comes from a JSON file containing country nodes and weighted links. The graph is interactive, allowing users to drag and reposition nodes within the network layout.

Sep 28, 2022

Loading thumbnail…

Fork of Network

A force-directed network graph visualizes the relationships between characters from Les Misérables, with nodes colored by their categorical group (Document, Email, Person, Location, etc.). The simulation uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while SVG circles and lines render the graph. A color legend generated via `colorLegend` maps group categories to `d3.scaleOrdinal` colors. Data is loaded from a JSON file.

Sep 28, 2022

Loading thumbnail…

Fork of arrow

This visualization shows a force-directed network graph where nodes represent countries involved in migration or refugee flows, with link weights indicating the strength of connection. The node color reflects a measure such as PageRank, and the graph can be interactively dragged. The visualization uses the D3.js library, specifically its `d3.forceSimulation` and `d3.drag` APIs, running on SVG. Data is loaded from a JSON file, with links and nodes positioned dynamically by the simulation. The code also defines a marker for line endpoints, and includes a stylesheet for visual styling.

Sep 25, 2022