Node-Link Diagram with Force-Directed Layout Using D3
A node-link diagram displays the SOC-FIRM-HI-TECH network from the Network Repository, with nodes categorized into six groups distinguished by color via a scaleOrdinal. Using D3 v7, the layout comes from d3.forceSimulation with charge, center, and link forces; nodes are rendered as SVG circles with labels and tooltips, and appear draggable through d3.drag. The example also integrates the d3-legend library, though the legend itself is not shown in the code.
AI-generated descriptionAssignment 7 part C, B (partialy: tooltip)
Node-Link Diagram with Force-Directed Layout Using D3
Inspired by:
Used lib: https://d3-legend.susielu.com/ used documentation: https://github.com/d3/d3/blob/main/API.md
Data:
https://networkrepository.com dataset was used: http://bl.ocks.org/eggchul/4f7b66224adecb2796f685447cd12448#license
<div id="svg-wrapper"></div> <h3>Data Source: SOC-FIRM-HI-TECH</h3> <p style="font-family:'Lato';"> <code style="font-size:1.1em;"> @inproceedings{nr-aaai15,<BR> title = {The Network Data Repository with Interactive Graph Analytics and Visualization},<BR> author={Ryan A. Rossi and Nesreen K. Ahmed},<BR> booktitle = {AAAI},<BR> url={<i><a href="http://networkrepository.com" target="_blank"><b style="font-weight:bold !important;">http://networkrepository.com</b></a></i>},<BR> year={2015}<BR> }<BR> </code> </p>@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} }