Bitcoin OTC Trust Weighted Ratings - D3 Visualization

100%

Bitcoin OTC Trust Weighted Ratings - D3 Visualization

✓ Published0🌍 Public

Last edited Jun 27, 2018

Created on Apr 21, 2018

A force-directed graph maps 1,000 Bitcoin OTC trust ratings, with nodes as users and directed links as transactions colored by rating via an interpolated red-yellow-green scale (negative to positive). The D3 v4 SVG visualization supports zooming, panning, and node dragging, with hover interactions highlighting connected edges and nodes. Data is sourced from the Stanford SNAP Bitcoin OTC network, subset from ~35,000 to 1,000 records for performance.

AI-generated description

Connor Ingram

The dataset is a subset modified from https://snap.stanford.edu/data/soc-sign-bitcoinotc.html.

S. Kumar, F. Spezzano, V.S. Subrahmanian, C. Faloutsos. Edge Weight Prediction in Weighted Signed Networks. IEEE International Conference on Data Mining (ICDM), 2016.

The data used here is dractically cut down from ~35000 records to 1000. The entire dataset is too much to handle with this implementation, and a force-directed-graph would not be an intuitive choice. The data consists of nodes and links. Each node represents a Bitcoin OTC user (seller/buyer). Each directed edge is a transaction between a source and a target, with a rating that the source user has given the target user (on a scale of -10 to 10, 10 being completely trustworthy), and also a unix timestamp.

Similar vizzes

Loading thumbnail…

A8- Nodelink w/ force

This interactive visualization displays a Bitcoin transaction network as a node-link diagram with force-directed layout. Nodes represent transaction addresses, and links show transactions with stroke width proportional to transaction weight. The network is rendered as SVG circles and lines, animated through a physics simulation using `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` forces. Node drag interaction and a hover tooltip showing node ID and total weight are implemented. Data is loaded from a remote CSV file.

SShazil Taqi

68% 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

66% match

Loading thumbnail…

A8 - adjacency matrix

This example visualizes a Bitcoin transaction network as an adjacency matrix, where rows and columns represent nodes and cell opacity reflects link weight. The SVG rendering uses D3.js v7 to load CSV data, construct a symmetric matrix, and generate individual `<rect>` elements sized proportionally to the matrix dimensions. Hovering over a cell highlights it in red and displays the corresponding weight value as a temporary text label near the cursor, while mouseout restores the blue fill and removes the tooltip.

SShazil Taqi

65% 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

65% match

Loading thumbnail…

A8- Edge Bundling

This example shows a force-directed graph of Bitcoin transaction relationships, where nodes represent addresses and links represent transactions. The visualization uses d3.forceSimulation with link, charge, and center forces to position the nodes, while d3.drag enables interactive node movement. Links are rendered as SVG lines, nodes as circles with title tooltips, and the data loads from a remote CSV file containing node pairs. The simulation updates node and link positions on each tick, with the alphaTarget method controlling simulation restarts during dragging.

SShazil Taqi

64% 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

64% match

Loading thumbnail…

Networkgraph

A network graph displays nine billionaire nodes and eight weighted links, using `d3.layout.force` to simulate a physics-based layout with gravity, distance, and charge parameters. The SVG renders each person as a red circle with a dark outline and a black-on-green text label, while link thickness reflects each connection’s weight from the `graph.json` data. Nodes are draggable via `force.drag`, and the tick handler updates line endpoints and node transforms. The visualization uses D3 v4’s force layout and SVG elements, with styles defined in CSS for links and node text.

SSUSHMA CHIRRA

63% match

Loading thumbnail…

A8- Adj Matrix

This example renders an adjacency matrix from a bitcoin transaction dataset loaded via `d3.csv`. Each cell represents a connection between two nodes, with transparency indicating the presence of a link and blue fill for edges. The visualization uses D3 v7 with SVG `rect` elements, computing the matrix from unique node pairs. Hovering triggers a `mouseover` event, turning cells red and displaying the edge weight in a temporary HTML tooltip appended to the body.

SShazil Taqi

62% match