miloparra

@miloparra·9 public vizzes

Fork of Knowledge Graph

A directed graph of software component dependencies arranges labeled nodes like “Aggregation” and “Eligibility” into a force layout, with colored categories distinguishing five teams and arrowheads marking link direction. The visualization includes a subgraph panel and title, while the code initializes `d3.scaleOrdinal` for team colors and uses `d3.select` with SVG elements to draw lines, markers, and text based on hardcoded JSON data of 13 nodes and 29 links.

Jul 7, 2022

Loading thumbnail…

Untitled

This interactive visualization displays a hierarchical tree as a circular packing layout, where nodes are sized proportionally to their values. The code uses the D3.js library (v6.7.0) with its `pack` and `hierarchy` APIs to compute node positions, and transitions to animate changes. Clicking a parent node collapses or expands its children, triggering a re-layout. The SVG renders nodes as circles with labels, and blue directed links with arrowheads connect specific nodes across the hierarchy, based on a `links` array in the data.

Jul 6, 2022

Loading thumbnail…

Fork of Knowledge Graph

This interactive network diagram maps data flows between subscriber and network system components, with nodes grouped by category and colored by system type. The graph uses a force-directed layout via `d3.forceSimulation`, combining `forceY`, `forceX`, and `forceCollide` to organize nodes into vertical bands. SVG lines with arrowhead markers trace directed links, while each edge carries a label along an invisible `path` using `textPath`. Node radius encodes runtime values, and drag behavior allows manual repositioning. The dataset includes 14 nodes and 12 links defined in a separate module.

Jun 23, 2022

Loading thumbnail…

Fork of HTML Starter

This example shows a two-level force-directed graph with outer nodes (A, B, C) connected in a triangular layout, each containing two inner child nodes linked by additional edges. Using D3.js v6, the visualization employs two separate `d3.forceSimulation` instances—one for the larger outer network and another for the inner child connections—both rendered as SVG circles and lines. Pink outer nodes and orange inner nodes are draggable via D3’s drag behavior, with positions updated on each tick event. The code defines static graph data inline and positions elements across the full browser viewport.

Jun 17, 2022

Loading thumbnail…

Network Graph

Three square node types—amber sites, red subsystems, and blue network systems—form a force-directed graph. D3’s `forceSimulation` with `forceManyBody` and `forceLink` positions nodes, using custom distance values for main, child, and leaf connections. Each node renders as an SVG `rect` with rounded corners, labeled by text, and supports dragging via `d3.drag`. Links appear as `line` elements with source-based colors.

Jun 16, 2022

Loading thumbnail…

Fork of Fork of Knowledge Graph

A force-directed knowledge graph maps relationships between actors, directors, and films, with arrowed links showing who acted in, directed, or wrote each movie. Node colors and sizes vary by group, while link thickness reflects connection strength. Built with D3 v6, the visualization uses `d3.forceSimulation` for layout, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` for physics, and SVG markers for arrowheads. Zoom and drag interactions are enabled via `d3.zoom` and `d3.drag`, with relationship labels rendered along curved link paths using `textPath`. Data comes from a local JSON file.

Jun 16, 2022

Loading thumbnail…

Fork of Knowledge Graph

A force-directed knowledge graph maps actors, directors, and films, with arrows on each link indicating the direction of relationships like "Acted in" or "Directed." Node color reflects group membership, while link thickness encodes a numeric value. The visualization uses d3.forceSimulation with charge, collision, and centering forces, plus drag and zoom interaction. It renders as SVG lines and paths, with relationship labels placed along curved paths using textPath.

Jun 16, 2022

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on the page, styled with a 13-em font size and aligned via CSS. The rendering relies on a single `div` element inside an `index.html` file, with plain CSS for layout and no external JavaScript or data sources. It demonstrates the minimal setup for an HTML page, showing how inline styles control typography and alignment without any visualization libraries or frameworks.

Jun 16, 2022

Loading thumbnail…

Network Graph

This network graph visualizes hierarchical relationships between main nodes, child nodes, and leaf nodes using a force-directed layout. The d3.forceSimulation API with forceManyBody, forceLink, and forceCenter forces positions nodes and links, while SVG circles and lines render the graph. Node size encodes hierarchy level, and colors distinguish four main site clusters. Users can drag circles to reposition nodes, with drag interaction restarting the simulation. The data.js file programmatically defines nodes and links, including parent-child connections and inter-site links.

Jun 14, 2022