2a:null 2b:["$","title",null,{"children":"Christmas memories | Line Ton That | Observable"}] 31:T48f,card = html`

My Christmas memories

${christmasTreeChart}

Mostly feeling

${excitedSq} Excited
${happySq} Happy
${sadSq} Sad
${noClueSq} Don't remember

Celebrating with:

Family

${generations}

Friends

In whose house(s)?

${atGrandParents} Grandparents
${atParents} Parents
${atInLaws} Parents in-laws
${atFriends} Friends

#SWD December 2023

Data: Personal

Designer: Line Ton That

`32:T12bd,christmasTreeChart = { const svg = d3.create("svg") .attr("width", selectedWidth) .attr("height", chartHeight) .style("background-color", darkBlue) .style("font-family", "sans-serif"); //.style("font-size","24"); let currentSound; drawDecadeLegend(svg); drawYearLegend(svg); // draw the tree const tree = svg .append("g") .attr("class", "tree") .style("border", "1px dashed") tree.append("path") .attr("fill",colorTree)//"none") .attr("stroke", colorTree) .attr("stroke-width",1)//5) .attr("d",branchesPath) .attr('transform', `translate(${xTreeOffset}, ${yOffset})scale(${treeScale})`); tree.append("path") .attr("fill","none") .attr("stroke", colorTree) .attr("stroke-width",4)//5) .attr("d",trunkPath) .attr('transform', `translate(${xTreeOffset}, ${yOffset})scale(${treeScale})`); // draw the baubles (the color corresponds to the main feeling during that Christmas period) const baubles = drawBaubles(svg); // draw the bauble hangers const hangers = svg.append("g") .selectAll("path") .data(dataset) .join("path") .attr("class", "hangers") .attr('transform', (d, i) => { const x = xScales[decade(d)](year(d)) const y = yDecadeScale(decade(d))+ yOddOrEven(year(d), distFromBranchMiddleAxis * treeScale) - radius - 3 return `translate(${x}, ${y})scale(${treeScale})` }) .attr("d", hangerPath) .attr("fill","none") .attr("stroke", decorationStrokeColor)//"red") .attr("stroke-width",2);//5) //.style("stroke", strokeColorSymbol) ; // draw the bauble fixations (correspond to the locations) const fixK = drawFixationsG(svg); const fixP = drawFixationsP(svg); const fixF = drawFixationsF(svg); const iFix = drawFixationsI(svg); // draw the decorations on the baubles (correspond to the family generations gathered) const decoGrandParents = drawFamilyDecorations(svg, 0, "grandParents"); const decoParentsUnclesAunts = drawFamilyDecorations(svg, 45, "parentsUnclesAunts"); const decoSiblingsCousins = drawFamilyDecorations(svg, 90, "siblingsCousins"); const decoChildrenNephewsNieces = drawFamilyDecorations(svg, 135, "childrenNephewsNieces"); const decoParentsHisSide = drawFamilyDecorations(svg, 315, "parentsHisSide"); const decoSiblingsHisSide = drawFamilyDecorations(svg, 270, "siblingsHisSide"); const decoNephewsNiecesHisSide = drawFamilyDecorations(svg, 225, "nephewsNiecesHisSide"); const decoFriends = drawFriendsDecorations(svg); // Attach mouseover to show the tooltip baubles.on('mouseover', function(e, d) { d3.select(this) .style("stroke-width", 2) .style("opacity", 0.7); // Create a new tooltip element const newTooltip = document.createElement('div'); newTooltip.style.position = 'absolute'; newTooltip.style.pointerEvents = 'none'; newTooltip.style.display = 'none'; newTooltip.style.padding = '8px'; newTooltip.style.backgroundColor = '#fff'; newTooltip.style.border = '1px solid #ddd'; newTooltip.style.borderRadius = '4px'; newTooltip.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)'; // Set HTML content with line breaks newTooltip.innerHTML = ` Age: ${d.age}
Memory: ${d.contextAndMemory}
`; newTooltip.style.fontFamily = fontName; newTooltip.style.maxWidth = '350px'; // Append the tooltip to the body document.body.appendChild(newTooltip); // Show the tooltip on mouseover newTooltip.style.display = 'block'; newTooltip.style.left = (e.clientX + 10) + 'px'; newTooltip.style.top = (e.clientY + 10) + 'px'; // Set the tooltip to the mutable cell tooltip.value = newTooltip; }); // play sounds on clicking baubles baubles.on('click', function(e, d) { d3.select(this) .style("stroke-width", 2) .style("opacity", 0.7); //d3.select(this).classed('highlight', true); currentSound = new Audio(_files[0]["url"]); currentSound.play(); }); // Attach mouseleave event to hide tooltip, reset styles and stop sound baubles.on('mouseleave', function() { d3.select(this) .style("stroke-width", 1) .style("opacity", 1); // Get the current tooltip element from the tooltip cell const currentTooltip = tooltip.value; // Check if the tooltip element exists if (currentTooltip) { // Remove the tooltip element from the DOM currentTooltip.remove(); // Update the tooltip cell with null to indicate no tooltip tooltip.value = null; } // stop the sound from playing currentSound.pause(); }); return svg.node(); }33:T430,drawADashedCircleInBauble = () => { const radiusLegend = 35; const offset = radiusLegend * treeScale +1 ; const svg = d3.create("svg") .attr("width", radiusLegend * treeScale * 2.1) //.style("background", "red") .attr("height", radiusLegend * treeScale * 2.1); //.style("border", "1px dashed"); svg.append("circle") .attr("class", "legend") .attr("r", radiusLegend) .attr("fill","none") .style("stroke-width", 2) .style("stroke", decorationStrokeColor)//colorLegend)//decorationStrokeColor) ; .attr('transform',`translate(${offset}, ${offset})scale(${treeScale})`); svg.append("circle") .attr("class", "legend") .attr("r", radiusLegend * 12/14) .attr("fill","none") .style("stroke-width", 8) .style("stroke", decorationStrokeColor)//colorLegend)//decorationStrokeColor) ; .style("stroke-dasharray", 4) .attr('transform',`translate(${offset}, ${offset})scale(${treeScale})`); return svg.node(); }34:T4b7,// Define the CCS for the card html` `35:T413,html` 100px ` //36:[{"id":"1cbac38033ecc43e932e033e7b5c291cda63b2298f19c1108456e1fc4efdfa1cfa064471f6f57c51387fb59b86c4caef4f50a44fbeaeb1f0893c1d3652118405","href":"https://static.observableusercontent.com/files/1cbac38033ecc43e932e033e7b5c291cda63b2298f19c1108456e1fc4efdfa1cfa064471f6f57c51387fb59b86c4caef4f50a44fbeaeb1f0893c1d3652118405","name":"test@7.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1703439525021.247,"size":15888},{"id":"e5c834c15b37f98ca4d896390196f2da5d038deda87d304436e013ff4bce7a9ab0e848ef39a4d0fff76fdbc3aabeb224225314da5eac08f634837df6a7780397","href":"https://static.observableusercontent.com/files/e5c834c15b37f98ca4d896390196f2da5d038deda87d304436e013ff4bce7a9ab0e848ef39a4d0fff76fdbc3aabeb224225314da5eac08f634837df6a7780397","name":"crash.mp3","type":"audio/mpeg","lastModified":1702224470718.828,"size":34562}] 2e:{"id":"273ee5b2a5cae954","slug":"christmas-memories","title":"Christmas memories","thumbnail":"53a09548d08dfdc23d747b466ddb7ab2ad71a3a240ddb1c0e9162e5afb0dd9c8","access_level":"public","create_time":"$D2023-12-07T18:21:36.851Z","update_time":"$D2024-01-20T16:27:15.934Z","view_time":null,"first_public_time":"$D2023-12-24T18:44:11.535Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1280d736486ab85b","login":"linetonthat","name":"Line Ton That","avatar_url":"https://avatars-next.observableusercontent.com/ab500aeaecf9e12c5394b2acae0befba53662661fe30fc21f77b489444addba8","tier":"starter_2024"},"version":3952,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3210f3767f4a8fcb","login":"linetonthat","name":"Line Ton That","avatar_url":"https://avatars-next.observableusercontent.com/ab500aeaecf9e12c5394b2acae0befba53662661fe30fc21f77b489444addba8","tier":null}],"members":[{"type":"individual","id":"3210f3767f4a8fcb","login":"linetonthat","name":"Line Ton That","avatar_url":"https://avatars-next.observableusercontent.com/ab500aeaecf9e12c5394b2acae0befba53662661fe30fc21f77b489444addba8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Christmas memories","cells":[{"id":0,"value":"# Christmas memories","pinned":false,"hidden":false,"mode":"md"},{"id":270,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":2027,"value":"## Tree chart","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":376,"value":"// viewof yOffset = html``\nyOffset = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":383,"value":"//viewof treeScale = html``\ntreeScale = 0.45","pinned":true,"hidden":false,"mode":"ojs"},{"id":2032,"value":"### Tooltip","pinned":false,"hidden":false,"mode":"md"},{"id":1659,"value":"// Create a div for the tooltip\n mutable tooltip = html`

`;","pinned":true,"hidden":false,"mode":"ojs"},{"id":2029,"value":"### Baubles","pinned":false,"hidden":false,"mode":"md"},{"id":286,"value":"// viewof radius = html``\nradius = 14","pinned":true,"hidden":false,"mode":"ojs"},{"id":411,"value":"distFromBranchMiddleAxis = 25","pinned":true,"hidden":false,"mode":"ojs"},{"id":1379,"value":"// Helper function for baubles\nfunction drawBaubles(svg) {\n const baubles = svg.append(\"g\")\n .selectAll(\"circle\")\n .data(dataset)\n .join(\"circle\")\n .attr(\"class\", \"baubles\")\n .attr(\"cx\", (d,i) => xScales[decade(d)](year(d)))\n .attr(\"cy\", (d,i) => yDecadeScale(decade(d))+ yOddOrEven(year(d), distFromBranchMiddleAxis * treeScale))\n .attr(\"r\", radius)\n .attr(\"fill\", (d,i) => emotionScale(d.emotion))\n .style(\"stroke-width\", 1)\n .style(\"stroke\", decorationStrokeColor) ;\n \n return baubles;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2041,"value":"#### Decorations","pinned":false,"hidden":false,"mode":"md"},{"id":1296,"value":"// Helper function for family decorations\nfunction drawFamilyDecorations(svg, angle, type) {\n const deco = svg.append(\"g\")\n .selectAll(\"path\")\n .data(dataset)\n .join(\"path\")\n .attr(\"class\", \"decorations\")\n .attr('transform', (d, i) => {\n const x = xScales[decade(d)](year(d))\n const y = yDecadeScale(decade(d)) + yOddOrEven(year(d), distFromBranchMiddleAxis * treeScale)\n return `translate(${x}, ${y})rotate(${angle})scale(${treeScale})`\n })\n .attr(\"d\", (d) => { if (d[type] > 0) return petalPath; })\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", decorationStrokeColor)\n .attr(\"stroke-width\", 3)\n .attr(\"pointer-events\", \"none\");\n\n return deco;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1397,"value":"// Helper function for friends decorations\nfunction drawFriendsDecorations(svg) {\n const deco = svg.append(\"g\")\n .selectAll(\"circle\")\n .data(dataset.filter(function(d){ return d.friends === \"True\" }))\n .join(\"circle\")\n .attr(\"class\", \"baubles\")\n .attr(\"cx\", (d,i) => xScales[decade(d)](year(d)))\n .attr(\"cy\", (d,i) => yDecadeScale(decade(d))+ yOddOrEven(year(d), distFromBranchMiddleAxis * treeScale))\n .attr(\"r\", radius - 2)\n .attr(\"fill\", \"none\")\n .style(\"stroke-width\", 3)\n .style(\"stroke-dasharray\", 2)\n .style(\"stroke\", decorationStrokeColor) ;\n\n return deco;\n}\n// ","pinned":true,"hidden":false,"mode":"ojs"},{"id":1341,"value":"### Fixations","pinned":false,"hidden":false,"mode":"md"},{"id":1331,"value":"// Helper function for fixations (grand parents')\nfunction drawFixationsG(svg) {\n const fix = svg.append(\"g\")\n .selectAll(\"circle\")\n .data(dataset.filter(function(d){ return d.location === \"K\" }))\n .join(\"circle\")\n .attr(\"class\", \"fixations\")\n .attr(\"cx\", (d,i) => xScales[decade(d)](year(d)))\n .attr(\"cy\", (d,i) => yDecadeScale(decade(d))+ yOddOrEven(year(d), distFromBranchMiddleAxis * treeScale) - radius - 6)\n .attr(\"r\", 3)\n .attr(\"fill\", decorationStrokeColor)\n .attr(\"stroke-width\", 1)\n .style(\"stroke\", decorationStrokeColor);\n\n return fix;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1343,"value":"// Helper function for fixations (parents')\nfunction drawFixationsP(svg) {\n const allowedLocations = [\"R\", \"O\", \"M\"];\n \n const fix = svg.append(\"g\")\n .selectAll(\"circle\")\n .data(dataset.filter(function(d){ return allowedLocations.includes(d.location) }))\n .join(\"circle\")\n .attr(\"class\", \"fixations\")\n .attr(\"cx\", (d,i) => xScales[decade(d)](year(d)))\n .attr(\"cy\", (d,i) => yDecadeScale(decade(d))+ yOddOrEven(year(d), distFromBranchMiddleAxis * treeScale) - radius - 6)\n .attr(\"r\", 3)\n .attr(\"fill\", \"none\")\n .attr(\"stroke-width\", 1)\n .style(\"stroke\", decorationStrokeColor);\n\n return fix;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1441,"value":"inLawsPath = \"M0,0 L0,-9\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1438,"value":"// Helper function for fixations (parents in-law')\nfunction drawFixationsI(svg) {\n \n const fix = svg.append(\"g\")\n .selectAll(\"circle\")\n .data(dataset.filter(function(d){ return d.location === \"M\" }))\n .join(\"path\")\n .attr(\"class\", \"fixations\")\n .attr('transform', (d, i) => {\n const x = xScales[decade(d)](year(d))\n const y = yDecadeScale(decade(d))+ yOddOrEven(year(d), distFromBranchMiddleAxis * treeScale) - radius - 3\n return `translate(${x}, ${y})scale(${treeScale})`\n })\n .attr(\"d\", inLawsPath)\n //.attr(\"fill\",\"none\")\n .attr(\"stroke\", decorationStrokeColor)//\"red\")\n .attr(\"stroke-width\",2);//5)\n //.style(\"stroke\", strokeColorSymbol) ;\n\n return fix;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1357,"value":"// Helper function for fixations (friends')\nfunction drawFixationsF(svg) {\n const fix = svg.append(\"g\")\n .selectAll(\"circle\")\n .data(dataset.filter(function(d){ return d.friends === \"True\" }))\n .join(\"circle\")\n .attr(\"class\", \"fixations\")\n .attr(\"cx\", (d,i) => xScales[decade(d)](year(d)))\n .attr(\"cy\", (d,i) => yDecadeScale(decade(d))+ yOddOrEven(year(d), distFromBranchMiddleAxis * treeScale) - radius - 6)\n .attr(\"r\", 5)\n .attr(\"fill\", \"none\")\n .attr(\"stroke-width\", 2)\n .style(\"stroke-dasharray\", 1)\n .style(\"stroke\", decorationStrokeColor);\n\n return fix;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2972,"value":"## Legend","pinned":false,"hidden":false,"mode":"md"},{"id":2305,"value":"### Legend for the time axes","pinned":false,"hidden":false,"mode":"md"},{"id":1816,"value":"// Helper function for decade legend\nfunction drawYearLegend(svg) {\n\n const yLegend = yDecadeScale(5.5) + 6.5;\n\n // display the decade legend\n const years = svg\n .append(\"g\")\n .attr(\"class\", \"yearsL\")\n \n years.append(\"text\")\n .attr(\"dy\", \"0.35em\")\n .attr(\"x\", xLegendOffset)\n .attr(\"y\", yLegendOffset+30)\n .text(\"Year in the decade (1 bauble = 1 year)\")\n .attr(\"font-family\",fontName)\n .style(\"fill\", decorationStrokeColor);\n\n years.append(\"path\")\n .attr(\"fill\",decorationStrokeColor)\n .attr(\"stroke\", decorationStrokeColor)\n .attr(\"stroke-width\",1)\n .attr(\"d\",arrowPath)\n .attr('transform', `translate(${xLegendOffset}, ${yLegendOffset})`);\n \n return years;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1876,"value":"//viewof xLegendOffset = html``\nxLegendOffset = 45","pinned":true,"hidden":false,"mode":"ojs"},{"id":1897,"value":"//viewof yLegendOffset = html``\nyLegendOffset = 660","pinned":true,"hidden":false,"mode":"ojs"},{"id":1741,"value":"// Helper function for decade legend\nfunction drawDecadeLegend(svg) {\n\n const yLegend = yDecadeScale(5.5) + 6.5;\n\n // display the decade legend\n const decades = svg\n .append(\"g\")\n .attr(\"class\", \"decadeL\")\n \n decades.selectAll(\"text\")\n .data([[0,\"Child\"],[1,\"Teenager\"],[2,\"Young adult\"],[3,\"Adult in her thirties\"],[4,\"Not getting any younger (!)\"]])\n .join(\"text\")\n .attr(\"dy\", \"0.35em\")\n .attr(\"x\", xDecadeLegendOffset)\n .attr(\"y\", d=> yDecadeScale(d[0]))\n .text(d=> d[1])\n .attr(\"font-family\",fontName)\n .style(\"fill\", decorationStrokeColor);\n \n return decades;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"//viewof xTreeOffset = html``\nxTreeOffset = 465 //640 * treeScale","pinned":true,"hidden":false,"mode":"ojs"},{"id":1912,"value":"//viewof xDecadeLegendOffset = html``\nxDecadeLegendOffset = 45","pinned":true,"hidden":false,"mode":"ojs"},{"id":868,"value":"### Legend for emotions, persons and locations","pinned":false,"hidden":false,"mode":"md"},{"id":1216,"value":"#### Emotions","pinned":false,"hidden":false,"mode":"md"},{"id":1211,"value":"squareSize = 12","pinned":true,"hidden":false,"mode":"ojs"},{"id":1180,"value":"drawASquare = (color) => {\n \n const svg = d3.create(\"svg\")\n .attr(\"width\", squareSize)\n .attr(\"height\", squareSize)\n .style(\"background\",\"black\");\n\n svg.append(\"rect\")\n .attr(\"width\", squareSize)\n .attr(\"height\", squareSize)\n .attr(\"fill\",color)\n .style(\"stroke\",\"white\")\n .style(\"stroke-width\", 2);\n\nreturn svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1184,"value":"happySq = drawASquare(emotionScale(\"happy\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1285,"value":"excitedSq = drawASquare(emotionScale(\"excited\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1287,"value":"noClueSq = drawASquare(emotionScale(\"don't remember\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1289,"value":"sadSq = drawASquare(emotionScale(\"sad\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":875,"value":"#### Who is attending?","pinned":false,"hidden":false,"mode":"md"},{"id":915,"value":"// create a table with generations for both sides and the corresponding petals\ngenerations = html`\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Generation	My side	His side
Children, nieces, nephews	${ourChildrenAndMyNiecesNephewsPetal}	${hisNiecesNephewsPetal}
Siblings, cousins	${mySiblingsCousinsPetal}	${hisSiblingsCousinsPetal}
Parents, uncles, aunts	${myParentsPetal}	${hisParentsPetal}
Grand-parents	${myGrandParentsPetal}

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":970,"value":"hisNiecesNephewsPetal = drawAPetalInBauble(225)","pinned":true,"hidden":false,"mode":"ojs"},{"id":968,"value":"hisSiblingsCousinsPetal = drawAPetalInBauble(270)","pinned":true,"hidden":false,"mode":"ojs"},{"id":965,"value":"hisParentsPetal = drawAPetalInBauble(315)","pinned":true,"hidden":false,"mode":"ojs"},{"id":961,"value":"ourChildrenAndMyNiecesNephewsPetal = drawAPetalInBauble(135)","pinned":true,"hidden":false,"mode":"ojs"},{"id":939,"value":"mySiblingsCousinsPetal = drawAPetalInBauble(90)","pinned":true,"hidden":false,"mode":"ojs"},{"id":956,"value":"myParentsPetal = drawAPetalInBauble(45)","pinned":true,"hidden":false,"mode":"ojs"},{"id":958,"value":"myGrandParentsPetal = drawAPetalInBauble(0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":926,"value":"drawAPetalInBauble = (angle) => {\n \n const radiusLegend = 35;\n const offset = radiusLegend * treeScale +1 ;\n \n const svg = d3.create(\"svg\")\n .attr(\"width\", radiusLegend * treeScale * 2.1)\n .attr(\"height\", radiusLegend * treeScale * 2.1);\n //.style(\"border\", \"1px dashed\");\n \n svg.append(\"path\")\n .attr(\"fill\",\"none\")\n .attr(\"stroke\", decorationStrokeColor)//colorLegend)\n .attr(\"stroke-width\",4)\n .attr(\"d\",petalPath) \n .attr('transform',`translate(${offset}, ${offset})rotate(${angle})scale(${treeScale})`);\n \n svg.append(\"circle\")\n .attr(\"class\", \"baubles\")\n .attr(\"r\", radiusLegend)\n .attr(\"fill\",\"none\")\n .style(\"stroke-width\", 2)\n .style(\"stroke\", decorationStrokeColor)//colorLegend)//decorationStrokeColor) ; \n .attr('transform',`translate(${offset}, ${offset})scale(${treeScale})`);\nreturn svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":878,"value":"friends = drawADashedCircleInBauble()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1615,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":870,"value":"#### In whose house?","pinned":false,"hidden":false,"mode":"md"},{"id":902,"value":"locationWidth = 20","pinned":true,"hidden":false,"mode":"ojs"},{"id":1554,"value":"locationHeight = 15","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"atGrandParents = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":894,"value":"atFriends = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":850,"value":"atParents = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1580,"value":"inLawsSmallPath = \"M0,0 L0,-4\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1501,"value":"atInLaws = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"## Sounds","pinned":false,"hidden":false,"mode":"md"},{"id":174,"value":"files = [\n FileAttachment('crash.mp3')\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"_files = {\n const fetchUrls = files.map(f =>\n f.url().then(url => ({ url, name: f.name }))\n );\n const urls = await Promise.all(fetchUrls);\n return urls;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"## Positions (x & y scales)","pinned":false,"hidden":false,"mode":"md"},{"id":2117,"value":"### X scales","pinned":false,"hidden":false,"mode":"md"},{"id":575,"value":"//viewof branchMargin = html``\nbranchMargin = 45","pinned":true,"hidden":false,"mode":"ojs"},{"id":490,"value":"function createXScales(dataset) {\n const xScales = [];\n\n // Iterate over the array of 5 items\n dataset.forEach(decade => {\n const xScale = d3.scaleLinear()\n .domain([0, 9])\n .range([ -(560 - decade * 80 - branchMargin) * treeScale + xTreeOffset, (560 - decade * 80) * treeScale + xTreeOffset]); \n xScales.push(xScale);\n });\n\n return xScales;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":529,"value":"// define a list of xScales (according to decades)\nxScales = createXScales([0,1,2,3,4]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1043,"value":"year = (d) => {return d.age % 10}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2119,"value":"### Y scales","pinned":false,"hidden":false,"mode":"md"},{"id":408,"value":"yBranchOffset = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"yDecadeScale = d3.scaleLinear()\n .domain([0,4])\n .range([1300 * treeScale + yOffset + yBranchOffset, 500 * treeScale + yOffset + yBranchOffset]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1052,"value":"decade = (d) => {return Math.floor(d.age / 10)}","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"function yOddOrEven (n, coef) {\n if (n %2 === 0) \n {return - coef;}\n else \n return coef ; \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":771,"value":"## Styles","pinned":false,"hidden":false,"mode":"md"},{"id":617,"value":"fontName = \"Josefin Sans\"\n//viewof fontName = Inputs.radio([\"Baskerville\", \"Futura\", \"Poppins\",\"Poiret One\",\"Josefin Sans\",\"Cabin\"], {label: \"Select a font face for the body text\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"//viewof fontTitle = Inputs.radio([\"Poppins\", \"Oswald\",\"Poiret One\",\"Josefin Sans\",\"Cabin\"], {label: \"Select a font face for the title\"})\nfontTitle = \"Josefin Sans\"//\"Poiret One\"//","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"// Import the selected font faces\nstyle1 = {\n yield html``\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":608,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"### Colors","pinned":false,"hidden":false,"mode":"md"},{"id":671,"value":"emotionScale = d3.scaleOrdinal()\n .domain([\"happy\",\"sad\",\"excited\",\"don't remember\"])\n .range([\"#ef3f91\",\"#aa998f\",\"#f7b801\",\"#bfd7ea\"]);\n// Other colors tried:\n// happy: ff206e,ff70a6,ff5d8f, ff1654\n// sad: cc8b86\n// excited: ffbc42, ffc43d, ffd100","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"colorTree = \"#75c2ed\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"darkBlue = \"#213555\"//d3.color(`rgba(27, 44, 86, 1)`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":556,"value":"decorationStrokeColor = \"white\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"## Shapes","pinned":false,"hidden":false,"mode":"md"},{"id":349,"value":"### Christmas tree","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"branchesPath = \"M0,0 L-160,200 L-80,200 L-240,400 L-160,400 L-320,600 L-240,600 L-400,800 L-320,800 L-480,1000 L-400,1000 L-560,1200 L-480,1200 L-640,1400 L0,1400 L640,1400 L480,1200 L480,1200 L560,1200 L400,1000 L480,1000 L320,800 L400,800 L240,600 L320,600 L160,400 L240,400 L80,200 L160,200 L0,0\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"trunkPath = \"M-72,1400 L-72,1550 L72,1550 L72,1400 L-72,1400\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"### Baubles","pinned":false,"hidden":false,"mode":"md"},{"id":279,"value":"// petalPath = \"M0 0 C30 30 30 100 0 100 C-30 100 -30 30 0 0\"\npetalPath = \"M0 0 C6 6 6 20 0 20 C-6 20 -6 6 0 0\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":307,"value":"// hangerPath = \"M-30 25 C-30 0 -30 0 0 0 C30 0 30 0 30 25\"\n//\"M-6 5 C-6 0 -6 0 0 0 C6 0 6 0 6 5\"\nhangerPath = \"M-10 7 C-10 0 -10 0 0 0 C10 0 10 0 10 7\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1528,"value":"hangerSmallPath = \"M-6 5 C-6 0 -6 0 0 0 C6 0 6 0 6 5\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":817,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":3867,"value":"### Arrows","pinned":false,"hidden":false,"mode":"md"},{"id":1691,"value":"arrowPath = \"M0,0 L50,0 L50,5 L57,0 L50,-5 L50,0\"\n //\"M0,0 L100,0 L100,5 L107,0 L100,-5 L100,0\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1710,"value":"html`\n\n100px\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1689,"value":"html`\n\n100px\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":170,"value":"## References\n* How to include sounds: https://observablehq.com/@rabelais/play-sound-on-demand\n* How to draw petals: https://observablehq.com/@sxywu/1-draw-a-flower-petal-on-the-screen?collection=@sxywu/introduction-to-d3-js","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":1030,"value":"workbook = FileAttachment(\"test@7.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1033,"value":"dataset = workbook.sheet(0, { headers: true, range: \":M\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"chartHeight = 700","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"selectedWidth = 1280 * treeScale + decadeLegendWidth","pinned":true,"hidden":false,"mode":"ojs"},{"id":1771,"value":"decadeLegendWidth = 250","pinned":true,"hidden":false,"mode":"ojs"},{"id":622,"value":"outerWidth = 1100","pinned":true,"hidden":false,"mode":"ojs"},{"id":620,"value":"outerHeight = 900","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"import { text, select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":343,"value":"import {rasterize} from \"@mbostock/saving-svg\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2f:"$2e:body"