10thblock

@10thblock·8 public vizzes

Fork of Organization Graph Diagram

A network graph diagram visualizes connections between main entities and their associated categories, such as vendors, advisors, and data types, using colored nodes and links. The visualization employs d3.forceSimulation, d3.forceManyBody, d3.forceLink, and d3.forceCenter to compute the layout, with drag interaction enabled via d3.drag. Nodes are rendered as SVG circles with text labels, while links are drawn as lines, all colored according to a palette generated with Paletton. Data is defined programmatically in JavaScript, showing hierarchical and cross-connections among organizational groups.

Mar 16, 2023

Loading thumbnail…

bottom_labels_with_off_set

A force-directed network diagram shows relationships between actors, directors, and films, with arrowhead markers indicating link direction and curved path labels for relationship types. The visualization uses d3.forceSimulation with charge, collision, and centering forces, plus d3.zoom for pan and zoom interactions. Nodes are colored by group using a scaleOrdinal, and drag behavior is implemented via d3.drag. Data comes from a JSON file with links and nodes, rendered as SVG elements. Link labels follow curved paths via textPath, while bottom labels are offset for readability.

Feb 11, 2023

Loading thumbnail…

directional_graph_wo_hierarchy

A directed graph of 13 labeled nodes and 21 links shows a learning-path dependency structure, with nodes grouped into five color-coded categories. The layout is computed live using `d3.forceSimulation` with `forceX` and `forceY` forces to pull nodes toward predefined column positions per group, plus `forceLink` and `forceCollide`. SVG lines with `marker-end` arrowheads render the edges, and the data is imported from a JavaScript module.

Feb 11, 2023

Loading thumbnail…

directional_knowledge_graph

This example shows a directional knowledge graph mapping the hierarchical relationships between computer science concepts, from a root topic down through nested subtopics like information retrieval and speech recognition, with colored nodes indicating depth levels. The visualization builds its layout from a dataset using d3.hierarchy-style traversal functions that compute descendant nodes and link pairs, then renders the structure as an SVG with arrowhead markers on each directed edge. Node colors are assigned via d3.scaleOrdinal, while the graph itself relies on d3.v4’s selection and data-binding methods to position the nodes and paths dynamically.

Feb 10, 2023

Loading thumbnail…

React Icons

Six React icon components visualize Statistical Process Control outcomes: Pass, Fail, and Erratic assurance states, plus High, Low, and Random variation patterns. Icons use SVG circles, letters, and D3 line paths with curveBasis to draw process trends. High and Low icons accept a performance prop for improvement or concern styling. The example renders eight icons at 200 by 200 pixels each, demonstrating reusable, parameterized icon components built with React and D3 for SVG rendering.

Jan 23, 2023

Loading thumbnail…

Fork of Force Directed Graph

This force-directed graph displays relationships between entities like people and animals, with nodes represented as icons and links labeled with a description. The visualization uses D3.js's `forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` forces to lay out the network, while nodes are rendered as SVG images and edges as paths. Data is loaded from `bulkdata.json` (or `data.json`) and processed using `flattenNode` and `flattenLink` utilities to map node keys to indexes.

Jan 17, 2023

Loading thumbnail…

Force Directed Graph with markers and selectable links

An interactive force-directed graph visualizes connections between entities, where multiple links between the same pair of nodes are collapsed into a single red edge labeled with a count. SVG paths with arrowhead markers indicate link direction, and selectable edge labels and circles reveal metadata. The visualization uses d3.forceSimulation for layout, d3.json to load node and link data from bulkdata.json, and d3.forceLink to manage edge distances.

Jan 17, 2023

Loading thumbnail…

Interesting Knowledge

This example shows a force-directed network graph of character relationships from Star Trek: The Next Generation, with labeled edges for actions like "commands", "outranks", and "species." The visualization uses d3.forceSimulation to position nodes and links, with SVG lines and text for edges and labels, plus draggable circles for nodes. Arrow markers indicate directed connections, and the layout adjusts dynamically as the simulation runs.

Jan 17, 2023