25:["$","title",null,{"children":"Plot: Stacked bar chart | Jaswant's Workspace | Observable"}] 49:T56f,// Define your data /* casino= [ { day: 1, bet: 10.021, operator: "Fake1" }, { day: 2, bet: 20.572727272, operator: "Fake1" }, { day: 3, bet: 12, operator: "Fake1" },{ day: 4, bet: 15, operator: "Fake2" },{ day: 5, bet: 30, operator: "Fake2" },{ day: 6, bet: 40, operator: "Fake4" },{ day: 7, bet: 35, operator: "Fake3" } ];*/ // Create an Observable Plot chart chart = Plot.plot({ //Plot.plot({ marks: [ Plot.barY(casino, { x: "day", y: "bet", fill: "operator", tip: true}), // Plot.tip(casino, Plot.pointerX({x: "day", y: "bet", fill: "operator"})) ], width: 500, height: 400, marginTop: 20, marginBottom: 60, marginLeft: 100, x: { axis: "bottom", tickFormat: "d", label: xAxisUnit }, y: { axis: "left", label: yAxisUnit, tickFormat: d => { if (yAxisUnit === 'bet' || yAxisUnit === 'win') { return "\u20AC" + d3.format('f')(d); } return d3.format('f')(d); } }, color: { scheme: "category10" }, legend: { interactive: true }, grid: true, }) /* // Handle click events chart.addEventListener("click", (event) => { const { x, y } = event.datum.datum; if (filters.days) { alert('day'); //handleHourSelect(x); } else if (filters.months) { alert('months'); //handleDaySelect(x); } else { alert('year'); //handleMonthSelect(x, true); } }); // Render the chart chart */4a:[{"id":"3ea96de39eb40936da1c5e7bf932e124861c50b9e45569cb17e694e9b9ed462c79684b2ede7266422ee880930d43408010a4741695709c094f9f6827c62534db","href":"https://static.observableusercontent.com/files/3ea96de39eb40936da1c5e7bf932e124861c50b9e45569cb17e694e9b9ed462c79684b2ede7266422ee880930d43408010a4741695709c094f9f6827c62534db","name":"us-population-state-age.csv","type":"text/csv","lastModified":1694950960025.718,"size":3516}] 29:{"id":"7a912ae413921a07","slug":null,"title":"Plot: Stacked bar chart","thumbnail":"95a40fd556fa54bb86778f028a39600d1bd26869ebcf62d68db14682b8e1d33e","access_level":"public","create_time":"$D2023-09-17T11:42:40.025Z","update_time":"$D2023-11-07T10:29:07.753Z","view_time":null,"first_public_time":"$D2023-09-17T11:42:40.025Z","has_unpublished_edits":null,"fork":{"id":"b85cd1af4d8b9931","slug":null,"title":"Plot: Stacked bar chart","owner":{"id":"4e5a4faab8d03911","login":"jaswant-ws","name":"Jaswant's Workspace"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4e5a4faab8d03911","login":"jaswant-ws","name":"Jaswant's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/2fe16d976dcdcf8cf18d03e45588c40fb6a3c07f9ab23298af504ebb682063b3","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":436,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"530af98d9a8a094a","login":"jaswant","name":"Jaswant","avatar_url":"https://avatars-next.observableusercontent.com/b4c3e4b001610489eba828175516b0ae6af1a20ba48befa421f8afaea3693236","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"530af98d9a8a094a","login":"jaswant","name":"Jaswant","avatar_url":"https://avatars-next.observableusercontent.com/b4c3e4b001610489eba828175516b0ae6af1a20ba48befa421f8afaea3693236","tier":null,"role":"editor"},{"type":"team","id":"4e5a4faab8d03911","login":"jaswant-ws","name":"Jaswant's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/2fe16d976dcdcf8cf18d03e45588c40fb6a3c07f9ab23298af504ebb682063b3","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Plot: Stacked bar chart","cells":[{"id":0,"value":"

Plot: Stacked bar chart

Observable Plot › Gallery

\n\n# Stacked bar chart\n\nPopulation by age and state. Compare to [horizontal stacked bars](/@observablehq/plot-stacked-bar-chart-horizontal?intent=fork), [normalized stacked bars](/@observablehq/plot-stacked-bar-chart-normalized?intent=fork), [grouped bars](/@observablehq/plot-grouped-bar-chart?intent=fork) and a [dot plot](/@observablehq/plot-dot-plot?intent=fork). Data: [American Community Survey](/@mbostock/working-with-the-census-api)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"Plot.plot({\n width: 728,\n height :600,\n marginLeft: 30,\n x: {label: \"state\", labelArrow: \"right\"},\n y: {label: \"pop\", labelArrow: \"right\", labelOffset: 10, labelAnchor: \"top\", \n tickFormat: \"s\", tickPadding: 1, tickSize:10, tickSpacing: 50},\n color: {scheme: \"Oranges\", legend: true, width: 340, label: \"Age (years)\",\n swatchSize: 5, swatchWidth: 20, swatchHeight:5, columns: 2,\n marginLeft: 0, opacity: 1, \n insetRight: true,\n },\n marks: [\n Plot.barY(tidy, {\n x: \"state\",\n y: \"population\",\n fill: \"age\",\n sort: {color: null, x: \"-y\"}\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"population = FileAttachment(\"us-population-state-age.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"The following cells transform the dataset from a “wide” format—where the observations for all age groups are attached to a single row for each State—to a “tidy” format having one observation per row.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"tidy = population.columns.slice(1)\n.flatMap((age) => population.map(d => ({state: d.name, age, population: d[age]})))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"x = population.columns.slice(1)\n .flatMap(age => population.map(d => ({state: d.name, age, population: d[age]})));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"columns = population.columns.slice(1);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"\n((tidy) => html`\n\n

${tidy}${tidy.legend(\n \"color\"\n)}\n\n`)(\n Plot.plot({\n width: 728,\n marginLeft: 80,\n y: { grid: true ,tickFormat: \"s\"},\n marks: [\n Plot.barY(tidy, {\n x: \"state\",\n y: \"population\",\n fill: \"age\",\n sort: {color: null, x: \"-y\"}\n }),\n Plot.ruleY([0])\n ]\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"tidy1 = [\n { day: 1, bet: 10, operator: \"Fake1\" }, { day: 2, bet: 20, operator: \"Fake1\" }, { day: 3, bet: 12, operator: \"Fake1\" },{ day: 4, bet: 15, operator: \"Fake2\" },{ day: 5, bet: 30, operator: \"Fake2\" },{ day: 6, bet: 40, operator: \"Fake4\" },{ day: 7, bet: 35, operator: \"Fake3\" }\n];\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"\n\n( (chart) => html`\n\n

${chart}${chart.legend(\n \"color\"\n)}\n\n`)(\n Plot.plot({\n width: 728,\n marginLeft: 80,\n y: { grid: true ,tickFormat: \"s\"},\n marks: [\n Plot.barY(tidy1, {\n x: \"day\",\n y: \"bet\",\n fill: \"operator\",\n sort: {color: null, x: \"-y\"},\n title: (d) =>\n `${d.operator} \\n day: ${d.day} \\n bet: ${d.bet}` // \\\n }),\n Plot.ruleY([0])\n ],\n tooltip: {\n fill: \"red\",\n stroke: \"blue\",\n r: 8\n },\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"casino= [\n { day: 1, bet: 10, operator: \"Fake1\" }, { day: 2, bet: 20, operator: \"Fake1\" }, { day: 3, bet: 12, operator: \"Fake1\" },{ day: 4, bet: 15, operator: \"Fake1\" },{ day: 5, bet: 30, operator: \"Fake1\" },{ day: 6, bet: 40, operator: \"Fake1\" },{ day: 7, bet: 35, operator: \"Fake1\" },{day: 1, bet: 10.021, operator: \"Fake2\" }, { day: 2, bet: 20.572727272, operator: \"Fake2\" }, { day: 3, bet: 12, operator: \"Fake2\" },{ day: 4, bet: 15, operator: \"Fake2\" },{ day: 5, bet: 30, operator: \"Fake2\" },{ day: 6, bet: 40, operator: \"Fake4\" },{ day: 7, bet: 35, operator: \"Fake3\" }\n];\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"yAxisUnit = 'bet';\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"xAxisUnit = 'days';","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":" filters = new Object({days :true, months:false});\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"filters.days ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"Dynamic Text : ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":429,"value":" document.getElementById('text').value = 'day';","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"chart.addEventListener(\"click\", (event) => {\n const { x} = event.datum.datum;\n if (filters.days) {\n document.getElementById('text').value = 'day';\n //handleHourSelect(x);\n } else if (filters.months) {\n alert('months');\n //handleDaySelect(x);\n } else {\n alert('year');\n //handleMonthSelect(x, true);\n }\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"chart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null