Traffic data

[{"_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/Satishnarne/b5ae16b39b9d4ea5841f2b6a41c40d32","author","Satishnarne","id","469e558ba77941aa9e1b416ea521b0aa","title","HTML Starter","ownerHandle","curran","ownerDisplayName","Curran Kelleher","v3-user-satishnarne","accountType","user","email","satishnarne99@gmail.com","displayName","avatar","https://avatars.githubusercontent.com/u/161451760?v=4","oauthProvider","github","oauthId","161451760","isAdmin","stripeCustomerId","handle","handleNormalized","satishnarne","lifecycleEmailsEnabled",true,"createdAt",1791333405363,"updatedAt","b5ae16b39b9d4ea5841f2b6a41c40d32","files",{"_75":76,"_77":78},"72305549",{"_79":83,"_81":84},"8dbc301e",{"_79":80,"_81":82},"name","index.html","text"," \n\n \n Traffic data \n \n \n />\n \n \n\n","index.js","// Data for nodes and links\nconst nodes = [\n // Traffic timings categories\n { id: 'Traffic', group: 0 },\n { id: 'Am_timings', group: 1 },\n { id: 'Midday_timings', group: 1 },\n { id: 'Evening_timings', group: 1 },\n { id: 'Mid_night_timings', group: 1 },\n // Traffic routes and timings\n {\n id: 'Sanchar Nagar MCECHS Layout -> Mariyappana Palya (1)',\n group: 2,\n },\n {\n id: 'Ramaswamipalya -> Sampangi Rama Nagar (2)',\n group: 2,\n },\n {\n id: 'Sanchar Nagar MCECHS Layout -> Mariyappana Palya (3)',\n group: 2,\n },\n {\n id: 'Ramaswamipalya -> Sampangi Rama Nagar (4)',\n group: 2,\n },\n {\n id: 'Sanchar Nagar MCECHS Layout -> Mariyappana Palya (5)',\n group: 2,\n },\n {\n id: 'Ramaswamipalya -> Sampangi Rama Nagar (6)',\n group: 2,\n },\n {\n id: 'Sanchar Nagar MCECHS Layout -> Mariyappana Palya (7)',\n group: 2,\n },\n {\n id: 'Ramaswamipalya -> Sampangi Rama Nagar (8)',\n group: 2,\n },\n // Time intervals\n { id: 'Time: 14', group: 3 },\n { id: 'Time: 12', group: 3 },\n { id: 'Time: 27', group: 3 },\n { id: 'Time: 34', group: 3 },\n { id: 'Time: 28', group: 3 },\n { id: 'Time: 29', group: 3 },\n { id: 'Time: 13', group: 3 },\n { id: 'Time: 18', group: 3 },\n];\n\nconst links = [\n // Connect traffic timings categories\n { source: 'Traffic', target: 'Am_timings', value: 1 },\n { source: 'Traffic', target: 'Midday_timings', value: 1 },\n {\n source: 'Traffic',\n target: 'Evening_timings',\n value: 1,\n },\n {\n source: 'Traffic',\n target: 'Mid_night_timings',\n value: 1,\n },\n // Connect traffic routes to timings categories\n {\n source: 'Am_timings',\n target:\n 'Sanchar Nagar MCECHS Layout -> Mariyappana Palya (1)',\n value: 1,\n },\n {\n source: 'Am_timings',\n target: 'Ramaswamipalya -> Sampangi Rama Nagar (2)',\n value: 1,\n },\n {\n source: 'Midday_timings',\n target:\n 'Sanchar Nagar MCECHS Layout -> Mariyappana Palya (3)',\n value: 1,\n },\n {\n source: 'Midday_timings',\n target: 'Ramaswamipalya -> Sampangi Rama Nagar (4)',\n value: 1,\n },\n {\n source: 'Evening_timings',\n target:\n 'Sanchar Nagar MCECHS Layout -> Mariyappana Palya (5)',\n value: 1,\n },\n {\n source: 'Evening_timings',\n target: 'Ramaswamipalya -> Sampangi Rama Nagar (6)',\n value: 1,\n },\n {\n source: 'Mid_night_timings',\n target:\n 'Sanchar Nagar MCECHS Layout -> Mariyappana Palya (7)',\n value: 1,\n },\n {\n source: 'Mid_night_timings',\n target: 'Ramaswamipalya -> Sampangi Rama Nagar (8)',\n value: 1,\n },\n // Connect time intervals to traffic routes\n {\n source:\n 'Sanchar Nagar MCECHS Layout -> Mariyappana Palya (1)',\n target: 'Time: 14',\n value: 1,\n },\n {\n source: 'Ramaswamipalya -> Sampangi Rama Nagar (2)',\n target: 'Time: 12',\n value: 1,\n },\n {\n source:\n 'Sanchar Nagar MCECHS Layout -> Mariyappana Palya (3)',\n target: 'Time: 27',\n value: 1,\n },\n {\n source: 'Ramaswamipalya -> Sampangi Rama Nagar (4)',\n target: 'Time: 34',\n value: 1,\n },\n {\n source:\n 'Sanchar Nagar MCECHS Layout -> Mariyappana Palya (5)',\n target: 'Time: 28',\n value: 1,\n },\n {\n source: 'Ramaswamipalya -> Sampangi Rama Nagar (6)',\n target: 'Time: 29',\n value: 1,\n },\n {\n source:\n 'Sanchar Nagar MCECHS Layout -> Mariyappana Palya (7)',\n target: 'Time: 13',\n value: 1,\n },\n {\n source: 'Ramaswamipalya -> Sampangi Rama Nagar (8)',\n target: 'Time: 18',\n value: 1,\n },\n];\n\n// Set the dimensions and margins of the graph\nconst width = 1500;\nconst height = 800;\n\n// Append the SVG object to the body of the page\nconst svg = d3\n .select('body')\n .append('svg')\n .attr('width', width)\n .attr('height', height);\n\n// Initialize the links\nconst link = svg\n .selectAll('.links')\n .data(links)\n .enter()\n .append('line')\n .style('stroke', '#aaa');\n\n// Initialize the nodes\nconst node = svg\n .selectAll('.nodes')\n .data(nodes)\n .enter()\n .append('g');\n\n// Append circles representing nodes\nnode\n .append('circle')\n .attr('r', 15)\n .style('fill', (d) => {\n const colors = [\n '#FF5733',\n '#33FF57',\n '#3357FF',\n '#57FF33',\n ];\n return colors[d.group] || '#333';\n });\n\n// Append text labels to nodes\nnode\n .append('text')\n .text((d) => d.id)\n .attr('x', 15)\n .attr('y', 5);\n\n// Initialize the force simulation\nconst simulation = d3\n .forceSimulation(nodes)\n .force(\n 'link',\n d3\n .forceLink(links)\n .id((d) => d.id)\n .distance(75),\n )\n .force('charge', d3.forceManyBody().strength(-200))\n .force('center', d3.forceCenter(width / 3, height / 2))\n .on('tick', ticked);\n\n// Function to update position of nodes and links in each tick of simulation\nfunction ticked() {\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('transform', (d) => `translate(${d.x},${d.y})`);\n}\n","slug","network graph","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","c42fe98c275d4ca2b39c853a0d3c5cb7","startCommitId","2a4ac7e578754c5b9bb39cf566531d6d","forkedFrom","forkedFromVisibility",1712114169000,1712118376000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]