Skip to main content
SimilarExport ZIP
100%

gme correlation

✓ Published4🌍 Public
MMark Lam
Last edited Nov 9, 2021
Created on Nov 3, 2021
Forked from Fork of D3 Starter

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of gme correlation

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.

MMark Lam
88% match
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
84% 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
76% match
Loading thumbnail…

gme

A grid of colored cells shows relative scores for a set of financial symbols from a JSON dataset, with each cell labeled by its ticker symbol and score. A linear color scale maps scores from red to green, and a gradient legend below the grid indicates the mapping. The visualization renders as SVG using d3.v7, with mouseover interactions defined but not detailed, and a tick indicator labeled "HI" marks a reference point. Data is loaded via `d3.json`, and scales are created with `d3.scaleLinear`.

MMark Lam
72% 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
70% 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
68% match
Loading thumbnail…

Untitled

This visualization displays a circular arc diagram of node-link data, with nodes positioned along a horizontal axis and connected by curved paths. Hovering over a node highlights it and its associated links while dimming others and enlarging its label. The code uses D3.js v4 with d3.scaleOrdinal for group colors, d3.scalePoint for x-axis positioning, and d3.scaleLinear for node sizes. It renders as an SVG, loading data from a CSV file and applying a color palette from d3-scale-chromatic.

SSRC199
67% 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
67% match