2f:[] 2d:{"title":"Observable Plot Drilldown","cells":[{"id":0,"value":"# Observable Plot Drilldown","pinned":false,"hidden":false,"mode":"md"},{"id":187,"value":"Testing click drilldown events with Observable Plot. Click on a bar in the bar chart below to update the weight distribution graph.","pinned":false,"hidden":false,"mode":"md"},{"id":344,"value":"## Example of a Side-by-Side View\nSimple idea using two charts. Click on the bar chart to change the density chart on the left.","pinned":false,"hidden":false,"mode":"md"},{"id":72,"value":"

${barChart()}

${densityChart()}

","pinned":false,"hidden":false,"mode":"html"},{"id":342,"value":"## Example with Return Button\nIn this example I'm trying out a return button function to toggle between the parent chart (bar chart) and the drilldown chart (density chart).","pinned":false,"hidden":false,"mode":"md"},{"id":277,"value":"

${displayChart(chart)}

","pinned":false,"hidden":false,"mode":"html"},{"id":190,"value":"## Chart Functions\nCreate chart functions to render charts above.","pinned":false,"hidden":false,"mode":"md"},{"id":416,"value":"Functions for side-by-side view.","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"barChart = () => { \n \n return Plot.plot({\n title: 'Total Female Olympic Athletes by Sport',\n subtitle: \"Click to drilldown into a sport\",\n height:400,\n marginLeft: 0,\n x: {tickSize:0, grid:true, domain: [0, 1200]},\n y: { tickSize:0, label:null, tickFormat: (y) => ''},\n marks: [\n Plot.barX(female_olympians, Plot.groupY(\n {x: \"count\"}, \n {y: \"sport\", title: \"sport\", fill: d=> d.sport === clicked ? '#19E385' : '#01BAEF', insetTop:10, insetBottom:10, render: onClick, sort: {y: \"-x\"}})),\n Plot.text(female_olympians, Plot.groupY({x: \"count\", text: \"count\"}, {y: \"sport\", dx: 15, sort: {y: \"-x\"}})),\n Plot.text(female_olympians, Plot.groupZ(\n {y: \"first\", text: \"first\"}, \n {y: \"sport\", z: 'sport', x:0, text:\"sport\",textAnchor: \"start\", dy:-17, fontWeight:'bold', fontSize:13}))\n ],\n tooltip: {fill: '#19E385', opacity: 1}\n})\n\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"densityChart = () => { \n \n return Plot.plot({\n height: 400,\n title: 'Weight Distribution: ' + clicked,\n y: {grid: true, tickSize:0},\n x: {label: 'Weight (lbs)', tickSize:0},\n marks: [\n Plot.areaY(female_olympians.filter(d=> d.sport === clicked),\n Plot.binX({y: 'count'},{x: \"weight\", fill: '#19E385', fillOpacity: 0.8, curve: 'basis', thresholds:40, stroke:'#19E385', strokeWidth:2}))\n ]\n})\n\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":414,"value":"Functions for chart drilldown with return button.","pinned":false,"hidden":false,"mode":"md"},{"id":360,"value":"parentChart = () => { \n \n return Plot.plot({\n title: 'Total Female Olympic Athletes by Sport',\n subtitle: \"Click to drilldown into a sport\",\n height:400,\n width: 700,\n marginLeft: 0,\n x: {tickSize:0, grid:true, domain: [0, 1200]},\n y: { tickSize:0, label:null, tickFormat: (y) => ''},\n marks: [\n Plot.barX(female_olympians, Plot.groupY(\n {x: \"count\"}, \n {y: \"sport\", title: \"sport\", fill: '#01BAEF', insetTop:10, insetBottom:10, render: onClickDrilldown, sort: {y: \"-x\"}})),\n Plot.text(female_olympians, Plot.groupY(\n {x: \"count\", text: \"count\"}, \n {y: \"sport\", dx: 15, sort: {y: \"-x\"}})),\n Plot.text(female_olympians, Plot.groupZ(\n {y: \"first\", text: \"first\"}, \n {y: \"sport\", z: 'sport', x:0, text:\"sport\",textAnchor: \"start\", dy:-17, fontWeight:'bold', fontSize:13}))\n ],\n tooltip: {fill: '#19E385', opacity: 1}\n})\n\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"drilldownChart = () => { \n\n const subset = female_olympians.filter(d=> d.sport === clickedGroup)\n const count = subset.length\n \n return Plot.plot({\n height: 400,\n width: 700,\n title: 'Weight Distribution: ' + clickedGroup,\n subtitle: \"Total of \" + count + \" athletes in this group\",\n y: {grid: true, tickSize:0},\n x: {label: 'Weight (lbs)', tickSize:0},\n marks: [\n Plot.text(subset, Plot.groupZ({text: 'first'}, {z: 'sport', frameAnchor: \"top-right\", text: d=> \"Return\", render: onClickReturn, fontSize: 12, className: \"return-button\"})),\n Plot.areaY(subset,\n Plot.binX({y: 'count'},{x: \"weight\", fill: '#19E385', fillOpacity: 0.8, curve: 'basis', thresholds:40, stroke:'#19E385', strokeWidth:2}))\n ]\n})\n\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"displayChart = (x) => {\n return x === 'Drilldown' ? drilldownChart() : parentChart()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"## On Click Function\nIdea adapted from Toph Tucker's [notebook](https://observablehq.com/@tophtucker/plot-click-handler-render-transform). Thank you Toph! ","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"onClick = (index, scales, values, dimensions, context, next) => {\n const el = next(index, scales, values, dimensions, context);\n const rects = el.querySelectorAll(\"rect\");\n for (let i = 0; i < rects.length; i++) {\n const d = values.channels.y.value[i];\n rects[i].addEventListener(\"click\", () => {\n mutable clicked = d; \n });\n }\n return el;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"Functions for seconde example with return button","pinned":false,"hidden":false,"mode":"md"},{"id":353,"value":"onClickDrilldown = (index, scales, values, dimensions, context, next) => {\n const el = next(index, scales, values, dimensions, context);\n const rects = el.querySelectorAll(\"rect\");\n for (let i = 0; i < rects.length; i++) {\n const d = values.channels.y.value[i];\n rects[i].addEventListener(\"click\", () => {\n mutable clickedGroup = d; // Set clicked value on click\n mutable chart = 'Drilldown'; // Change chart to 'drilldown'\n });\n }\n return el;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"onClickReturn = (index, scales, values, dimensions, context, next) => {\n const el = next(index, scales, values, dimensions, context);\n const texts = el.querySelectorAll(\"text\");\n for (let i = 0; i < texts.length; i++) {\n texts[i].addEventListener(\"click\", () => {\n mutable chart = 'Parent'; \n });\n }\n return el;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"## Hover Effect\nUse Plot from Mike Freeman's notebook to create on hover highlights.","pinned":false,"hidden":false,"mode":"md"},{"id":265,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":420,"value":"## Additional Function\nConvert lower case to sentence case (applied to sport).","pinned":false,"hidden":false,"mode":"md"},{"id":161,"value":"function toSentenceCase(str) {\n return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":372,"value":"## Mutable Variables ","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"mutable clicked = \"Athletics\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"mutable chart = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":356,"value":"mutable clickedGroup = \"Athletics\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":198,"value":"## Data\nSubset of the olympians data set.","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"female_olympians = olympians\n.filter(d=> d.sex === 'female' & ['athletics','aquatics','rowing','gymnastics','cycling', 'basketball', 'football','judo'].includes(d.sport))\n.map(obj => {\n return {\n ...obj, // Copy other properties\n sport: toSentenceCase(obj.sport) // Transform the 'sport' key\n };\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W2f","stdlib":"1","titling":"auto"}