Rating Co-occurrence

100%

Rating Co-occurrence

✓ Published0🌍 Public

Last edited Feb 7, 2018

Created on Jun 17, 2019

This interactive adjacency matrix visualizes co-occurrence relationships between major currencies, with each colored cell representing a connected pair and darker shades indicating higher connection weights. Users can reorder the matrix alphabetically, by connection strength, or by community clusters detected through the Louvain algorithm in jsLouvain.js. The D3.js v3 visualization uses SVG rendering, with mouseover events triggering an explainer panel and dropdowns for year and ordering options. Data is loaded from an external CSV file containing currency pair relationships and their weights.

AI-generated description

2018 - Built with blockbuilder.org

================

forked from <a href='http://bl.ocks.org/willzjc/'>willzjc</a>'s block: <a href='http://bl.ocks.org/willzjc/0b4d5e2433973a4efd5dd6820c31afb5'>Matrix - Undergraduate Major Disciplines that Co-Occur</a>

(which was originally forked from Forked from saraquigley's block: Undergraduate Major Disciplines that Co-Occur in Fall 2014)

mit Licensed

Similar vizzes

Loading thumbnail…

Co-ocurrence matrix

This co-occurrence matrix visualizes the relationships between academic programs, with cells colored by category and sized by link weight. The visualization uses an interactive SVG heatmap where users can reorder rows and columns by name, count, or group via a dropdown menu. Built with D3 v5, the code employs `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` to map data, while transitions animate the reordering over 2 seconds. A tooltip provides details on hover, and the matrix reads from a JSON file containing nodes and links.

Iimsohandsome123

72% match

Loading thumbnail…

Co-ocurrence matrix

This visualization displays a co-occurrence matrix of academic disciplines, where each cell represents the strength of association between two fields, with color indicating group membership and opacity reflecting link value. Users can reorder the matrix by name, count, or group using a dropdown, triggering animated transitions via `d3.transition()`. The code employs `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.scaleSqrt` for layout and styling, while hover interactions highlight corresponding row and column labels using `d3.selectAll`. Data is loaded from a JSON file with `d3.json`.

Hhenry1987

71% match

Loading thumbnail…

Co-ocurrence matrix

Hhenry1987

71% match

Loading thumbnail…

adjacency matrix

This adjacency matrix visualization uses a grid of colored cells to show connections between individuals in a social network, with darker orange cells indicating stronger relationships. The code loads node and edge data from CSV files, then constructs a matrix where each row and column represents a person, and cell opacity reflects edge weights. Built with D3.js v4, it renders SVG rectangles for the matrix cells, labels axes with node names, and highlights rows and columns on mouseover. The example uses D3’s selection, data binding, and event handling APIs to create an interactive overview of pairwise relationships.

663anp3ca

70% match

Loading thumbnail…

A8- adj matrix

This example shows an adjacency matrix of Bitcoin transaction data, where each row and column represents a node and colored cells indicate weighted connections between them. The matrix is built by parsing a CSV file with d3.csv, creating a dense array of weights from the node pairs, and rendering it as an SVG grid of blue rectangles with opacity proportional to edge weight. The visualization uses D3 v7 for data binding and DOM manipulation, with a hover tooltip that displays the exact weight value via d3.select and transition. The animation-like interactivity comes from mouseover and mouseout events, while the white cell strokes and black hover outlines make the grid structure easy to read.

SShazil Taqi

70% match

Loading thumbnail…

A8- Adjacency Matrix

This example visualizes Bitcoin transaction data as an adjacency matrix, where each cell represents the connection weight between two nodes. The SVG rendering uses colored rectangles—darker blue indicates higher transaction weights, while gray represents no connection, with logarithmic scaling applied to the color intensity. The code loads CSV data via `d3.csv`, builds a symmetric matrix for the undirected graph, and renders rows and columns using D3 data joins. Hovering a cell triggers a CSS transition that scales and highlights it, and node labels appear along both axes. The implementation relies on D3 v7 selection methods and SVG transformations, with no external layout algorithms.

SShazil Taqi

70% match

Loading thumbnail…

adjacency matrix - A8

This example displays a Bitcoin transaction network as an adjacency matrix, where cells represent the summed transaction weights between node pairs and darker blue indicates higher values. The visualization updates dynamically as users hover over cells, triggering a tooltip that reveals the exact weight. Built with D3 v7 and SVG, it converts CSV data into an undirected matrix by aggregating edge weights symmetrically. CSS transitions animate cell color and scale on hover, while row and column labels rotate for readability. The entire interaction is immediate and reactive to user input.

SShazil Taqi

69% match

Loading thumbnail…

Assignment 8 adjacency matrix

This adjacency matrix visualizes relationships in a Bitcoin network, showing connections between nodes as colored cells in a square grid. Built with D3 v7, the visualization renders an SVG matrix where blue cells indicate edges between source and target node IDs, with node labels along both axes. Interactive features include hover highlighting that emphasizes the corresponding row and column labels while displaying a tooltip with the specific source and target pair. The implementation loads edge data from a CSV file and uses D3's data binding and selection methods to construct and style the matrix cells.

Hhxu51@usfca.edu

69% match