Fork of gme correlation

100%

Fork of gme correlation

✓ Published0🌍 Public

Last edited Nov 9, 2021

Created on Nov 9, 2021

This interactive arc diagram visualizes correlations between financial instruments, with nodes positioned along a horizontal axis and arcs connecting correlated pairs. The visualization uses D3.js v7 within a React framework, rendering as an SVG. It employs custom D3 modules like `d3.arcDiagram` for layout and `d3.scalePoint` for positioning, while user interactions highlight connections and labels. Data is loaded from a JSON file via `d3.json`, and the code builds both a node list from unique parent and child values, and links with source/target references.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of gme correlation

A correlation diagram displays relationships between nodes as a series of curved arcs, with nodes positioned along a horizontal axis and links drawn as arcs above them. The visualization highlights connections on mouseover by adjusting opacity, stroke width, and label size. Built with React and D3 v7, the code uses `arcDiagram` for layout, `scalePoint` for node positioning, and SVG `path` elements with elliptical arc commands. Data is loaded as JSON from a GitHub gist and rendered as circles with rotated text labels.

TTetiana Humeniuk

89% match

Loading thumbnail…

gme correlation

This circular arc diagram visualizes correlations between financial market entities, showing nodes arranged horizontally with curved links of varying thickness representing connection strength. The interactive visualization uses D3 v7 with React, loading JSON data from a GitHub gist. On mouseover, the selected node and its related links are highlighted, while all other elements are dimmed. The implementation combines React state management via useEffect hooks with D3's selection and data joining APIs, including selectAll, join, and scalePoint for positioning.

MMark Lam

88% match

Loading thumbnail…

Graph Network

This visualization displays a graph network of nodes connected by curved arcs, showing relationships between stock-related entities. Users can hover over nodes to highlight their connections, with linked paths becoming thicker and labels enlarging for the selected element. The implementation uses React and D3 v7, with the arc layout generated through custom path calculations for elliptical curves. Data is loaded as JSON from a GitHub gist and contains parent-child node relationships with correlation scores. SVG circles represent nodes, while paths illustrate links, with node and label positions determined by a D3 point scale.

MMark Lam

75% match

Loading thumbnail…

Fork of Fork of gme

This visualization displays a grid of company symbols, each colored by a numeric “rel_score” on a red-to-green scale. Clicking a symbol updates a side panel with the company name, industry, score, and description. The code uses D3 v7 with `select`, `scaleLinear`, and `json` to load and render SVG elements, including a gradient legend and tick indicator. Data comes from a remote JSON file fetched from a gist.

MMark Lam

73% match

Loading thumbnail…

Fork of gme

This visualization displays stock symbols in a 5-column grid of colored squares, where each square's color represents a relative score from red to green. Hovering over a square highlights it and updates a tick indicator on a gradient legend below to show the exact score value. The code uses D3 v7 with `scaleLinear` for color encoding and positioning, `json()` for loading data, and event handlers for mouse interactions. Data comes from a JSON file containing company information, rendered as SVG rectangles and text elements.

MMark Lam

73% match

Loading thumbnail…

Fork of Organization Graph Diagram

This fork of an organization graph diagram visualizes relationships within a dataset, using an interactive node-link layout to show connections between entities. Built with React and D3 v6, it relies on a force-directed simulation (`d3.forceSimulation`, `d3.forceManyBody`, `d3.forceLink`) to position nodes and links, with draggable nodes and color-coded clusters. The SVG rendering displays circles and connecting lines, with link labels placed at midpoints. The underlying data comes from a CSV file containing node IDs and weighted adjacency pairs.

JJediquu

71% match

Loading thumbnail…

Untitled

This example visualizes a correlation matrix using a correlogram, where the lower triangle displays circles colored by correlation strength and the upper triangle shows numeric values. It uses d3.scaleLinear for color mapping, d3.scaleSqrt for circle sizing, and d3.scalePoint for axis positioning. Data is loaded from a CSV file and reshaped into long format before rendering as SVG circles and text elements in React.

Ssubratanp

69% match

Loading thumbnail…

Fork of Network chart

This interactive network chart displays seven named nodes connected by weighted links, with node groups distinguished through a force-directed layout that positions circles and labels on a tan background. The visualization uses d3.layout.force to simulate physics-based placement, allowing users to click and drag nodes across the SVG canvas. Data comes from an external graphFile.json containing node names and link weights, which are rendered as dark blue lines of varying thickness and green circles with 15px strokes.

SSheshidharreddy

68% match