Stacked Bar Chart

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_104":-5,"_60":16,"_105":-5,"_106":107,"_108":109},"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":70,"_83":70,"_44":84,"_85":-7,"_86":51,"_87":49,"_88":-5,"_89":90,"_91":16,"_92":93,"_94":95,"_96":43,"_97":-7,"_67":98,"_69":99,"_100":-5,"_101":66,"_102":103},"vizContent",{"_42":70,"_71":72,"_28":29},"ownerAccount",{"_42":49,"_50":51,"_52":48,"_53":48,"_54":55,"_56":57,"_58":59,"_60":16,"_61":-7,"_62":41,"_63":64,"_65":66,"_67":68,"_69":68},"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/AsheshPinisetti/5ed484110b9e495eb3ae6881dffc2d41","author","AsheshPinisetti","id","af5246bbd42542d3b27f8e9b368fa9a7","title","Task 8 - tutorial 2","ownerHandle","ownerDisplayName","asheshpinisetti@my.unt.edu","v3-user-asheshpinisetti","accountType","user","email","displayName","avatar","https://avatars.githubusercontent.com/u/143632065?v=4","oauthProvider","github","oauthId","143632065","isAdmin","stripeCustomerId","handle","handleNormalized","asheshpinisetti","lifecycleEmailsEnabled",true,"createdAt",1791491416172,"updatedAt","5ed484110b9e495eb3ae6881dffc2d41","files",{"_73":74,"_75":76},"67206624",{"_77":81,"_79":82},"8dbc301e",{"_77":78,"_79":80},"name","index.html","text","\n\n \n \n Stacked Bar Chart\n \n \n \n \n \n

\n\n \n \n \n \n\n","d3.js","const data = [\n {\n age: 20,\n gender: 'Female',\n maritalStatus: 'Single',\n occupation: 'Student',\n monthlyIncome: 'No Income',\n education: 'Post Grad',\n familySize: 4,\n },\n {\n age: 24,\n gender: 'Female',\n maritalStatus: 'Single',\n occupation: 'Student',\n monthlyIncome: 'Below Rs.10000',\n education: 'Graduate',\n familySize: 3,\n },\n {\n age: 22,\n gender: 'Male',\n maritalStatus: 'Single',\n occupation: 'Student',\n monthlyIncome: 'Below Rs.10000',\n education: 'Post Grad',\n familySize: 3,\n },\n {\n age: 22,\n gender: 'Female',\n maritalStatus: 'Single',\n occupation: 'Student',\n monthlyIncome: 'No Income',\n education: 'Graduate',\n familySize: 6,\n },\n {\n age: 22,\n gender: 'Male',\n maritalStatus: 'Single',\n occupation: 'Student',\n monthlyIncome: 'Below Rs.10000',\n education: 'Post Grad',\n familySize: 4,\n },\n];\n\n// Set dimensions and margins for the graph\nconst margin = { top: 20, right: 20, bottom: 30, left: 40 },\n width = 960 - margin.left - margin.right,\n height = 500 - margin.top - margin.bottom;\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 + 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// Set up the scales\nconst x = d3.scaleBand().range([0, width]).padding(0.1);\nconst y = d3.scaleLinear().range([height, 0]);\n\n// Set up the stack keys (the income levels)\nconst stackKeys = ['No Income', 'Below Rs.10000'];\n\n// Process the data to stack it\nconst series = d3\n .stack()\n .keys(stackKeys)\n .value((d, key) => {\n return key === 'No Income'\n ? d.monthlyIncome === 'No Income'\n ? 1\n : 0\n : d.monthlyIncome === 'Below Rs.10000'\n ? 1\n : 0;\n })(data);\n\n// Set domains\nx.domain(data.map((d) => d.age + d.gender)); // Unique identifier for each bar\ny.domain([\n 0,\n d3.max(series, (serie) => d3.max(serie, (d) => d[1])),\n]).nice();\n\n// Add the bars\nsvg\n .selectAll('.serie')\n .data(series)\n .enter()\n .append('g')\n .attr('class', 'serie')\n .attr('fill', (d) => {\n // Color the bars based on income level\n return d.key === 'No Income'\n ? 'steelblue'\n : 'darkorange';\n })\n .selectAll('rect')\n .data((d) => d)\n .enter()\n .append('rect')\n .attr('x', (d) => x(d.data.age + d.data.gender))\n .attr('y', (d) => y(d[1]))\n .attr('height', (d) => y(d[0]) - y(d[1]))\n .attr('width', x.bandwidth());\n\n// Add the X Axis\nsvg\n .append('g')\n .attr('transform', `translate(0,${height})`)\n .call(d3.axisBottom(x));\n\n// Add the Y Axis\nsvg.append('g').call(d3.axisLeft(y));\n","slug","question 2","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","78ac9dace9ed455682b044a82f2faf8d","startCommitId","204277620c3b4ace939890007906875b","forkedFrom","forkedFromVisibility",1713144974000,1713149120000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]