timed graph, psychology on race

100%

timed graph, psychology on race

✓ Published0🌍 Public

Last edited Feb 2, 2018

Created on Dec 17, 2017

A timed force-directed graph visualizes the temporal unfolding of a controversial debate on race and IQ in psychology. Nodes, colored by cluster, burst outward from a horizontal time axis, their vertical position fixed by publication year while the simulation, driven by `d3.forceSimulation` with link, charge, and center forces, positions them horizontally. Hovering a node reveals a tooltip with its label, title, source, and year. The visualization renders as an animated SVG using data from `race.json`.

AI-generated description

The temporal unfolding of a controversial debate in psychology. Note I certainly do not condone all the positions uttered.

gpl-3.0 Licensed

Similar vizzes

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

76% 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

75% match

Loading thumbnail…

timed graph v2

This interactive network visualization displays citation relationships between academic papers in clinical psychology, with publications positioned along a timeline based on publication year. Circles represent individual papers, with size corresponding to citation count and color indicating cluster membership, while connecting lines show citation links and their temporal gaps. Users can hover over nodes to view detailed paper information and drag nodes to rearrange the layout. The visualization uses d3.forceSimulation for the physics-based layout, d3.scaleTime for the chronological axis, and d3.scaleOrdinal for cluster coloring, rendering as animated SVG elements with tooltip interactions.

MMNoichl

74% match

Loading thumbnail…

Bounded Force Layout - Columns by Depth

This example visualizes energy flows between sources and uses as a bounded force-directed layout, with nodes arranged in vertical columns based on a cluster depth value. The graph shows citation relationships among publications on race and IQ, using circle nodes and connecting lines rendered in SVG. Built with D3 v3 and Vue, the code uses `d3.layout.force` with a custom tick function that constrains node positions within the SVG bounds and adjusts vertical placement by cluster. A simple D3 tooltip appears on mouseover, and the data comes from a local `graph.json` file.

MMNoichl

74% match

Loading thumbnail…

Force Directed Graph

This visualization employs a force-directed graph to display a dataset of 410 linked nodes, loaded from a TSV file. The d3-force simulation, using `forceSimulation`, `forceLink`, and `forceManyBody`, positions the nodes with link thickness proportional to edge weight. Nodes are colored by a group value, and interactive dragging with `d3.drag` and zooming with `d3.zoom` are enabled. A separate, non-interactive adjacency matrix, built with `d3.select` and `reorder`, is shown but not linked to the graph.

Aa04775

67% match

Loading thumbnail…

Gist f52706b726949be61205fcf8133a66e7

This example visualizes a dynamic network of interconnected nodes, showing how forces shape a cluster’s layout over time. It uses a force-directed simulation via `d3.forceSimulation` with charge, link, and collision forces to position nodes, while links are drawn as straight lines. The rendering relies on SVG paths updated each tick, and the code includes a custom drag interaction using `d3.drag` to let viewers manually reposition nodes. The underlying data structure is a small JavaScript array of objects representing nodes and links, likely sourced from a static inline dataset. The visualization emphasizes real-time interaction rather than geographic or spatial data, focusing on emergent clustering behavior.

11wheel

67% match

Loading thumbnail…

Gist e899f735aa7a47c42f7b2604c713bfef

This example visualizes a force-directed graph using D3’s `d3.forceSimulation` to position nodes, with links drawn as SVG lines. The rendering approach uses Canvas `getImageData` to sample pixel data for a custom background effect, while Three.js handles 3D-like sphere rendering for node highlights. The code reads node and edge data from an embedded JavaScript object, and the simulation runs continuously with a `tick` handler updating node positions. A dropdown menu lets users filter the graph by cluster, though the filtering logic only updates node visibility without altering the underlying simulation forces.

AAlexDaGr8

67% match

Loading thumbnail…

Gist 3e83522b4fd1d103c56977dac9442a3e

This example visualizes a force-directed network graph, showing nodes and edges arranged in a cluster layout. It uses D3’s `d3.forceSimulation` to compute node positions and `d3.forceLink` for edge constraints, rendering the result as an SVG. The graph data is generated locally in the code via a helper function that builds node and link arrays, with node colors reflecting a categorical scale. The visualization updates positions on each simulation tick, producing an interactive, animated network layout.

MMistyBlunch

66% match