[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_119":-5,"_63":16,"_120":-5,"_121":122,"_123":124},"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":73,"_98":73,"_44":99,"_100":-7,"_101":52,"_102":50,"_103":-5,"_104":105,"_106":16,"_107":108,"_109":110,"_111":43,"_112":-7,"_70":113,"_72":114,"_115":-5,"_116":69,"_117":118},"vizContent",{"_42":73,"_74":75,"_28":29},"ownerAccount",{"_42":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":16,"_64":-7,"_65":41,"_66":67,"_68":69,"_70":71,"_72":71},"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/Deeraj7/29df126462dd466fadc4167ed0ef82b4","author","Deeraj7","id","86a75dc8bdbe4965ba353a79d4bd44c8","title","Hello VizHub","ownerHandle","curran","ownerDisplayName","Curran Kelleher","v3-user-deeraj7","accountType","user","email","deerajthakkilapati@gmail.com","displayName","Deeraj Thakkilapati","avatar","https://avatars.githubusercontent.com/u/118544169?v=4","oauthProvider","github","oauthId","118544169","isAdmin","stripeCustomerId","handle","handleNormalized","deeraj7","lifecycleEmailsEnabled",true,"createdAt",1791068023875,"updatedAt","29df126462dd466fadc4167ed0ef82b4","files",{"_76":77,"_78":79,"_80":81,"_82":83,"_84":85},"270fdb6c",{"_86":96,"_88":97},"29fbc049",{"_86":94,"_88":95},"8dbc301e",{"_86":92,"_88":93},"b809c858",{"_86":90,"_88":91},"c9ba7f63",{"_86":87,"_88":89},"name","myMessage.js","text","// This is an example of an ES6 module.\nexport const message = 'Hello VizHub!';\n","style.css","body {\n font-family: Arial, sans-serif;\n}\n\nh1 {\n text-align: center;\n margin-top: 20px;\n}\n\nsvg {\n display: block;\n margin: auto;\n}\n\n.legend text {\n font-size: 12px;\n fill: black;\n}\n","index.html","\n\n \n Indian Restaurant Sales Pie Chart\n \n \n \n \n \n

Annual Sales Distribution

\n \n \n \n \n\n","README.md","","index.js","// Define colors for the sections in the pie chart\nconst sectionColors = [\n 'red',\n 'gray',\n 'yellow',\n 'lime',\n 'orange',\n 'skyblue',\n 'crimson',\n 'wheat',\n 'brown',\n];\n\n// Define URI for the data set\nconst csvUrl =\n 'https://gist.githubusercontent.com/Deeraj7/b8e29e51eb0101b52123523fbd5ae424/raw/b449cbaed62d74df160f2ebd966781790bcbcf4d/Indian%2520restaurant%2520Sales';\n\n// Fetch data from the URI\nd3.csv(csvUrl).then((data) => {\n // Aggregate sales data by year\n const yearSales = d3\n .rollups(\n data,\n (v) => d3.sum(v, (d) => +d.Sales),\n (d) => d.Year,\n )\n .map((d) => ({ Year: d[0], Sales: d[1] }));\n\n // Select the SVG from the HTML body\n const svg = d3.select('svg');\n const width = +svg.attr('width');\n const height = +svg.attr('height');\n const radius = Math.min(width, height) / 2;\n\n // Define a color scale for the chart sections\n const colors = d3\n .scaleOrdinal()\n .domain(yearSales.map((d) => d.Year))\n .range(sectionColors);\n\n // Define a function to generate arcs for the sections\n const arcGenerator = d3\n .arc()\n .innerRadius(0)\n .outerRadius(radius - 10);\n\n // Use the pie function from d3 to create a pie chart\n const pieGenerator = d3.pie().value((d) => d.Sales);\n\n // Create a group for the chart sections\n const g = svg\n .append('g')\n .attr(\n 'transform',\n `translate(${width / 2}, ${height / 2})`,\n );\n\n // Create path elements for the chart sections\n g.selectAll('path')\n .data(pieGenerator(yearSales))\n .enter()\n .append('path')\n .attr('d', arcGenerator)\n .attr('fill', (d) => colors(d.data.Year));\n\n // Create text labels for the chart sections\n g.selectAll('text')\n .data(pieGenerator(yearSales))\n .enter()\n .append('text')\n .attr(\n 'transform',\n (d) => `translate(${arcGenerator.centroid(d)})`,\n )\n .attr('dy', '0.35em')\n .style('text-anchor', 'middle')\n .text((d) => d.data.Sales);\n\n // Create a group for the chart legends\n const legend = svg\n .append('g')\n .attr('transform', `translate(${width - 200}, 20)`);\n\n // Create a legend for each chart section\n legend\n .selectAll('rect')\n .data(yearSales)\n .enter()\n .append('rect')\n .attr('x', 0)\n .attr('y', (d, i) => i * 20)\n .attr('width', 18)\n .attr('height', 18)\n .attr('fill', (d) => colors(d.Year));\n\n // Create text labels for the values in the legend\n legend\n .selectAll('text')\n .data(yearSales)\n .enter()\n .append('text')\n .attr('x', 24)\n .attr('y', (d, i) => i * 20 + 9)\n .attr('dy', '.35em')\n .text((d) => d.Year);\n});\n","slug","scatter_KL","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","9bdfe3f044d944cbb60a174e9631eb37","startCommitId","154064856f5a48708a85bd590c605f12","forkedFrom","forkedFromVisibility",1720621888000,1720656210000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]