EuroVis 2019 Twitter interaction network

100%

EuroVis 2019 Twitter interaction network

✓ Published0🌍 Public

Last edited Jun 12, 2019

Created on Jun 12, 2019

This interactive node-link diagram maps the Twitter interaction network around the EuroVis 2019 conference, where each node is a user and links represent retweets, replies, or quotes between them. Node color intensity reflects tweet activity, with darker nodes indicating users who tweeted more using the #EuroVis hashtag. The visualization combines two force-directed layout algorithms: it first applies Random Vertex Sampling from d3.forceManyBodySampled() for a fast initial layout, then refines it with 10 iterations of the Barnes-Hut simulation from d3.forceManyBody(). Rendered with D3 v5 as an SVG, this example highlights a hybrid approach to scalable network layout. Data is sourced from a gist by FrissAnalytics and is available under a BSD-3-Clause license.

AI-generated description

This node-link diagram shows the Twitter users who used the #EuroVis hashtag during EuroVis 2019. If a user retweeted, replied, or quoted another user's tweet, there is a link connecting them. Nodes with darker colors had more #EuroVis tweets.

This example shows how to combine the Random Vertex Sampling algorithm from d3.forceManyBodySampled() with the Barnes-Hut algorithm from d3.forceManyBody(). The example first computes a fast layout using Random Vertex sampling, and then runs 10 itereations of the Barnes-Hut algorithm to refine the layout.

More information about the algorithm is available in the blog post.

forked from <a href='http://bl.ocks.org/rpgove/'>rpgove</a>'s block: <a href='http://bl.ocks.org/rpgove/e66f1d921718813ecf507178c7dc8d12'>EuroVis 2019 Twitter interaction network</a>

bsd-3-clause Licensed

Similar vizzes

Loading thumbnail…

A8 - Node-Link with Force Directed Layout

This visualization shows the Advogato social network’s 1,000-member connection structure as a node-link diagram, with gray lines representing edges and green circles for nodes. Using D3 v7’s `d3.forceSimulation`, it applies `forceManyBody` for repulsion, `forceLink` for edge spacing, and `forceCenter` for layout, updating positions via the simulation’s tick event. The SVG renders at 3500×2500 pixels, requiring zoom or scroll to view fully, and loads data from a CSV in the Network Data Repository.

AAndrew Blakeslee Moore

72% match

Loading thumbnail…

retweet

The visualization displays a retweet network from the Higgs dataset, showing nodes as orange circles connected by weighted links. Using D3 v6 and Canvas rendering, the force-directed layout applies forceSimulation with forceX, forceY, forceCollide, forceManyBody, and forceLink to position nodes. Users can drag nodes, which updates their fixed positions during the simulation. The network demonstrates relationships between users, with node proximity and link weights revealing interaction patterns.

SSlimaneel

71% match

Loading thumbnail…

d3 node-link diagram (stanford dataset)

This interactive node-link diagram visualizes the Twitter interaction network of the 117th United States Congress, using data from the Stanford SNAP repository that records retweets, replies, and mentions among members. The visualization displays nodes as circles representing congress members and edges as cyan lines representing interactions. Built with D3 v7, the layout uses physics-based simulation via `d3.forceSimulation`, including `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes. Hovering over a node triggers a tooltip showing the node ID and its neighbors, while `d3.drag()` allows users to reposition nodes interactively with SVG rendering and CSS transitions.

AAndrew

71% match

Loading thumbnail…

Gist 7f84369bd0c0b467d6b0

This visualization uses a force-directed graph layout implemented with D3’s `d3.forceSimulation` to position nodes connected by links, representing a network of relationships from an underlying dataset. The scene renders on an HTML5 Canvas, with the simulation’s tick events redrawing the nodes as colored circles and the edges as lines. A zoom interaction is added via `d3.zoom`, applying a transform to the canvas context to allow panning and scaling of the graph. The example demonstrates a typical static network diagram without additional interactivity beyond zoom and drag, relying on the force simulation to settle the layout.

MMbrownshoes

70% match

Loading thumbnail…

D3 Node-Link Diagram

This example shows a node-link diagram of social network data, using a force-directed layout to position 16 nodes and their connecting links. The visualization uses D3 v7's `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to calculate the layout, while rendering nodes as SVG circles and edges as lines with animated tick updates. Node colors come from `d3.scaleOrdinal` with the `schemeSet1` palette, and hovering a node triggers a tooltip via mouseover events. Data is loaded from a CSV file containing source, target, and link values.

Mmariahdiaz

70% match

Loading thumbnail…

Forces network

This example demonstrates a force-directed network visualization of Twitter connections among Welsh Assembly Members, rendered with D3 v4. Each node represents a politician, colored by political party, while curved, weighted links show the strength of connections between them. The force simulation uses a linear scale to map link weights to link strength, alongside collision, centering, and charge forces to position the nodes. The data is loaded from an external JSON file, and the visualization is drawn using SVG elements, with node labels and styles defined in the HTML.

663anp3ca

70% match

Loading thumbnail…

Fork of Social Network Graph

This interactive network graph visualizes a social network of 10 individuals, mapping friend connections as links between circular nodes. Built with D3 v7 and rendered as SVG, the visualization uses a force-directed layout—though the code shown also includes a click-to-explore prototype where clicking a node swaps the view to a bar chart of related values, with a button to return. Node positions are computed dynamically, and link width encodes relationship strength via the `value` field. The graph is interactive, allowing users to click nodes and explore connections. The single cyan color scale keeps the visual minimal while focusing on network topology.

Hhelen azad

70% match

Loading thumbnail…

networks

This interactive network visualization uses a force-directed layout to display relationships between functional categories, with nodes representing biological functions and links indicating correlations. Users can switch between six pre-loaded datasets and drag nodes after the simulation stabilizes. Built with D3 v3 (d3.layout.force) and rendered as SVG with zoom and pan support, it encodes node size via radius scale and link strength through stroke width, with optional color coding by category or monochrome themes.

11Cr18Ni9

70% match