Butterflypatch

@Butterflypatch·5 public vizzes

Graph_test

This graph visualization shows the relationships between actors, directors, and films, with nodes representing people and movies connected by directed links that indicate actions like "Acted in" and "Directed." The node size and link thickness vary based on a value attribute, while different colors differentiate node groups. Built with D3.js v6, it uses `d3.forceSimulation` with link, charge, collision, and center forces to position the elements, and renders the graph as an SVG with arrowheads marking link direction. The visualization also supports zooming and panning via `d3.zoom`.

Sep 28, 2021

Loading thumbnail…

D3 Starter - one node one line

This example displays a small directed network of transcription factor genes and their regulatory interactions, rendered as nodes and lines. It uses the `d3.forceSimulation` API to position the ten nodes based on the link data from `tf.json`, and the `d3.select` method to append the SVG elements. The visualization highlights the connectivity patterns among the ENSG identifiers, with a visible self-loop on one node.

Sep 26, 2021

Loading thumbnail…

Untitled

This interactive force-directed graph visualizes relationships between transcription factors (TFAP2A, TFAP2C, ARID3A, KDM5B, and others) using a dataset from the `tf.json` file. Draggable nodes render as circular icons—using Font Awesome glyphs via `d3.select`—differentiated by gender, while links scale in stroke width based on connection value. The visualization is built with React and D3 v4, employing `d3.forceSimulation` with link, charge, and x/y forces, and includes zoom support via `d3.zoom` plus hover tooltips for node details. The code runs in an SVG container with animated tick updates.

Sep 26, 2021

Loading thumbnail…

Knowledge Graph down sized

A downsized knowledge graph visualizes node relationships among teams using a force-directed layout. The d3.forceSimulation drives the positioning of 13 nodes and 29 links, with node colors mapped to team assignments and labels indicating aggregation, assessment, and reporting workflows. The SVG rendering uses d3.scaleOrdinal for color encoding, arrowhead markers on directed edges, and static node placement via subgraph groups. Node and link data are hardcoded in the dataset, with runtime values and link types displayed alongside the graph structure.

Sep 26, 2021

Loading thumbnail…

Fork of Knowledge Graph

A force-directed knowledge graph displays 13 application components as nodes and 29 directed edges as links with arrowheads, grouped by team and colored with a custom ordinal scale. Built with D3 v5, the visualization uses `d3.forceSimulation` to position nodes and SVG lines to render connections. Node labels and link types distinguish relationships such as "Next →" and "Go to →", while an embedded subgraph area and a legend with team names contextualize the network.

Sep 24, 2021