25:["$","title",null,{"children":"An interactive beeswarm chart: visualising my energy accounting experiment | 56fc95d9361213d8 | Observable"}] 49:T78f,md`# An interactive beeswarm chart: visualising my energy accounting experiment * I came across the idea of energy accounting while trying to understand what autism is, and (more importantly to me at the moment) how one lives well with autism. * The basic idea of energy accounting is fairly simple and intuitive. * Any given experience or activity (e.g. traveling on a bus or going to a long meeting at work) can be thought of as either energy depleting or replenishing. Some tasks may be neutral too. * The person doing the energy accounting can assign a score (typically out of 100) to each experience or activity. * This score reflects how much energy is ‘spent’ or ‘earned’ by participating in the experience or activity. * The idea is then to try to balance energy spendings and earnings. Which, in turn, hopefully results in not getting too fatigued or burning out. * It is important to note that energy accounting is closely related to Spoon theory. Where the number of spoons available to a person acts as a metaphor for how much energy they have available. This spoons-based ‘accounting’ approach to managing fatigue is widely used by people experiencing a range of disabilities.
**With thanks to** Code and ideas from the following notebooks are used throughout: * [Force-directed Beeswarm](https://observablehq.com/d/23130b2b6d4f8cd2) * [Prototyping in D3](https://observablehq.com/@wattenberger/prototyping-in-d3) * [Tooltip D3 Convention](https://observablehq.com/@clhenrick/tooltip-d3-convention)
**Reading the chart** The chart below shows some of my energy accounting data from a week in March 2022. Hover over the points in the beeswarm chart for more information. When I used the chart, I'm planning to put the colour legend earlier in the data story. * Pink is for demanding activities. * Orange for sensory issues. * Blue is for rest. * Green is for replenishing activities. `4a:T5ca,// svg = wrapper.append("svg") // .attr("viewBox", [0,0, width, dms.height]) // .style("overflow", "visible") plot_chart = function(){ // draw chart structure const container = d3.select( html`

${tooltipTemplate}

` ); const tooltipDiv = container.select(".tooltip"); const svg = container.append("svg") .attr("width", dms.width) .attr("height", dms.height); const bounds = svg.append("g") .attr("transform", move(dms.marginLeft, dms.marginTop)); // draw axis const drawXAxes = bounds.append("g") .attr("transform", move(0, dms.boundedHeight)) .attr("class", "xAxisGroup") .call(xAxisGen); const addData = bounds.selectAll("circle") .data(data_bs) // .join("circle") .enter() .append("circle") .attr("stroke", "black") .attr("stroke-width", 0) .attr("fill-opacity", 0.8) .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => r_scale(d.data.size)) .attr("fill", (d) => colorScale(d.data.class)) // add tool tips .call(tooltip, tooltipDiv); // Add X axis label: const addAxisLab = bounds.append("g") .attr("class", "xAxisLab") .append("text") .attr("text-anchor", "middle") .attr("x", (dms.boundedWidth / 2)) .attr("y", dms.height - 20) //.attr("fill", "red") .text("Impact on my energy resources"); return container.node() } 4b:T8d9,tooltip = (selectionGroup, tooltipDiv) => { // padding between the tooltip and mouse cursor const MOUSE_POS_OFFSET = 8; selectionGroup.each(function () { d3.select(this) .on("mouseover.tooltip", handleMouseover) .on("mousemove.tooltip", handleMousemove) .on("mouseleave.tooltip", handleMouseleave); }); function handleMouseover() { // show/reveal the tooltip, set its contents, // style the element being hovered on showTooltip(); setContents(d3.select(this).datum()); setStyle(d3.select(this)); } function handleMousemove(event) { // update the tooltip's position const [mouseX, mouseY] = d3.pointer(event, this); // add the left & top margin values to account for the SVG g element transform setPosition(mouseX + dms.marginLeft, mouseY + dms.marginTop); } function handleMouseleave() { // do things like hide the tooltip // reset the style of the element being hovered on hideTooltip(); resetStyle(d3.select(this)); } function showTooltip() { tooltipDiv.style("display", "block"); } function hideTooltip() { tooltipDiv.style("display", "none"); } function setPosition(mouseX, mouseY) { tooltipDiv .style( "top", mouseY < dms.height / 2 ? `${mouseY + MOUSE_POS_OFFSET}px` : "initial" ) .style( "right", mouseX > width / 2 ? `${width - mouseX + MOUSE_POS_OFFSET}px` : "initial" ) .style( "bottom", mouseY > dms.height / 2 ? `${dms.height - mouseY + MOUSE_POS_OFFSET}px` : "initial" ) .style( "left", mouseX < width / 2 ? `${mouseX + MOUSE_POS_OFFSET}px` : "initial" ); } function setContents(datum) { // customize this function to set the tooltip's contents however you see fit tooltipDiv .selectAll("p") .data(Object.entries(simplifyForTT(datum))) .join("p") .filter(([key, value]) => value !== null && value !== undefined) //.filter(([key, value]) => typeof value === "object") .html(([key, value]) => `${key}: ${ typeof value === "object" ? value.toLocaleString("en-US") : value }`); } }4c:[{"id":"3c4180b08a6334ed14718996aae3937ac8ebf0975294b3d6e8d7a9d5aab665c68515803efe3c37006b4c2caf4a51b365bbb62bb4d784ffc29612da691a79db34","href":"https://static.observableusercontent.com/files/3c4180b08a6334ed14718996aae3937ac8ebf0975294b3d6e8d7a9d5aab665c68515803efe3c37006b4c2caf4a51b365bbb62bb4d784ffc29612da691a79db34","name":"beeswarm.json","type":"application/json","lastModified":1649792794347.108,"size":12663}] 29:{"id":"acc03707a726dfa0","slug":null,"title":"An interactive beeswarm chart: visualising my energy accounting experiment","thumbnail":"72920e06f0c700ecd60eb942939ef941ea1275fa6cd1e2dd5456966d20fb58b8","access_level":"public","create_time":"$D2022-04-10T18:46:50.134Z","update_time":"$D2023-01-30T11:48:12.784Z","view_time":null,"first_public_time":"$D2023-01-30T11:03:26.196Z","has_unpublished_edits":null,"fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"5a8c2152f835499f","login":"56fc95d9361213d8","name":"","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1747,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"56fc95d9361213d8","login":"56fc95d9361213d8","name":"","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"56fc95d9361213d8","login":"56fc95d9361213d8","name":"","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"An interactive beeswarm chart: visualising my energy accounting experiment","cells":[{"id":114,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1735,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1460,"value":"plot_chart()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"import {move} from \"@wattenberger/chart-utility-functions\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"## 1. Read in the Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":194,"value":"data = FileAttachment(\"beeswarm.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"## 2. access metrics","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":536,"value":" // accessor function\nxAccessor = d => d.impact","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":" // accessor function\nrAccessor = d => d.size","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"// constant y position \ny = dms.boundedHeight / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"## 3. Draw the chart structure","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":606,"value":"dms = {\n let dms = {\n width: width,\n height: 300,\n marginTop: 1,\n marginRight: 50,\n marginBottom: 75,\n marginLeft: 70,\n }\n dms.boundedWidth = dms.width - dms.marginLeft - dms.marginRight\n dms.boundedHeight = dms.height - dms.marginTop - dms.marginBottom\n \n return dms\n}\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"dms","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1318,"value":"## Calculate Beeswarm positions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1326,"value":"// set up beeswarm function\nbeeswarm_func = beeswarmForce()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1330,"value":"// convert raw data to beeswarm layout\ndata_bs = beeswarm_func(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1509,"value":"data_bs","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"## 4. Create Scales","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"x_scale = d3.scaleLinear()\n .domain(d3.extent(data, xAccessor))\n .range([0, dms.boundedWidth])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"r_scale = d3.scaleSqrt()\n .domain([0, 100])\n .range([1, Math.sqrt(dms.width * dms.boundedHeight) / 30])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1435,"value":"colorScale = d3.scaleOrdinal()\n .domain([\"Sensory\", \"Demands\", \"Rest\", \"Activity\"])\n .range([\"#E48367\", \"#CC66A3\", \"#6E99C3\", \"#3F736E\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1702,"value":"colorScaleHighlight = d3.scaleOrdinal()\n .domain([\"Sensory\", \"Demands\", \"Rest\", \"Activity\"])\n .range([\"#FF3900\", \"#FF0099\", \"#0082FF\", \"#00FFE6\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"## 5. Create axes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":648,"value":"xAxisGen = d3.axisBottom(x_scale)\n .tickSizeOuter(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1310,"value":"## Plot chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":612,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1211,"value":"## 8. Apply CSS Styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":944,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":841,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"## Draw the Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"// {\n// const svg = d3.create(\"svg\")\n// .attr(\"width\", chartwidth + margin.left + margin.right)\n// .attr(\"height\", chartheight + margin.top + margin.bottom);\n \n// const g = svg.append(\"g\")\n// .attr(\"transform\", `translate(${[margin.left, margin.top]})`);\n \n// g.append(\"g\")\n// .call(d3.axisBottom(x_scale).tickSizeOuter(0))\n// .attr(\"transform\", `translate(0, ${chartheight / 1.25})`);\n \n// g.selectAll(\"circle\")\n// .data(beeswarm_cell(data))\n// .join(\"circle\")\n// .attr(\"stroke\", \"black\")\n// .attr(\"fill-opacity\", 0.8)\n// .attr(\"cx\", d => d.x)\n// .attr(\"cy\", d => d.y)\n// .attr(\"r\", d => r_scale(d.data.size));\n \n// return svg.node();\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"## Convert raw data to beeswarm layout","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":163,"value":"beeswarmForce = function(){\n\n // number of steps in the force simulation\n let ticks = 300;\n\n // create a function to map from data to data in beeswarm layout\n function beeswarm(dat){\n\n // scale the raw data to pixels\n const entries = dat.map(d => {\n return {\n x0: x_scale(xAccessor(d)),\n y0: y,\n r: 1 + r_scale(rAccessor(d)),\n data: d\n }\n });\n\n // run force simulation\n const simulation = d3.forceSimulation(entries)\n .force(\"x\", d3.forceX(d => d.x0))\n .force(\"y\", d3.forceY(d => d.y0))\n .force(\"collide\", d3.forceCollide(d => d.r));\n \n for (let i = 0; i < ticks; i++) simulation.tick();\n \n return entries;\n } \n return beeswarm;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"## Interactivity\nFrom https://observablehq.com/@clhenrick/tooltip-d3-convention","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1230,"value":"//d3 = require(\"d3-selection@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":766,"value":"tooltipId = DOM.uid().id","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1222,"value":"tooltipTemplate = html`

\n \n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1224,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1689,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1605,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1226,"value":"function resetStyle(selection) {\n selection.attr(\"fill\", (d) => colorScale(d.data.class));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1228,"value":"function setStyle(selection) {\n selection.attr(\"fill\", (d) => colorScaleHighlight(d.data.class));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1607,"value":"simplifyForTT = function(obj)\n{let obj2 = {impact: obj.data.impact,\n notes: obj.data.notes};\nreturn obj2;}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1653,"value":"simplifyForTT(data_bs[1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1673,"value":"data_bs[1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null