Fork of Adjacency Matrix Using D3
This example presents a static adjacency matrix of a small, 20-node social network derived from the Network Repository’s high-tech firm dataset. The visualization uses a grid of colored rectangles, where cell color encodes edge weight (light gray for zero, yellow for low, orange for medium, and red for high values). The visualization is built using d3.scaleBand for axis positioning, d3.select for SVG rendering, and d3.csv to load the edge data. The code includes an interactive tooltip that appears on mouseover, showing the source, target, and value of each edge. The rendering uses an SVG canvas with row and column labels, and the tooltip is implemented using D3 transitions for opacity changes.
AI-generated descriptionAssignment 7 part B
Adjacency Matrix Using D3
Inspired by:
I've looked through several examples and these approaches are nice: https://bl.ocks.org/zwang155/cfb7a70b6d08c1089b123235b874da37 https://bl.ocks.org/micahstubbs/7f360cc66abfa28b400b96bc75b8984e
Used lib: https://d3-legend.susielu.com/ used documentation: https://github.com/d3/d3/blob/main/API.md
Data: I've tried to do the matrix with the same dataset, but it is too heahy and hangs my browser, so I've switched to this lite version, but there is code, that if uncommented, would show the original datase I've worked with. https://networkrepository.com dataset was used: < https://networkrepository.com/soc-firm-hi-tech.php>
@inproceedings{
- nr,
- title = {The Network Data Repository with Interactive Graph Analytics and Visualization},
- author={Ryan A. Rossi and Nesreen K. Ahmed},
- booktitle = {AAAI},
- url={https://networkrepository.com},
- year={2015} }