D3 viz

100%

✓ Published0🌍 Public

Last edited May 28, 2021

Created on Apr 27, 2021

A force-directed graph displays a network of academic papers, where each node represents a cited work and its size reflects the number of citing patents. The visualization uses `d3.forceSimulation` to position nodes and `d3.drag` for interactive dragging. Yellow circles are rendered as SVG elements within a fixed 600x600 viewport. The data, containing paper titles and patent counts, is supplied locally in the script.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

D3 Tutorial

This example demonstrates a D3.js network graph visualizing a force-directed layout of research papers, with nodes sized by their citing patents count. The chart uses the `d3.forceSimulation` API to position nodes and render them as SVG circles on a 960x500 canvas, with forces for charge and centering. Data is loaded asynchronously from a static JSON file using `d3.json`. The visualization highlights the strongest-cited works through larger radii, making publication impact immediately apparent.

SShivansh Mathur

87% match

Loading thumbnail…

Network

This example visualizes a network of academic citations using D3.js v5 within a Vue framework. A force-directed simulation positions nodes representing publications, with circle size and color mapping to citation counts and group membership, while links show citation relationships with thickness proportional to strength. The visualization uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute layout, rendered as SVG elements. Node and link positions update on each simulation tick, displaying data loaded from a JSON file.

AAlex7722

77% match

Loading thumbnail…

Force-Directed Graph

A force-directed graph shows citation relationships among academic papers on intelligence and race, with nodes representing publications and links indicating citations. The visualization uses D3 v4's `d3.forceSimulation` with link, charge, and centering forces, and renders continuously to a Canvas 2D context. Node positions update on each simulation tick, drawing links as gray lines and nodes as white-stroked circles. Data comes from the embedded `miserables.json` file, which includes paper metadata like authors, year, and citation scores.

MMNoichl

77% match

Loading thumbnail…

Concentric circle force layout graph in D3.v4

This example visualizes a network of research papers on Real-Time Bidding for online advertising, showing papers as nodes and citations as links. The force-directed layout organizes papers into concentric circles by publication year, with more recent papers near the center. Nodes are colored by year and are draggable, with the graph supporting zooming and panning. The visualization uses D3.v4's `forceSimulation` API with `forceLink`, `forceManyBody`, `forceCenter`, and `forceCollide` forces to compute dynamic node positions. It renders nodes and links as SVG elements with animated transitions, and loads paper metadata from a JSON data file. Zoom interaction is implemented via D3's `zoom` object with configurable scale extents.

FFrissAnalytics

77% match

Loading thumbnail…

Untitled

A force-directed graph visualizes patent litigation and licensing relationships among technology companies, with nodes representing firms and links showing suit, licensing, or resolved cases. The visualization uses d3.layout.force to simulate physical forces, positioning nodes and enabling dragging, while SVG circles and text labels display the network. Data from a Thomson Reuters blog post about mobile patent suits drives the layout, with circular areas expanding on mouseover via transition animations. The graph runs in React, leveraging d3.v3 for the force simulation and tick-based position updates.

Ppoppy

74% match

Loading thumbnail…

Plot

This interactive scatter plot visualizes a downsampled subset of citation network data, with each point representing a patent edge across multiple temporal slices. Colors encode different data files, and opacity highlights the selected category while dimming others. Built with React and D3 v5, the visualization uses `Promise.all` with `d3.text` to load CSV data, `d3.scaleLinear` for axes, `d3.scaleOrdinal` and `d3.schemeCategory10` for color mapping, and `d3.zoom` for panning and zooming. SVG rendering includes custom axes, gridlines, and interactive legend ticks.

Eendlesstory

74% match

Loading thumbnail…

D3.js

This example visualizes a force-directed graph using D3.js v7, rendering nodes and edges within an HTML page styled with CSS. It employs `d3.forceSimulation` to compute layout physics, with the simulation updating node positions and drawing them as circles and links as lines onto an SVG or DOM element. The code loads data from an external source and dynamically appends SVG elements via D3’s data join, letting the structure respond to the imported dataset. Written as a minimal React-free setup, it demonstrates core D3 v7 APIs for interactive network visualization.

HHaileabGH

74% match

Loading thumbnail…

timed graph v2

This visualization maps a citation network of psychology publications as an animated force-directed graph. Nodes represent papers, sized by citation count and colored by cluster, while links connect citing works. The y-axis is fixed to publication year, and an animated simulation from d3.forceSimulation positions nodes using link, charge, and center forces. Hovering reveals paper details via a tooltip. Data comes from a local JSON file, rendered as SVG with D3 v4.

MMNoichl

73% match