[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_113":-5,"_62":16,"_114":-5,"_115":116,"_117":118},"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":71,"_92":71,"_44":93,"_94":-7,"_95":52,"_96":50,"_97":-5,"_98":99,"_100":16,"_101":102,"_103":104,"_105":43,"_106":-7,"_68":107,"_70":108,"_109":-5,"_110":67,"_111":112},"vizContent",{"_42":71,"_72":73,"_28":29},"ownerAccount",{"_42":50,"_51":52,"_53":54,"_55":54,"_56":57,"_58":59,"_60":61,"_62":16,"_63":-7,"_64":41,"_65":41,"_66":67,"_68":69,"_70":69},"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/tejasri280/e7a1467b8abf4defa351010604ad7d06","author","tejasri280","id","10adc410fe9f47bbbb87b349b538cfae","title","Fork of Network graph","ownerHandle","MSushmaReddy","ownerDisplayName","reddysushma994@gmail.com","v3-user-tejasri280","accountType","user","email","tejasrikotipalli1@gmail.com","displayName","avatar","https://avatars.githubusercontent.com/u/62712213?v=4","oauthProvider","github","oauthId","62712213","isAdmin","stripeCustomerId","handle","handleNormalized","lifecycleEmailsEnabled",true,"createdAt",1791333403298,"updatedAt","e7a1467b8abf4defa351010604ad7d06","files",{"_74":75,"_76":77,"_78":79,"_80":81},"19133348",{"_82":90,"_84":91},"71887293",{"_82":88,"_84":89},"77864848",{"_82":86,"_84":87},"8dbc301e",{"_82":83,"_84":85},"name","index.html","text","\n\n \n Network Graph ICE-8\n \n \n \n \n

\n Network graph for hospital mangement\n

\n \n \n \n\n","data.json","{\n \"links\": [\n {\n \"source\": \"Hospital\",\n \"target\": \"Login\",\n \"relationship\": \"Hospital relation\",\n \"srcType\": \"Person\",\n \"tgtType\": \"doctor\",\n \"value\": 1\n },\n {\n \"source\": \"Login\",\n \"target\": \"Patient\",\n \"relationship\": \"Hospital relation\",\n \"srcType\": \"Person\",\n \"tgtType\": \"doctor\",\n \"value\": 1\n },\n {\n \"source\": \"Patient\",\n \"target\": \"Hospital\",\n \"relationship\": \"Hospital relation\",\n \"srcType\": \"Person\",\n \"tgtType\": \"Doctor\",\n \"value\": 1\n },\n {\n \"source\": \"Medicine\",\n \"target\": \"Nurse\",\n \"relationship\": \"Hospital relation\",\n \"srcType\": \"Person\",\n \"tgtType\": \"Doctor\",\n \"value\": 1\n },\n {\n \"source\": \"Bill\",\n \"target\": \"Nurse\",\n \"relationship\": \"Hospital relation\",\n \"srcType\": \"Person\",\n \"tgtType\": \"Doctor\",\n \"value\": 1\n },\n {\n \"source\": \"Nurse\",\n \"target\": \"Test\",\n \"relationship\": \"Hospital relation\",\n \"srcType\": \"Person\",\n \"tgtType\": \"Doctor\",\n \"value\": 1\n },\n {\n \"source\": \"Test\",\n \"target\": \"User\",\n \"relationship\": \"Hospital relation\",\n \"srcType\": \"Person\",\n \"tgtType\": \"Doctor\",\n \"value\": 1\n },\n {\n \"source\": \"Patient\",\n \"target\": \"Nurse\",\n \"relationship\": \"Hospital relation\",\n \"srcType\": \"Person\",\n \"tgtType\": \"Doctor\",\n \"value\": 1\n },\n {\n \"source\": \"User\",\n \"target\": \"Result\",\n \"relationship\": \"Hospital relation\",\n \"srcType\": \"Person\",\n \"tgtType\": \"Doctor\",\n \"value\": 1\n },\n {\n \"source\": \"Result\",\n \"target\": \"Patient\",\n \"relationship\": \"Hospital relation\",\n \"srcType\": \"Person\",\n \"tgtType\": \"Doctor\",\n \"value\": 1\n },\n {\n \"source\": \"Medicine\",\n \"target\": \"Report\",\n \"relationship\": \"Hospital relation\",\n \"srcType\": \"Person\",\n \"tgtType\": \"Doctor\",\n \"value\": 1\n },\n {\n \"source\": \"Report\",\n \"target\": \"Patient\",\n \"relationship\": \"Hospital relation\",\n \"srcType\": \"Person\",\n \"tgtType\": \"Doctor\",\n \"value\": 1\n }\n ],\n \"nodes\": [\n { \"id\": \"Hospital\", \"group\": 5 },\n { \"id\": \"Login\", \"group\": 5 },\n { \"id\": \"Patient\", \"group\": 5 },\n { \"id\": \"Nurse\", \"group\": 5 },\n { \"id\": \"Bill\", \"group\": 5 },\n { \"id\": \"Test\", \"group\": 5 },\n { \"id\": \"Report\", \"group\": 5 },\n { \"id\": \"User\", \"group\": 5 },\n { \"id\": \"Result\", \"group\": 5 },\n { \"id\": \"Medicine\", \"group\": 5 }\n ]\n}\n","styles.css","body {\n margin: 0px;\n overflow: hidden;\n font-family: bold;\n font-size: 25px;\n}\n\nline {\n stroke: #000;\n stroke-opacity: 0.8;\n stroke-width: 4;\n}\n\ntext {\n fill: black;\n stroke: none;\n text-anchor: middle;\n pointer-events: none;\n}\n\n.node {\n stroke: blue;\n stroke-width: 2.5;\n cursor: pointer;\n}\n\nline text {\n fill: #999;\n stroke: none;\n}\n\n.nodeHover {\n stroke: black;\n stroke-width: 15;\n}\n","index.js","import { select, selectAll, scaleOrdinal } from 'd3';\n\n// defines all the variables that define the structure of the svg\nconst svg = select('svg');\nconst width = +svg.attr('width');\nconst height = +svg.attr('height');\nconst centre_x = width / 2;\nconst centre_y = height / 2;\nconst colorScale = ['pink'];\n\n// set the structure of svg\nsvg\n .attr('preserveAspectRatio', 'xMidYMid meet')\n .attr('viewBox', [0, 0, width * 2, height * 2]);\n\n// define all nodes and markers\nconst defs = svg.append('defs');\ndefs\n .selectAll('marker')\n .data(['node'])\n .enter()\n .append('marker')\n .attr('id', (d) => d)\n .attr('viewBox', '0 -2.5 5 5')\n .attr('refX', 25)\n .attr('refY', 0)\n .attr('markerWidth', 5)\n .attr('markerHeight', 9)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M0,-2.5L5,0L0,2.5')\n .attr('fill', '#999');\n\nd3.json('data.json').then((data) => {\n // here we have defined links\n const links = data.links.map((d) => Object.create(d));\n links.forEach((d, i) => {\n d.srcType = data.links[i].srcType;\n d.tgtType = data.links[i].tgtType;\n d.relationship = data.links[i].relationship;\n d.value = data.links[i].value;\n });\n\n //Below we have defined nodes\n const nodes = data.nodes.map((d) => Object.create(d));\n nodes.forEach((d, i) => {\n d.group = data.nodes[i].group;\n });\n\n // links are created here.\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('collision', d3.forceCollide().radius(105))\n .force('center', d3.forceCenter(width, height));\n //defined events\n const drag = (simulation) => {\n function dragstarted(event) {\n if (!event.active)\n simulation.alphaTarget(0.5).restart();\n event.subject.fx = event.subject.x;\n event.subject.fy = event.subject.y;\n }\n function dragged(event) {\n event.subject.fx = event.x;\n event.subject.fy = event.y;\n }\n function dragended(event, d) {\n if (!event.active) simulation.alphaTarget(0);\n event.subject.fx = null;\n event.subject.fy = null;\n }\n return d3\n .drag()\n .on('start', dragstarted)\n .on('drag', dragged)\n .on('end', dragended);\n };\n\n const link = svg\n .append('g')\n .selectAll('line')\n .data(links)\n .join('line')\n .attr('marker-end', 'url(#node)');\n\n const node = svg\n .append('g')\n .attr('class', 'node')\n .selectAll('g')\n .data(nodes)\n .enter()\n .append('g')\n .attr(\n 'transform',\n (d) =>\n 'translate(' + centre_x + ', ' + centre_y + ')',\n );\n const circles = node\n .append('circle')\n .attr('r', 75)\n .attr('fill', (d) => colorScale[0])\n .on('mouseover', focusNode)\n .on('mouseout', blurNode)\n .call(drag(simulation));\n\n const nodeLbl = node\n .append('text')\n .text((d) => d.id)\n .attr('dy', '0.3em');\n\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 node.attr(\n 'transform',\n (d) => 'translate(' + d.x + ', ' + d.y + ')',\n );\n });\n\n function focusNode() {\n d3.select(this).classed('nodeHover', true);\n }\n\n function blurNode() {\n d3.select(this).classed('nodeHover', false);\n }\n});\n","slug","Network graph ","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","b6c312bfaa784be780a5b82997a8623f","startCommitId","dd0b1bec02ed4b90b10b652870192555","forkedFrom","forkedFromVisibility",1712109303000,1712116015000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]