Network Graph Visualization

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_106":-5,"_62":16,"_107":-5,"_108":109,"_110":111},"routes/viz-public",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":16,"_18":16,"_19":-5,"_20":21,"_22":16,"_23":24,"_25":26,"_27":-5,"_28":29,"_30":16,"_31":32,"_33":-5,"_34":35},"vizInfo",{"_42":72,"_85":72,"_44":86,"_87":-7,"_88":52,"_89":50,"_90":-5,"_91":92,"_93":16,"_94":95,"_96":97,"_98":43,"_99":-7,"_69":100,"_71":101,"_102":-5,"_103":68,"_104":105},"vizContent",{"_42":72,"_73":74,"_28":29},"ownerAccount",{"_42":50,"_51":52,"_53":54,"_55":54,"_56":57,"_58":59,"_60":61,"_62":16,"_63":-7,"_64":41,"_65":66,"_67":68,"_69":70,"_71":70},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz",{"_42":43,"_44":45,"_46":47,"_48":49},"runtimeVersion","license","MIT","descriptionIsAiGenerated","sourceProvenance",{"_36":37,"_38":39,"_28":29,"_40":41},"project","socialImageUrl","https://next.vizhub.com/assets/unfurl.webp","sourceType","v3","originalUrl","https://vizhub.com/SirishaManthena/ab34477a4760477585df6943d16b88ca","author","SirishaManthena","id","460e3928e8944c218b2163ab3a275c73","title","ICE-8:Network graph ","ownerHandle","sagam929","ownerDisplayName","vinodreddysagam929@gmail.com","v3-user-sirishamanthena","accountType","user","email","manthenasirisha06@gmail.com","displayName","avatar","https://avatars.githubusercontent.com/u/51994618?v=4","oauthProvider","github","oauthId","51994618","isAdmin","stripeCustomerId","handle","handleNormalized","sirishamanthena","lifecycleEmailsEnabled",true,"createdAt",1791491231858,"updatedAt","ab34477a4760477585df6943d16b88ca","files",{"_75":76,"_77":78},"35683687",{"_79":83,"_81":84},"8dbc301e",{"_79":80,"_81":82},"name","index.html","text","\n\n \n \n \n Network Graph Visualization\n \n \n \n \n

\n \n

\n\n \n \n\n","script.js","const svg = d3.select('svg');\nconst width = +svg.attr('width');\nconst height = +svg.attr('height');\n\n// Load data from CSV\nd3.csv(\n 'https://gist.githubusercontent.com/SirishaManthena/74352799233a05a3ad0496cbc361e3c1/raw/ecdca534f39a1a2051ee63bb7c979fcb59eb8216/amazon_prime_titles.csv',\n).then(function (data) {\n // Filter data to include only movies\n const movies = data.filter(\n (item) => item.type === 'Movie',\n );\n\n // Group movies by genre\n const genres = {};\n movies.forEach(function (movie) {\n const genre = movie.listed_in.split(',')[0].trim();\n if (!genres[genre]) {\n genres[genre] = [];\n }\n if (genres[genre].length < 3) {\n genres[genre].push(movie.title);\n }\n });\n\n // Structure the data for the graph\n const nodes = [\n { id: 'Movies', type: 'Category' },\n { id: 'Comedy', type: 'Genre' },\n { id: 'Documentary', type: 'Genre' },\n { id: 'Drama', type: 'Genre' },\n ];\n\n const links = [\n { source: 'Movies', target: 'Comedy' },\n { source: 'Movies', target: 'Documentary' },\n { source: 'Movies', target: 'Drama' },\n ];\n\n genres['Comedy'].forEach((title) => {\n nodes.push({ id: title, type: 'Title' });\n links.push({ source: 'Comedy', target: title });\n });\n\n genres['Documentary'].forEach((title) => {\n nodes.push({ id: title, type: 'Title' });\n links.push({ source: 'Documentary', target: title });\n });\n\n genres['Drama'].forEach((title) => {\n nodes.push({ id: title, type: 'Title' });\n links.push({ source: 'Drama', target: title });\n });\n\n // Create the color scale for node types\n const colorScale = d3\n .scaleOrdinal()\n .domain(['Category', 'Genre', 'Title'])\n .range(['#66c2a5', '#fc8d62', '#8da0eb']);\n\n // Create the force simulation\n const simulation = d3\n .forceSimulation(nodes)\n .force(\n 'link',\n d3\n .forceLink(links)\n .id((d) => d.id)\n .distance(120),\n )\n .force('charge', d3.forceManyBody().strength(-500))\n .force('center', d3.forceCenter(width / 2, height / 2));\n\n // Append links to SVG\n const link = svg\n .append('g')\n .selectAll('line')\n .data(links)\n .enter()\n .append('line')\n .attr('class', 'link')\n .style('stroke-width', 2)\n .attr('marker-end', 'url(#arrow)');\n\n // Create nodes\n const node = svg\n .selectAll('.node')\n .data(nodes)\n .enter()\n .append('circle')\n .attr('class', 'node')\n .attr('r', (d) => (d.type === 'Category' ? 30 : 25)) // Adjust circle size for titles\n .style('fill', (d) => colorScale(d.type));\n\n // Add node labels\n const nodeLabels = svg\n .selectAll('.node-label')\n .data(nodes)\n .enter()\n .append('text')\n .attr('class', 'node-label')\n .text((d) => d.id);\n\n // Add title\n svg\n .append('text')\n .attr('x', width / 4)\n .attr('y', 50)\n .attr('text-anchor', 'middle')\n .attr('font-size', '24px')\n .text('Network Graph Visualization');\n\n // Add simulation tick function\n simulation.on('tick', () => {\n link\n .attr('x1', (d) => d.source.x)\n .attr('y1', (d) => d.source.y)\n .attr('x2', (d) => d.target.x)\n .attr('y2', (d) => d.target.y);\n\n node.attr('cx', (d) => d.x).attr('cy', (d) => d.y);\n\n nodeLabels.attr('x', (d) => d.x).attr('y', (d) => d.y);\n });\n});\n","slug","ICE-8 Network Graph","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","0da0a04fa2864f439d15881a97713cb1","startCommitId","76b801be21094077ad9e1636adca1272","forkedFrom","forkedFromVisibility",1712086169000,1712099085000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]