Satpreet Makhija

@SatpreetMakhija·8 public vizzes

Fork of React + D3 Hooks template

This example shows a scatterplot of students' eye colors, encoded as colored circles positioned by their red and green color components, with circle radius representing the blue component. The visualization loads JSON data from a GitHub gist and renders with React and D3 v5, using React hooks such as `useRef` and `useEffect` to integrate D3's data-join and transitions. Circles initially appear at raw coordinates, then animate to scaled positions via `d3.scaleLinear`, `transition.attr`, and `d3.easeBounce`. The D3 selection is made on a React-managed `<g>` element, demonstrating hybrid React-D3 component composition.

Jun 15, 2021

Loading thumbnail…

Fork of Knowledge Graph

A network visualization shows the components of a robot system, with nodes representing named services like AGGR and ELIG, colored by team using a d3.scaleOrdinal with a custom range. Links depict workflow transitions, labeled by type, and rendered as SVG lines with arrowhead markers defined in a defs element. The layout is created with D3 v5, and the code sets up a force simulation implicitly through pre-defined coordinates, though it primarily relies on manual positioning within a subgraph area. Arrow markers use an SVG path for the arrowhead.

Jun 15, 2021

Loading thumbnail…

Fork of Interactive Force Directed Layout

This example demonstrates an interactive force-directed layout where users can push and pull nodes within a continuously updating graph structure. The visualization uses the GoJS library, specifically a custom `ContinuousForceDirectedLayout` that reuses its layout network for efficiency while allowing selected nodes to remain fixed during simulation. Nodes are rendered as labeled circles with directed links, and dragging a node triggers incremental layout updates through the `SelectionMoved` event and invalidated layout calls. The diagram includes adjustable spring length and electrical charge parameters to control node spacing and repulsion.

Jun 15, 2021

Loading thumbnail…

Fork of Interactive Force Directed Layout

An interactive force-directed graph demonstrates a continuous layout algorithm where users can push and pull nodes, with selected nodes remaining fixed while others reposition. Built with the gojs library (go.ForceDirectedLayout), the diagram updates in real-time during dragging by invalidating the layout and reusing a cached network. Nodes and links use custom templates for shapes, labels, and arrowheads, while the drag tool triggers layout recalculation on mouse movement.

Jun 15, 2021

Loading thumbnail…

Fork of Interactive Force Directed Layout

This example shows an interactive force-directed network layout where users can push and pull nodes around a continuously updating graph. The code uses the GoJS library’s `ForceDirectedLayout` with a custom `ContinuousForceDirectedLayout` subclass that keeps selected nodes fixed while repositioning all others. A `SelectionMoved` event and overridden `doMouseMove` method trigger layout invalidations during drags, and the layout network is cached for optimization. The diagram displays circular nodes with text labels connected by arrowed links, rendered in a web page using HTML and JavaScript.

Jun 15, 2021

Loading thumbnail…

Fork of React Starter

This example displays the text “Hello React!” in large, centered type on a plain white page. It uses the React and ReactDOM libraries to define a simple component and render it into the page’s root element. The component is a static DOM element with CSS styling, showing a minimal setup for a React application without any additional data or interactive behavior.

Jun 15, 2021

Loading thumbnail…

Fork of React Starter

This example displays the static text "Hello React!" centered on a plain web page. It demonstrates the basic setup of a React application by rendering a single component that returns a styled message. The code uses React and ReactDOM, with `ReactDOM.render()` to mount the `App` component into the DOM element with the id `root`, while an external stylesheet sets the font size and alignment.

Jun 15, 2021

Loading thumbnail…

Fork of Force Directed Graph Starter

This force-directed graph example visualizes a small network of three nodes (Alice, Bob, Carol) connected by two links, using a D3 v6 simulation to position the nodes. The SVG rendering shows circles for nodes and lines for edges, which update their coordinates on each simulation tick. The code employs `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` forces to compute layout dynamics, while `selection.attr` updates the circle and line positions in real time.

Jun 15, 2021