Scatter Plot with D3.js

[{"_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",1,"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/pavanpk73/c0f62588747f471187a97308f56a7c2a","author","pavanpk73","id","0fb450a2072f4a0291264c3ab8e2469e","title","task 3 question678","ownerHandle","kritinkesavkts","ownerDisplayName","Kritin Kesav","v3-user-pavanpk73","accountType","user","email","pavanpkkalyan3@gmail.com","displayName","avatar","https://avatars.githubusercontent.com/u/163755840?v=4","oauthProvider","github","oauthId","163755840","isAdmin","stripeCustomerId","handle","handleNormalized","lifecycleEmailsEnabled",true,"createdAt",1791491338204,"updatedAt","c0f62588747f471187a97308f56a7c2a","files",{"_74":75,"_76":77,"_78":79,"_80":81},"87890867",{"_82":90,"_84":91},"270fdb6c",{"_82":88,"_84":89},"8dbc301e",{"_82":86,"_84":87},"b809c858",{"_82":83,"_84":85},"name","styles.css","text","#message {\n text-align: center;\n font-size: 12em;\n}\n","index.html","\n\n \n \n \n Scatter Plot with D3.js\n \n \n \n \n

\n\n \n \n\n","index.js","// Set the dimensions and margins of the graph\nconst margin = { top: 50, right: 50, bottom: 70, left: 70 },\n width = 600 - margin.left - margin.right,\n height = 400 - margin.top - margin.bottom;\n\n// Define color scale for different students\nconst colorScale = d3.scaleOrdinal(d3.schemeCategory10);\n\n// Append the SVG object to the div \"scatter_plot\"\nconst svg = d3\n .select('#scatter_plot')\n .append('svg')\n .attr('width', width + margin.left + margin.right)\n .attr('height', height + margin.top + margin.bottom)\n .append('g')\n .attr(\n 'transform',\n `translate(${margin.left},${margin.top})`,\n );\n\n// Read the data from the CSV file\nd3.csv('data.csv')\n .then((data) => {\n // Convert string numbers to numeric values\n data.forEach((d) => {\n d.StudentID = +d.StudentID;\n d.StudyHours = +d.StudyHours;\n d.ExamScore = +d.ExamScore;\n });\n\n // Define scales for x and y axes\n const xScale = d3\n .scaleLinear()\n .domain([0, d3.max(data, (d) => d.StudyHours) + 1])\n .range([0, width]);\n\n const yScale = d3\n .scaleLinear()\n .domain([0, d3.max(data, (d) => d.ExamScore) + 10])\n .range([height, 0]);\n\n // Add x-axis\n svg\n .append('g')\n .attr('transform', `translate(0, ${height})`)\n .call(d3.axisBottom(xScale));\n\n // Add x-axis label\n svg\n .append('text')\n .attr('x', width / 2)\n .attr('y', height + margin.top + 20)\n .attr('text-anchor', 'middle')\n .attr('class', 'axis-label')\n .text('Study Hours');\n\n // Add y-axis\n svg.append('g').call(d3.axisLeft(yScale));\n\n // Add y-axis label\n svg\n .append('text')\n .attr('transform', 'rotate(-90)')\n .attr('x', -height / 2)\n .attr('y', -margin.left + 20)\n .attr('text-anchor', 'middle')\n .attr('class', 'axis-label')\n .text('Exam Score');\n\n // Add dots for scatter plot (each representing a student)\n svg\n .selectAll('.dot')\n .data(data)\n .enter()\n .append('circle')\n .attr('class', 'dot')\n .attr('cx', (d) => xScale(d.StudyHours))\n .attr('cy', (d) => yScale(d.ExamScore))\n .attr('r', 6) // Radius of the circle\n .style('fill', (d) => colorScale(d.StudentID)) // Assign color based on StudentID\n .style('opacity', 0.7)\n .style('stroke', 'black');\n })\n .catch((error) => {\n console.log('Error loading data:', error);\n });\n","data.csv","StudentID,StudyHours,ExamScore\n1,2,50\n2,3,65\n3,4,70\n4,5,75\n5,6,80\n6,7,85\n7,8,90\n8,9,95\n9,10,100\n10,4,72\n11,6,78\n12,8,84\n13,5,76\n14,7,82\n15,9,88\n16,3,68\n17,5,74\n18,7,80\n19,4,70\n20,6,76\n\n","slug","question678","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","2fda33649c554410aceeb60d421d135f","startCommitId","2863ea16257242289fd05f59ee5bc477","forkedFrom","forkedFromVisibility",1712875468000,1712875702000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]