Fork of arrow

100%

✓ Published0🌍 Public

Last edited Sep 25, 2022

Created on Sep 25, 2022

Forked from Fork of Project Data Science

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.

AI-generated description

I try to use d3.js a very powerful and simple library for interactive visualization

In this viz, above is the scatter plot to show the relationship between area(m2) and price per m2. the below is the barplot of the number of each house type

We can use the interval select in scatter plot to select the interval(price per m2) and can click the mouse to select the type of house to view in the bar plot

MIT Licensed

Similar vizzes

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.

Xxie ming better

88% match

Loading thumbnail…

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.

Xxie ming better

88% match

Loading thumbnail…

Fork of arrow

This interactive force-directed network chart visualizes relationships between actors, directors, and films. The SVG rendering uses `d3.forceSimulation` from D3 v6, with forces for links, many-body repulsion, collision, and centering. Node color groups distinguish entity types, while draggable circles and link markers show connections. The data is loaded from a local JSON file, and the visualization uses `d3.forceLink` and `d3.forceManyBody` for layout.

Eengalar

83% match

Loading thumbnail…

Fork of arrow

This network diagram displays relationships between actors, directors, and films from the provided JSON data, using colors to distinguish grouped node types. Built with D3 v6, it employs `d3.forceSimulation` with link, charge, collision, and center forces to position nodes, which are rendered as SVG circles and draggable. Links are SVG lines with arrowhead markers, and the code attempts to attach relationship labels via `textpath`, though some rendering tasks remain incomplete. The visualization is centered in a 960x600 SVG canvas.

DDimitri Chauvel

82% match

Loading thumbnail…

Fork of Network Graph

This visualization uses D3’s force simulation to position a network of labeled nodes connected by curved, arrow-tipped edges. The graph is rendered as SVG circles and text, with a semi-transparent node fill and a green background. A d3.zoom behavior allows pan and zoom, while the simulation applies charge, collision, and link forces to lay out the nodes. The code imports node and link data from a dummyData module, and updates the graph on each simulation tick.

Ssrividyamadas@gmail.com

77% match

Loading thumbnail…

Fork of Force Directed Graph

A force-directed graph illustrates links between programming languages, with curved SVG paths and arrowheads indicating directed relationships. Green solid arrows and black dashed arrows distinguish connection types, while node size and color intensity reflect each language’s number of links. The implementation uses `d3.forceSimulation` with link, charge, and centering forces, plus `d3.drag` for interactive node movement. SVG markers (`end-arrow-normal`, `end-arrow-special`) and `d3.interpolateBlues` for node coloring enhance readability. The data originates from an inline array of language pairs, and rendering occurs entirely through SVG elements within a 1200x700 viewport.

Aanching0312.hs11@nycu.edu.tw

77% match

Loading thumbnail…

Fork of Fork of V3 Immigrants flow map between countries

This interactive map visualizes immigrant flows between countries in 2020, rendering a natural Earth projection with country boundaries and curved arcs that represent migration volumes using stroke width and color intensity. Users can click any country to filter and highlight its emigration patterns, with selected regions shown in red and corresponding flow paths displayed in blue. The visualization uses React hooks for state management, d3.geoNaturalEarth1 and d3.geoPath for map rendering, d3.forceSimulation with curveBundle for edge bundling of flow paths, and d3.scaleSequential with interpolateBlues to encode migration numbers. Data comes from CSV files containing migration statistics and country coordinates, with zooming enabled via d3.zoom.

Sserjunfan

76% match

Loading thumbnail…

Fork of Network

A force-directed network visualizes the relationships among countries, movies, directors, and cast members for two sample films, "The Grand" and "Take Care." Using d3.forceSimulation with link, charge, and center forces, the SVG graph positions colored circles, each mapped to a category, with text labels and draggable nodes. The code builds nodes and links from a hardcoded JavaScript array, then updates positions on each simulation tick, while d3.drag enables interactive manual repositioning.

Ssravya7136@gmail.com

76% match