ii-kc

@ii-kc·4 public vizzes

Fork of Network Graph

A force-directed network graph visualizes links among nodes representing a murder, victims, suspects, and a witness. Node connections use weighted lines, with stroke width proportional to link weight, while circles are colored yellow with purple borders. The code employs d3.layout.force for simulation, loading JSON data via d3.json, and renders SVG elements. Node dragging is enabled using force.drag, and text labels display each node's name. The visualization updates continuously through force tick events, repositioning nodes and links dynamically. The rendering uses SVG for the graph output.

Jul 11, 2022

Loading thumbnail…

Fork of Social Network graph

This visualization shows a small social network of nine named individuals connected by weighted links. The graph uses d3.layout.force to simulate physical forces, positioning nodes with gravity and charge while link thickness reflects each connection’s weight. Nodes appear as green circles with labels, and users can drag them interactively. The code loads data from graph.json, renders everything as SVG, and relies on d3.v4’s force layout and drag behavior.

Jul 11, 2022

Loading thumbnail…

Fork of Fork of Force Network

A force-directed network diagram maps connections between films, actors, and directors. Actors and directors appear as red or green nodes, while films are blue, gold, or orange, with link thickness reflecting relationship strength. The visualization uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position elements dynamically. Data is loaded from a JSON file and rendered as SVG circles and lines. Arrowheads, labels, and drag-and-drop interaction are not yet implemented.

Jul 11, 2022

Loading thumbnail…

Fork of Cars Report

This example demonstrates a simple text-based report of used cars, filtering a hard-coded JSON dataset to display only vehicles priced under $3,000. It shows how asynchronous JavaScript handles data loading with a `Promise` and a simulated delay via `setTimeout`. The code organizes logic into ES modules, using `JSON.parse`, array `.filter()` and `.map()`, and a custom `formatCar` function to compose the final output, which is written to the DOM.

Jul 11, 2022