[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_117":-5,"_61":16,"_118":-5,"_119":120,"_121":122},"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,"_96":71,"_44":97,"_98":-7,"_99":51,"_100":49,"_101":-5,"_102":103,"_104":16,"_105":106,"_107":108,"_109":43,"_110":-7,"_68":111,"_70":112,"_113":-5,"_114":67,"_115":116},"vizContent",{"_42":71,"_72":73,"_28":29},"ownerAccount",{"_42":49,"_50":51,"_52":53,"_54":48,"_55":56,"_57":58,"_59":60,"_61":16,"_62":-7,"_63":41,"_64":65,"_66":67,"_68":69,"_70":69},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz",{"_42":43,"_44":45,"_46":41,"_47":48},"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/2692f4e1d0514a9ab508f367741deeea","author","Deeraj7","id","29df126462dd466fadc4167ed0ef82b4","title","scatter_KL","ownerHandle","ownerDisplayName","Deeraj Thakkilapati","v3-user-deeraj7","accountType","user","email","deerajthakkilapati@gmail.com","displayName","avatar","https://avatars.githubusercontent.com/u/118544169?v=4","oauthProvider","github","oauthId","118544169","isAdmin","stripeCustomerId","handle","handleNormalized","deeraj7","lifecycleEmailsEnabled",true,"createdAt",1791068023875,"updatedAt","2692f4e1d0514a9ab508f367741deeea","files",{"_74":75,"_76":77,"_78":79,"_80":81,"_82":83},"270fdb6c",{"_84":94,"_86":95},"29fbc049",{"_84":92,"_86":93},"8dbc301e",{"_84":90,"_86":91},"b809c858",{"_84":88,"_86":89},"c9ba7f63",{"_84":85,"_86":87},"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.axis-label {\n font-size: 1.5em;\n font-weight: bold;\n fill: black;\n}\n","index.html","\n\n \n Retail Store Sales Area Chart\n \n \n \n \n \n

Monthly Sales Distribution

\n \n \n \n \n\n","README.md","","index.js","// Define URI for the new data set\nconst csvUrl =\n 'https://gist.githubusercontent.com/Deeraj7/162b0dda17d1d40d13a8e7c6d40a44d4/raw/1eac1988c1e8d8b7edd89fc20896c510d3b75034/monthlysales';\n\n// Fetch data from the URI\nd3.csv(csvUrl).then((data) => {\n // Select the SVG from the HTML body\n const svg = d3.select('svg');\n const margin = {\n top: 20,\n right: 30,\n bottom: 50,\n left: 60,\n };\n const width =\n +svg.attr('width') - margin.left - margin.right;\n const height =\n +svg.attr('height') - margin.top - margin.bottom;\n\n const g = svg\n .append('g')\n .attr(\n 'transform',\n `translate(${margin.left},${margin.top})`,\n );\n\n // Parse the date and sales\n const parseDate = d3.timeParse('%B');\n data.forEach((d) => {\n d.Month = parseDate(d.Month);\n d.Sales = +d.Sales;\n });\n\n // Add X axis\n const x = d3\n .scaleTime()\n .domain(d3.extent(data, (d) => d.Month))\n .range([0, width]);\n\n g.append('g')\n .attr('transform', `translate(0,${height})`)\n .call(d3.axisBottom(x).tickFormat(d3.timeFormat('%B')))\n .selectAll('text')\n .attr('transform', 'translate(-10,0)rotate(-45)')\n .style('text-anchor', 'end');\n\n // Add Y axis\n const y = d3\n .scaleLinear()\n .domain([0, d3.max(data, (d) => d.Sales)])\n .range([height, 0]);\n\n g.append('g').call(d3.axisLeft(y));\n\n // Add the area\n const area = d3\n .area()\n .x((d) => x(d.Month))\n .y0(height)\n .y1((d) => y(d.Sales));\n\n g.append('path')\n .datum(data)\n .attr('fill', 'steelblue')\n .attr('fill-opacity', 0.7)\n .attr('stroke', 'none')\n .attr('d', area);\n\n // Add labels\n g.append('text')\n .attr('text-anchor', 'middle')\n .attr('x', width / 2)\n .attr('y', height + margin.bottom - 10)\n .attr('class', 'axis-label')\n .text('Month');\n\n g.append('text')\n .attr('text-anchor', 'middle')\n .attr('x', -height / 2)\n .attr('y', -margin.left + 20)\n .attr('transform', 'rotate(-90)')\n .attr('class', 'axis-label')\n .text('Sales');\n});\n","slug","Area Chart KL","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","ab88b72cce3247208e13cb5456c62ff0","startCommitId","0432910682604fc7a4e1ae1876559660","forkedFrom","forkedFromVisibility",1720623182000,1720623692000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]