Pie Chart

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_110":-5,"_63":16,"_111":-5,"_112":113,"_114":115},"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,"_89":72,"_44":90,"_91":-7,"_92":52,"_93":50,"_94":-5,"_95":96,"_97":16,"_98":99,"_100":101,"_102":43,"_103":-7,"_69":104,"_71":105,"_106":-5,"_107":68,"_108":109},"vizContent",{"_42":72,"_73":74,"_28":29},"ownerAccount",{"_42":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":16,"_64":-7,"_65":41,"_66":41,"_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/sajidali1279/f6464c60f51540009feba9cc3993f5a6","author","sajidali1279","id","e0d9f259d98a466786c86729766f3ecf","title","Analyzing crash data by operator","ownerHandle","Rishithagovini","ownerDisplayName","rishithagovini99@gmail.com","v3-user-sajidali1279","accountType","user","email","sksajidali1279@gmail.com","displayName","shaiksajidali","avatar","https://avatars.githubusercontent.com/u/35754113?v=4","oauthProvider","github","oauthId","35754113","isAdmin","stripeCustomerId","handle","handleNormalized","lifecycleEmailsEnabled",true,"createdAt",1791491331589,"updatedAt","f6464c60f51540009feba9cc3993f5a6","files",{"_75":76,"_77":78,"_79":80},"270fdb6c",{"_81":87,"_83":88},"8dbc301e",{"_81":85,"_83":86},"b809c858",{"_81":82,"_83":84},"name","styles.css","text",".tooltip {\n position: absolute;\n text-align: left;\n padding: 8px;\n background-color: #fff;\n border: 1px solid #ddd;\n border-radius: 4px;\n pointer-events: none;\n font-size: 12px;\n}\n","index.html","\n\n \n \n \n Pie Chart\n \n \n \n

\n\n \n \n \n\n","index.js","// Fetch data from CSV file\nd3.csv(\n 'https://gist.githubusercontent.com/sajidali1279/b466718f38e8e5ec4d12fe852783dc20/raw/d1771472a6ce399409b37b8421ebcd140d35aa9b/question1.csv',\n)\n .then(function (data) {\n // Convert string numbers to actual numbers\n data.forEach(function (d) {\n d.production_budget_USD = +d.production_budget_USD;\n d.worldwide_gross_USD = +d.worldwide_gross_USD;\n d.lead1_fee_USD = +d.lead1_fee_USD;\n d.lead2_fee_USD = +d.lead2_fee_USD;\n });\n\n // Calculate total gross\n var totalGross = d3.sum(\n data,\n (d) => d.worldwide_gross_USD,\n );\n\n // Setup SVG\n var width = 600;\n var height = 400;\n var radius = Math.min(width, height) / 2;\n\n var svg = d3\n .select('#pie-chart')\n .append('svg')\n .attr('width', width)\n .attr('height', height)\n .append('g')\n .attr(\n 'transform',\n 'translate(' + width / 2 + ',' + height / 2 + ')',\n );\n\n // Setup color scale\n var color = d3.scaleOrdinal(d3.schemeCategory10);\n\n // Setup arc\n var arc = d3.arc().innerRadius(0).outerRadius(radius);\n\n // Setup pie layout\n var pie = d3.pie().value((d) => d.worldwide_gross_USD);\n\n // Generate pie chart\n var arcs = svg\n .selectAll('arc')\n .data(pie(data))\n .enter()\n .append('g');\n\n arcs\n .append('path')\n .attr('d', arc)\n .attr('fill', (d) => color(d.data.movie_title))\n .on('mouseover', function (d) {\n var coordinates = d3.mouse(this);\n var x = coordinates[0];\n var y = coordinates[1];\n tooltip\n .transition()\n .duration(200)\n .style('opacity', 0.9);\n tooltip\n .html(\n '' +\n d.data.movie_title +\n '
Worldwide Gross: $' +\n d.data.worldwide_gross_USD,\n )\n .style('left', x + 10 + 'px')\n .style('top', y - 28 + 'px');\n })\n .on('mouseout', function (d) {\n tooltip\n .transition()\n .duration(500)\n .style('opacity', 0);\n });\n\n // Add tooltip div\n var tooltip = d3\n .select('body')\n .append('div')\n .attr('class', 'tooltip')\n .style('opacity', 0);\n\n // Add legend\n var legend = svg\n .selectAll('.legend')\n .data(data)\n .enter()\n .append('g')\n .attr('class', 'legend')\n .attr('transform', function (d, i) {\n return 'translate(0,' + (i * 20 - height / 4) + ')';\n });\n\n legend\n .append('rect')\n .attr('x', width / 4)\n .attr('width', 10)\n .attr('height', 10)\n .attr('fill', (d) => color(d.movie_title));\n\n legend\n .append('text')\n .attr('x', width / 4 + 20)\n .attr('y', 9)\n .attr('dy', '.35em')\n .text((d) => d.movie_title);\n\n // Add X and Y labels\n svg\n .append('text')\n .attr('text-anchor', 'middle')\n .attr(\n 'transform',\n 'translate(0,' + (height / 2 + 20) + ')',\n )\n .text('Worldwide Gross (USD)');\n\n svg\n .append('text')\n .attr('text-anchor', 'middle')\n .attr(\n 'transform',\n 'translate(' +\n (-width / 2 - 20) +\n ',' +\n height / 2 +\n ') rotate(-90)',\n )\n .text('Movie Title');\n })\n .catch(function (error) {\n console.log('Error fetching the data: ', error);\n });\n","slug","Q1_piechart","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","b00872d109b04672a05faff3be8c7c1d","startCommitId","1b5af9b2b49643f29f93fdd6ff88e6e4","forkedFrom","forkedFromVisibility",1713322633000,1713323674000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]