2d:null 2e:["$","title",null,{"children":"Sleep Across the Lifespan | KielSCN Spektrum Living Lab | Observable"}] 33:T614,# Sleep Across the Lifespan ## Understanding Sleep Patterns Through Data This visualization is based on the systematic review and meta-analysis *"[Sleep characteristics across the lifespan in 1.1 million people from the Netherlands, United Kingdom, and United States.](https://doi.org/10.1038/s41562-020-00965-x)"* It was published as a double-page spread in the science magazine *Spektrum der Wissenschaft* (the German-language edition of *Scientific American*). ## A Detailed Depiction of Sleep Duration Rather than summarizing sleep data with a few statistical lines, this visualization offers a highly detailed and engaging approach. Each percentile is represented by an individual line, while every single data point in the dataset is displayed as part of a point cloud. This high-resolution depiction preserves the richness of the original data, encouraging exploration and discovery. ## Guiding the Reader Through Insights To ensure clarity and accessibility, the chart is supplemented with annotations and example data points. Key insights are highlighted with accompanying text for different age ranges, helping readers contextualize their own sleep habits within broader patterns. This layered approach not only enhances understanding but also fosters personal connections with the data, making it more relatable and impactful. By combining precision with an intuitive design, the visualization transforms complex data into an engaging narrative—inviting readers to explore, compare, and reflect on their own sleep across the lifespan. 34:T785,viewof chart = { const container = d3.select(DOM.element("div")); container.style("position", "relative"); const canvas = container.append("canvas").node(); const context = canvas.getContext("2d"); canvas.width = w * canvasScaleFactor; canvas.height = h * canvasScaleFactor; canvas.style.width = `${w}px`; canvas.style.height = `${h}px`; const svg = container .append("svg") .attr("class", "svg") .attr("width", w) .attr("height", h) .style("position", "absolute") .style("top", "0px") .style("left", "0px"); const defs = svg.append("defs"); defs .append("symbol") .attr("id", "man-icon") .attr("viewBox", "0 -960 960 960") .append("path") .attr("d", icon) .attr("fill", "white"); // Fill background of canvas context.fillStyle = colors.background; context.fillRect(0, 0, canvas.width, canvas.height); // Draw point cloud pointcloud && drawPointcloud(context); // Setup and draw percentile lines drawGroupedPercentileLines(svg, groupedByPercentile); // Create Axes createXAxis(svg); createYAxis(svg); // Draw recommended Area recommended && drawRecommendedArea(svg); // Draw cases as circles caseDots && drawCases(svg); const crosshair = initializeCrosshair(svg); // Setup the pointer interactions like pointerMoved and pointerClicked /* setupPointerInteraction(svg, container); */ new PointerInteraction(svg, container); function update(data) { switch (selectedPlot) { case "percentile": updatePercentilePlot(data); break; case "dot": updateDotPlot(data, container.node().value); break; case "box": updateBoxPlot(data); break; default: console.error("Unknown plot type selected"); } updateCrosshairs(container.node().value, crosshair); } container.node().update = update; return container.node(); }35:T889,function initializeCrosshair(svg) { const x = Number(xScaleSVG(ageMin)); const y = Number(yScaleSVG(sleepMax)); const crosshair = svg.append("g").attr("class", "crosshair"); const crosshairPoint = crosshair .append("circle") .attr("class", "crosshairPoint") .attr("cx", x) .attr("cy", y) .attr("r", "4px") .attr("fill", "white") .attr("opacity", 0); const crosshairXLabel = crosshair .append("text") .attr("class", "crosshairLabel") .attr("x", x) .attr("y", h - margin.bottom) .attr("dx", -6) .attr("dy", 9) .style("fill", "white") .style("stroke", "black") .style("stroke-width", "6") .style("paint-order", "stroke") .style("font", `${fontSettings.fontSize} ${fontSettings.fontFamily}`) .style("text-anchor", "start") .style("alignment-baseline", "hanging") .text(`${ageFormat(ageMin)} Jahre (Alter)`); const crosshairXLine = crosshair .append("line") .attr("class", "crosshairLine") .attr("x1", x) .attr("x2", x) .attr("y1", h - margin.bottom) .attr("y2", h - margin.bottom + 6) .style("stroke", "white") .style("stroke-width", lineWidths.regular); const crosshairYLabel = crosshair .append("text") .attr("class", "crosshairLabel") .attr("x", margin.left) .attr("y", y) .attr("dy", -4) .style("fill", "white") .style("stroke", "black") .style("stroke-width", "4") .style("paint-order", "stroke") .style("font", `${fontSettings.fontSize} ${fontSettings.fontFamily}`) .style("text-anchor", "start") .style("alignment-baseline", "baseline") .text(`${convertDecimalToTimeFormat(sleepMax)} Stunden (Schlafdauer)`); const crosshairYLine = crosshair .append("line") .attr("class", "crosshairLine") .attr("x1", margin.left) .attr("x2", w - margin.right) .attr("y1", y) .attr("y2", y) .style("stroke", "white") .attr("stroke-opacity", 1) .style("stroke-width", 1); return { crosshairPoint: crosshairPoint, crosshairXLine: crosshairXLine, crosshairXLabel: crosshairXLabel, crosshairYLine: crosshairYLine, crosshairYLabel: crosshairYLabel }; }36:T764,function updateCrosshairs( data, { crosshairPoint, crosshairXLine, crosshairXLabel, crosshairYLine, crosshairYLabel } ) { let x = Number(xScaleSVG(data.age)); let y = Number(yScaleSVG(data.sleepTime)); let textAge = data.age; let textSleep = data.sleepTime; let duration = 100; let tickOpacity = 0.4; let pointOpacity = 1; let intersect = data.age < 23; let labelXOffset = -6; // if cursor outside margins the crosshair get reset if (isNaN(x) || isNaN(y)) { x = Number(xScaleSVG(ageMin)); y = Number(yScaleSVG(sleepMax)); textAge = ageMin; textSleep = sleepMax; duration = 400; tickOpacity = 1; pointOpacity = 0; labelXOffset = 0; } const ticksX = d3 .selectAll(".x-axis .tick") .transition() .duration(200) .attr("opacity", tickOpacity); const ticksY = d3 .selectAll(".y-axis .tick text") .transition() .duration(200) .attr("opacity", tickOpacity); crosshairPoint .transition() .attr("cx", x) .attr("cy", y) .duration(duration) .attr("opacity", pointOpacity); crosshairXLine.transition().duration(duration).attr("x1", x).attr("x2", x); crosshairXLabel .transition() .duration(duration) .attr("x", x) .attr("dx", labelXOffset) .text(`${ageFormat(textAge)} Jahre (Alter)`); crosshairYLine.transition().duration(duration).attr("y1", y).attr("y2", y); crosshairYLabel .transition("dxTransitionLabel") .duration(200) .attr("x", intersect ? w - margin.right : margin.left); crosshairYLabel .transition("textanchorTransitionLabel") .duration(100) .delay(100) .style("text-anchor", intersect ? "end" : "start"); crosshairYLabel .transition("xyTextTransitionLabel") .duration(duration) .attr("y", y) .text(`${convertDecimalToTimeFormat(textSleep)} Stunden (Schlafdauer)`); }37:T481,function setupPointerInteraction(svg, container) { let lockedPlot = false; // Pointer moved function function pointermoved(event) { if (lockedPlot) return; const [mx, my] = d3.pointer(event); const withinMargins = mx >= margin.left && mx <= w - margin.right && my >= margin.top && my <= h - margin.bottom; const currentValue = { age: Math.round(xScaleSVG.invert(mx)), sleepTime: roundToStep(yScaleSVG.invert(my), 0.25) }; const newValue = withinMargins ? currentValue : { age: undefined, sleepTime: undefined }; if (!_.isEqual(container.node().value, newValue)) { container.node().value = newValue; container.node().dispatchEvent(new CustomEvent("input")); } } // Pointer clicked function function pointerclicked() { lockedPlot = !lockedPlot; } // Attach event listeners svg .on("pointerenter pointermove", pointermoved) .on("click", pointerclicked) .on("touchstart", (event) => event.preventDefault()); // Optionally return functions if needed for external use return { pointermoved, pointerclicked }; }38:T648,class PointerInteraction { constructor(svg, container) { this.svg = svg; this.container = container; this.isPlotLocked = false; this.node = container.node(); this.attachEventListeners(); } calculatePosition(event) { const [mx, my] = d3.pointer(event); return { withinMargins: mx >= margin.left && mx <= w - margin.right && my >= margin.top && my <= h - margin.bottom, x: mx, y: my }; } calculateValue({ x, y, withinMargins }) { if (!withinMargins) { return { age: undefined, sleepTime: undefined }; } return { age: Math.round(xScaleSVG.invert(x)), sleepTime: roundToStep(yScaleSVG.invert(y), 0.25) }; } updateInteractionState(locked) { this.svg.style("cursor", locked ? "not-allowed" : "crosshair"); } pointerMoved(event) { if (!this.isValidEvent(event) || this.isPlotLocked) return; const position = this.calculatePosition(event); const newValue = this.calculateValue(position); if (!_.isEqual(this.node.value, newValue)) { this.node.value = newValue; this.node.dispatchEvent(new CustomEvent("input"), { bubbles: true }); } } pointerClicked() { this.isPlotLocked = !this.isPlotLocked; this.updateInteractionState(this.isPlotLocked); } isValidEvent(event) { return event !== null; } attachEventListeners() { this.svg .on("pointerenter pointermove", this.pointerMoved.bind(this)) .on("click", this.pointerClicked.bind(this)) .on("touchstart", (event) => event.preventDefault()); } }39:T43d,function createYAxis(svg) { // Append the y-axis group to the SVG and set its position based on margin const yAxis = svg .append("g") .attr("class", "y-axis") .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisRight(timeScale) .tickSize(w - margin.left - margin.right) .tickFormat(d3.timeFormat("%H:%M")) ) .call((g) => { // Custom styling for ticks and lines g.selectAll(".tick text") .style("fill", "white") .style("font", `${fontSettings.fontSize} ${fontSettings.fontFamily}`) .style("stroke", "black") .style("stroke-width", "2") .style("paint-order", "stroke") .attr("x", 0) .attr("dy", -4); g.selectAll(".tick line").attr("stroke", "white"); g.selectAll(".tick:not(:first-of-type) line") .attr("stroke-opacity", 0.4) .attr("stroke-dasharray", "2,2"); g.selectAll(".tick:first-of-type").remove(); // Removes the first tick if necessary g.select(".domain").remove(); // Removes the axis line }); }3a:T732,function updatePlot({ data, plotClass, plotDataKey, enterFn, updateFn, preprocessFn = () => ({}), filterFn = (data) => data, useElements = true // New parameter to switch between the two methods }) { const svg = d3.select(".svg"); // Check if data is undefined, empty if (!data || !data[plotDataKey] || data[plotDataKey].length === 0) { svg .selectAll(`.${plotClass}`) .transition("opacity") .duration(200) .style("opacity", 0) .remove(); return; } // Apply the filter function const filteredData = filterFn(data[plotDataKey]); // Run preprocessing function and get preprocessed data const preprocessData = preprocessFn(filteredData); // Bind data, considering whether it's an array or a single object let plot = svg.selectAll(`.${plotClass}`).data([filteredData], () => 1); let plotEnter; if (useElements) { // For dot and percentile plots plotEnter = plot .enter() .append("g") .attr("class", plotClass) .attr("transform", `translate(${xScaleSVG(data.ageRange.start)}, 0)`) .style("opacity", 0); plotEnter.transition("opacity").duration(200).style("opacity", 1); plot = plot.merge(plotEnter); plot.call(transitionPlot, data); plot .selectAll(`.${plotClass}-element`) .data( (d) => d || [], (d) => d.p ) .join( (enter) => enterFn(enter, preprocessData), (update) => updateFn(update, preprocessData), (exit) => exit.remove() ); } else { // For box plots // Apply transitions to the box plot based on data. transitionPlot(plot, data); plot.join( (enter) => enterFn(enter, { ageRange: data.ageRange }), (update) => updateFn(update, { ageRange: data.ageRange }), (exit) => exit.remove() ); } }3b:[{"id":"bd3f993c216cceac8262a421013e4454b8c2a26f248e86cc4bc098ef893b3c00c8e9c57b43e109054ef47943a52ae240009e92a9fd06465c654f7a2d5b0b4306","href":"https://static.observableusercontent.com/files/bd3f993c216cceac8262a421013e4454b8c2a26f248e86cc4bc098ef893b3c00c8e9c57b43e109054ef47943a52ae240009e92a9fd06465c654f7a2d5b0b4306","name":"man_24dp_5F6368_FILL0_wght400_GRAD0_opsz24.svg","type":"image/svg+xml","lastModified":1729860657558.614,"size":314}] 31:{"id":"be0c01bd77855163","slug":"sleep-across-the-lifespan","title":"Sleep Across the Lifespan","thumbnail":"ef8e2070ec274b2cfa4fb4086fc3660abcd7d0a8abde77d24b5d3f0cf6403be8","access_level":"public","create_time":"$D2024-07-03T07:36:11.119Z","update_time":"$D2025-01-31T15:51:49.343Z","view_time":null,"first_public_time":"$D2024-09-05T12:32:32.031Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"9c9093a3d6001885","login":"kielscn-spektrum-living-lab","name":"KielSCN Spektrum Living Lab","avatar_url":"https://avatars-next.observableusercontent.com/1cdf082064d7bfeb48cb6e3b15cbc1df63bb57fa109cf82d122ee8ba22e489d0","tier":"starter_2024"},"version":4207,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"aa6fcb579fb87ef9","login":"kielscn","name":"KielSCN","avatar_url":"https://avatars-next.observableusercontent.com/ad62e3391f954b60f9d7eed4fdb0ebaf6c2b018bc6ed85e6d47421082969c99d","tier":null}],"members":[{"type":"individual","id":"aa6fcb579fb87ef9","login":"kielscn","name":"KielSCN","avatar_url":"https://avatars-next.observableusercontent.com/ad62e3391f954b60f9d7eed4fdb0ebaf6c2b018bc6ed85e6d47421082969c99d","tier":null,"role":"editor"},{"type":"team","id":"9c9093a3d6001885","login":"kielscn-spektrum-living-lab","name":"KielSCN Spektrum Living Lab","avatar_url":"https://avatars-next.observableusercontent.com/1cdf082064d7bfeb48cb6e3b15cbc1df63bb57fa109cf82d122ee8ba22e489d0","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Sleep Across the Lifespan","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":571,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1832,"value":"viewof recommended = Inputs.toggle({ label: \"Recommended\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1843,"value":"viewof percentiles = Inputs.checkbox([\"A\", \"B\", \"C\"], {\n label: \"Percentiles\",\n value: [\"C\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1856,"value":"viewof pointcloud = Inputs.toggle({ label: \"Pointcloud\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1860,"value":"viewof grid = Inputs.toggle({ label: \"Grid\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1871,"value":"viewof caseDots = Inputs.toggle({ label: \"Cases\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2344,"value":"viewof selectedPlot = Inputs.radio([\"box\", \"dot\", \"percentile\"], {\n label: \"Select one\",\n value: \"dot\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3870,"value":"Inputs.button([\n [\"Leo\", () => set(viewof chart, { age: 8, sleepTime: 12 })],\n [\"Paula\", () => set(viewof chart, { age: 17, sleepTime: 9 })],\n [\"Karin\", () => set(viewof chart, { age: 31, sleepTime: 7 })],\n [\"Maria\", () => set(viewof chart, { age: 75, sleepTime: 6 })]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3895,"value":"viewof entity = Inputs.bind(\n Inputs.form({\n age: Inputs.range([ageMin, ageMax], { step: 1, label: \"age\" }),\n sleepTime: Inputs.range([sleepMin, sleepMax], {\n step: 0.25,\n label: \"sleep duration\"\n })\n }),\n viewof chart\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2571,"value":"chart","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"cases = [\n /* { name: \"Leo\", age: 7, tib: 12 }, */\n { name: \"Leo\", age: 8.1, tib: 12 },\n { name: \"Paula\", age: 17.35, tib: 9 },\n { name: \"Karin\", age: 31.15, tib: 7 },\n\n { name: \"Maria\", age: 75, tib: 6 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3872,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2600,"value":"update = viewof chart.update(dataSet.get(chart.age))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2594,"value":"dataSet.get(chart.age)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1899,"value":"band = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3276,"value":"---\n### Crosshairs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3598,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3600,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2863,"value":"---\n### Pointer Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3250,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3836,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3838,"value":"function calculatePosition(event) {\n const [mx, my] = d3.pointer(event);\n return {\n withinMargins:\n mx >= margin.left &&\n mx <= w - margin.right &&\n my >= margin.top &&\n my <= h - margin.bottom,\n x: mx,\n y: my\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3840,"value":"function calculateValue({ x, y, withinMargins }) {\n if (!withinMargins) {\n return { age: undefined, sleepTime: undefined };\n }\n return {\n age: Math.round(xScaleSVG.invert(x)),\n sleepTime: roundToStep(yScaleSVG.invert(y), 0.25)\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3021,"value":"---\n### Axes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3690,"value":"startTime = {\n // Convert sleep time hours to JavaScript date objects\n const startTime = new Date();\n startTime.setHours(sleepMin, 0, 0, 0); // Set hours, minutes, seconds, milliseconds\n return startTime;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3692,"value":"endTime = {\n // Convert sleep time hours to JavaScript date objects\n const endTime = new Date();\n endTime.setHours(sleepMax, 0, 0, 0); // Set hours, minutes, seconds, milliseconds\n return endTime;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3215,"value":"function createXAxis(svg) {\n // Append the x-axis group to the SVG and set its position based on height and margin\n const xAxis = svg\n .append(\"g\")\n .attr(\"class\", \"x-axis\")\n .attr(\"transform\", `translate(0,${h - margin.bottom})`)\n .call(\n d3\n .axisBottom(xScaleSVG)\n .tickFormat(d3.format(\"02\"))\n .tickValues(d3.range(ageMin, ageMax + 1, 5))\n )\n .call((g) => {\n // Styling specific ticks and lines\n g.selectAll(\".tick text\")\n .style(\"fill\", \"white\")\n .style(\"font\", `${fontSettings.fontSize} ${fontSettings.fontFamily}`);\n g.selectAll(\".tick:first-of-type text\").style(\"text-anchor\", \"start\");\n g.selectAll(\".tick line\").attr(\"stroke\", \"white\");\n g.select(\".domain\").attr(\"stroke\", \"white\");\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3222,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3024,"value":"function formatTickX(d) {\n // Check if the previous element sibling of the parent node is a 'path', which would mean this is the first tick\n return this.parentNode.previousElementSibling &&\n this.parentNode.previousElementSibling.tagName === \"path\"\n ? `${d} Jahre (Alter)`\n : `${d}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3218,"value":"function formatTickY(d) {\n // Check if the previous element sibling of the parent node is a 'path', which would mean this is the first tick\n return this.parentNode.nextSibling ? `${d}` : `${d} Stunden (Schlafdauer)`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2730,"value":"---\n### Helper Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2716,"value":"function transitionPlot(selection, data) {\n selection\n .transition(\"transform\")\n .duration(100)\n .ease(d3.easeCubic)\n .attr(\"transform\", `translate(${xScaleSVG(data.ageRange.start)}, 0)`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2945,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3514,"value":"function roundToStep(value, step) {\n return Math.round(value / step) * step;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3736,"value":"timeFormat = d3.timeFormat(\"%H:%M\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3769,"value":"ageFormat = d3.format(\"02\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3734,"value":"function convertDecimalToTimeFormat(decimalHour) {\n const hours = Math.floor(decimalHour); // Get the whole number part for hours\n const minutes = Math.round((decimalHour - hours) * 60); // Convert the decimal part to minutes\n\n const date = new Date();\n date.setHours(hours, minutes, 0, 0);\n\n return timeFormat(date); // Format the date to HH:MM\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2760,"value":"---\n### Box Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2990,"value":"updateBox = (update) => {\n update\n .select(\".range\")\n .transition()\n .duration(400)\n .attr(\n \"d\",\n (d) => `M0,${yScaleBoxPlot(d.range[1])} V${yScaleBoxPlot(d.range[0])}`\n );\n\n update\n .select(\".quartiles\")\n .transition()\n .duration(400)\n .attr(\n \"d\",\n (d) => `\n M${-10},${yScaleBoxPlot(d.quartiles[2])}\n H${10}\n V${yScaleBoxPlot(d.quartiles[0])}\n H${-10}\n Z\n `\n );\n\n update\n .select(\".median\")\n .transition()\n .duration(400)\n .attr(\"d\", (d) => `M${-10},${yScaleBoxPlot(d.quartiles[1])} H${10}`);\n\n return update;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2993,"value":"enterBox = (enter, { ageRange }) => {\n let boxEnter = enter\n .append(\"g\")\n .attr(\"class\", \"box\")\n .attr(\"transform\", `translate(${xScaleSVG(ageRange.start)}, 0)`)\n .attr(\"opacity\", 0);\n\n boxEnter\n .append(\"path\")\n .attr(\"class\", \"range\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", lineWidths.regular);\n\n boxEnter\n .append(\"path\")\n .attr(\"class\", \"quartiles\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", lineWidths.regular);\n\n boxEnter\n .append(\"path\")\n .attr(\"class\", \"median\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", lineWidths.regular);\n\n boxEnter.transition().duration(400).attr(\"opacity\", 1);\n\n return boxEnter;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2764,"value":"function updateBoxPlot(data) {\n const enterBoxPlot = (enter, { ageRange }) => enterBox(enter, { ageRange });\n const updateBoxPlot = (update) => updateBox(update);\n\n updatePlot({\n data: data,\n plotClass: \"box\",\n plotDataKey: \"boxPlotData\",\n enterFn: enterBoxPlot,\n updateFn: updateBoxPlot,\n useElements: false\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2666,"value":"---\n### Dot Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2672,"value":"function precalculateHeights(data) {\n const totalHeightMap = new Map();\n data.forEach((dot) => {\n const x = dot.x;\n const count = totalHeightMap.get(x) || 0;\n totalHeightMap.set(x, count + 2 * qradius);\n });\n return totalHeightMap;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2677,"value":"function getStackOffset(x, radius, stackMap) {\n let currentHeight = stackMap.get(x) || 0;\n stackMap.set(x, currentHeight + 2 * radius);\n return currentHeight;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2683,"value":"function calculateCX(d, stackMap, totalHeightMap) {\n const offset = getStackOffset(d.x, qradius, stackMap);\n const totalHeight = totalHeightMap.get(d.x);\n return totalHeight / 2 - offset - qradius;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2681,"value":"function enterDot(enter, stackMap, totalHeightMap, data) {\n return enter\n .append(\"circle\")\n .attr(\"class\", \"dot-plot-element\")\n .attr(\"cx\", (d) => calculateCX(d, stackMap, totalHeightMap))\n .attr(\"cy\", (d) => yScaleDotPlot(d.x))\n .attr(\"r\", qradius - 8)\n .style(\"stroke\", \"white\")\n .style(\"stroke-width\", lineWidths.regular)\n .style(\"fill\", \"white\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4004,"value":"function enterDot1(enter, stackMap, totalHeightMap) {\n return enter\n .append(\"use\")\n .attr(\"href\", \"#man-icon\")\n .attr(\"class\", \"dot-plot-element\")\n .attr(\"x\", (d) => calculateCX(d, stackMap, totalHeightMap) - 12)\n .attr(\"y\", (d) => yScaleDotPlot(d.x) - 12) // offset of half the height\n .attr(\"width\", 24)\n .attr(\"height\", 24)\n .style(\"stroke\", \"white\")\n .style(\"stroke-width\", 32);\n /* .style(\"fill\", \"white\"); */\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2686,"value":"function updateDot(update, values, stackMap, totalHeightMap) {\n return update\n .transition()\n .delay(100)\n .duration(400)\n .ease(d3.easeCubic)\n .attr(\"fill-opacity\", (d) => (d.q <= values.sleepTime ? \"1\" : \"0\"))\n .attr(\"cx\", (d) => calculateCX(d, stackMap, totalHeightMap))\n .attr(\"cy\", (d) => yScaleDotPlot(d.x));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4008,"value":"function updateDot1(update, values, stackMap, totalHeightMap) {\n return update\n .transition()\n .delay(100)\n .duration(400)\n .ease(d3.easeCubic)\n .attr(\"fill-opacity\", (d) => (d.q <= values.sleepTime ? \"1\" : \"0\"))\n .attr(\"x\", (d) => calculateCX(d, stackMap, totalHeightMap) - 12)\n .attr(\"y\", (d) => yScaleDotPlot(d.x) - 12); // offset of half the height\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2907,"value":"function updateDotPlot(data, values) {\n const preprocessDotPlot = (plotData) => {\n return {\n stackMap: new Map(),\n totalHeightMap: precalculateHeights(plotData)\n };\n };\n\n const enterDotPlot = (enter, { stackMap, totalHeightMap }) =>\n enterDot1(enter, stackMap, totalHeightMap);\n const updateDotPlot = (update, { stackMap, totalHeightMap }) =>\n updateDot1(update, values, stackMap, totalHeightMap);\n\n updatePlot({\n data: data,\n plotClass: \"dot-plot\",\n plotDataKey: \"dotPlotData\",\n enterFn: enterDotPlot,\n updateFn: updateDotPlot,\n preprocessFn: preprocessDotPlot\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2698,"value":"---\n### Percentile Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2703,"value":"function enterPercentile(enter) {\n return enter\n .append(\"text\")\n .attr(\"class\", \"percentile-plot-element\")\n .attr(\"y\", (d) => yScaleSVG(d.q))\n .text((d) => `${Math.round(d.p * 100)}%`) // Improved percentage display\n .style(\"fill\", \"white\")\n .style(\"font\", \"10px Roboto\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"alignment-baseline\", \"middle\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2705,"value":"function updatePercentile(update) {\n return update\n .transition()\n .duration(100)\n .ease(d3.easeCubic)\n .attr(\"y\", (d) => yScaleSVG(d.q));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2740,"value":"function updatePercentilePlot(data) {\n const filterPercentilePlot = (plotData) => {\n return plotData.filter((item) => percentileSelection.includes(item.p));\n };\n\n const enterPercentilePlot = (enter) => enterPercentile(enter); // Assuming enterDot doesn't require additional data\n const updatePercentilePlot = (update) => updatePercentile(update); // Assuming updateDot doesn't require additional data\n\n updatePlot({\n data: data,\n plotClass: \"percentile-plot\",\n plotDataKey: \"percentilePlotData\",\n enterFn: enterPercentilePlot,\n updateFn: updatePercentilePlot,\n filterFn: filterPercentilePlot\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2689,"value":"---\n### Settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2691,"value":"lineWidths = ({\n thin: 0.5,\n regular: 1,\n medium: 1.5,\n thick: 2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2713,"value":"colors = ({\n background: \"black\",\n grid: \"white\",\n recommended: \"#2e807d\",\n acceptable: \"#3d1438\",\n text: \"white\",\n strokeOutline: \"black\"\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1042,"value":"---\n### Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1372,"value":"w = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1375,"value":"h = (w / 3) * 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1408,"value":"margin = ({\n top: 128,\n right: 64,\n bottom: 128,\n left: 64\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"/* widthCanvas = 4961 // High-resolution width for print */\nwidthCanvas = 5020 // High-resolution width for print","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"/* heightCanvas = 3307 // High-resolution height for print */\nheightCanvas = 3378 // High-resolution height for print","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1265,"value":"heightSVG = Math.round((width / widthCanvas) * heightCanvas)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"marginCanvas = ({\n top: 180,\n right: 185 /* + 100 */ /* for print offset */,\n bottom: 830,\n left: 185 /* + 100 */ /* for print offset */\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1268,"value":"marginSVG = ({\n top: Math.round((marginCanvas.top * width) / widthCanvas),\n right: Math.round((marginCanvas.right * width) / widthCanvas),\n bottom: Math.round((marginCanvas.bottom * width) / widthCanvas),\n left: Math.round((marginCanvas.left * width) / widthCanvas)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"ageMin = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"ageMax = 95","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"sleepMin = 4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1095,"value":"sleepMax = 13","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3283,"value":"nthresholdsSleep = 18","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3281,"value":"thresholdsSleep = d3.ticks(sleepMin, sleepMax, nthresholdsSleep)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3176,"value":"canvasScaleFactor = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3963,"value":"fontSettings = ({\n fontFamily: \"Roboto\",\n fontSize: \"12px\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4001,"value":"icon = \"M400-80v-280h-80v-240q0-33 23.5-56.5T400-680h160q33 0 56.5 23.5T640-600v240h-80v280H400Zm80-640q-33 0-56.5-23.5T400-800q0-33 23.5-56.5T480-880q33 0 56.5 23.5T560-800q0 33-23.5 56.5T480-720Z\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1056,"value":"---\n### Scales","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"xScaleSVG = d3\n .scaleLinear()\n .domain([ageMin, ageMax]) // Data space\n .rangeRound([margin.left, w - margin.right]) // Pixel space\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1438,"value":"yScaleSVG = d3\n .scaleLinear()\n .domain([sleepMin, sleepMax]) // Data space\n .rangeRound([h - margin.bottom, margin.top]) // Pixel space, inverted because canvas y=0 is at the top\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3696,"value":"timeScale = d3\n .scaleTime()\n .domain([startTime, endTime])\n .range([h - margin.bottom, margin.top])\n .clamp(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1434,"value":"xScaleCanvas = d3\n .scaleLinear()\n .domain([sleepMin, sleepMax]) // Data space\n .range([marginCanvas.left, widthCanvas - marginCanvas.right]) // Pixel space","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"yScaleCanvas = d3\n .scaleLinear()\n .domain([ageMin, ageMax]) // Data space\n .range([heightCanvas - marginCanvas.bottom, marginCanvas.top]) // Pixel space, inverted because canvas y=0 is at the top","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1244,"value":"xScaleDotPlot = d3\n .scaleLinear()\n .domain([0, qymax])\n .range([0, qymax * qradius * 2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1248,"value":"yScaleDotPlot = d3\n .scaleLinear()\n .domain([sleepMin, sleepMax])\n .range([h - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2352,"value":"xScaleBoxPlot = d3\n .scaleLinear()\n .domain([ageMin, ageMax])\n .rangeRound([margin.left, w - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2356,"value":"yScaleBoxPlot = d3\n .scaleLinear()\n .domain([sleepMin, sleepMax])\n/* .nice() */\n .range([h - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3371,"value":"rangeSteps = d3.range(4, 13.5, 0.5) // Creates an array from 4 to 13 with steps of 0.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3373,"value":"rangeValues = d3.range(\n h - margin.bottom,\n margin.top,\n ((margin.top - (h - margin.bottom)) / rangeSteps.length) * -1\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3358,"value":"yScaleCrosshair = d3\n .scaleThreshold()\n .domain(rangeSteps) // Data space\n .range(d3.range(h - margin.bottom, margin.top, -1)) // Assuming equal step in pixel space // Assuming equal step in pixel space","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3384,"value":"yScaleCrosshair1 = d3\n .scaleQuantize()\n .domain([h - margin.bottom, margin.top])\n .range(thresholdsSleep)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3482,"value":"yScaleQuantize = d3\n .scaleQuantize()\n .domain(d3.range(h - margin.bottom, margin.top, -1))\n .range([4, 13]) // Assuming equal step in pixel space","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3484,"value":"yScaleQuantize.invertExtent()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3397,"value":"yScaleQuantize(7)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3480,"value":"yScaleCrosshair1(128)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3469,"value":"h - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3473,"value":"margin.top","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3404,"value":"yScaleCrosshair1.invertExtent(13)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2304,"value":"---\n### Quantile Dot Plots","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2308,"value":"viewof numQuantiles = Inputs.range([20, 200], {\n label: \"# of quantiles\",\n value: 20,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2317,"value":"qwidth = heightSVG - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2319,"value":"// find the maximum amount of stacked dots\nqymax = Math.max(\n ...data.map((obj) =>\n Math.max(\n ...d3\n .rollup(\n obj.dotPlotData,\n (v) => v.length, // Count the entries\n (d) => d.x // Group by the x value\n )\n .values()\n )\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2306,"value":"qdomain = [sleepMin, sleepMax]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2315,"value":"qradius = (0.5 * qwidth * qstep) / (qdomain[1] - qdomain[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2312,"value":"/* qstep = Math.sqrt(4.5 / numQuantiles) */ // 30 minute step for 18 quantiles, then scale\nqstep = 540 / 20 / 60 // This gives each quantile representing 27 minutes in hours","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2493,"value":"---\n### Percentile Lines Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3245,"value":"function drawGroupedPercentileLines(svg, dataGroups) {\n // Setup percentile lines\n const drawPercentileLines = setupPercentileLinesPlot(svg);\n\n // Iterate over the data groups to draw lines with different styles\n dataGroups.forEach((value, key) => {\n if (mostProminent.includes(key) && percentiles.includes(\"A\")) {\n drawPercentileLines(value, 0.4, lineWidths.regular, colors.text);\n } else if (\n lessProminent.includes(key) &&\n key % 5 === 0 &&\n percentiles.includes(\"B\")\n ) {\n drawPercentileLines(value, 0.4, lineWidths.thin, colors.text);\n } else if (percentiles.includes(\"C\")) {\n drawPercentileLines(value, 0.25, lineWidths.regular, colors.text);\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3212,"value":"function setupPercentileLinesPlot(svg) {\n // Create a group for the percentile lines\n const percentileGroup = svg\n .append(\"g\")\n .attr(\"id\", \"percentileGroup\")\n .attr(\"opacity\", 1);\n\n // Function to draw percentile lines in SVG\n function drawPercentileLines(data, opacity, strokeWidth, strokeColor) {\n // Append a path for the line\n percentileGroup\n .append(\"path\")\n .datum(data) // Bind the data to the path\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", strokeColor)\n .attr(\"stroke-width\", strokeWidth)\n .attr(\"stroke-opacity\", opacity) // Set the opacity of the line\n .attr(\"d\", lineGenerator); // Use the line generator to set the \"d\" attribute\n }\n\n return drawPercentileLines; // Return the function for external use\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3015,"value":"lineGenerator = d3\n .line()\n .curve(d3.curveNatural)\n .x((d) => xScaleSVG(d.age))\n .y((d) => yScaleSVG(d.tst))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2496,"value":"percentileSelection = [0.05, 0.1, 0.25, 0.5, 0.75, 0.9, 0.95]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3027,"value":"mostProminent = [5, 10, 25, 50, 75, 90, 95] // Most significant percentiles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3031,"value":"lessProminent = [\n 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95\n] // Steps of 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3060,"value":"---\n### Recommended Area","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3158,"value":"function drawRecommendedArea(svg) {\n svg\n .append(\"path\")\n .datum(sleepData)\n .attr(\"fill\", colors.recommended)\n .attr(\"fill-opacity\", 0.2)\n .attr(\"d\", areaGenerator);\n\n // Draw boundary lines using the line generators derived from the area generator\n const lowerLine = areaGenerator.lineY0();\n const upperLine = areaGenerator.lineY1();\n\n // Append the lower boundary line\n svg\n .append(\"path\")\n .datum(sleepData)\n .attr(\"d\", lowerLine)\n .attr(\"stroke\", colors.recommended)\n .attr(\"stroke-width\", lineWidths.medium)\n .attr(\"fill\", \"none\");\n\n // Append the upper boundary line\n svg\n .append(\"path\")\n .datum(sleepData)\n .attr(\"d\", upperLine)\n .attr(\"stroke\", colors.recommended)\n .attr(\"stroke-width\", lineWidths.medium)\n .attr(\"fill\", \"none\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3011,"value":"areaGenerator = d3\n .area()\n .x((d) => xScaleSVG(d.age))\n .y0((d) => yScaleSVG(d.recommended[0]))\n .y1((d) => yScaleSVG(d.recommended[1]))\n .curve(d3.curveStepAfter)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3151,"value":"// Process sleep data in an observable notebook cell\nsleepData = sleepGuidelines\n .flatMap((group) => {\n const [startAge, endAge] = group.ageRange.split(\"–\").map(Number);\n\n return [\n ...(startAge < ageMin && endAge >= ageMin\n ? [{ age: ageMin, ...group }]\n : []),\n ...(startAge >= ageMin ? [{ age: startAge, ...group }] : []),\n ...(endAge > ageMin && endAge <= ageMax\n ? [{ age: endAge, ...group }]\n : [])\n ];\n })\n .concat(\n sleepGuidelines.at(-1).ageRange.split(\"–\")[1] > ageMax\n ? [\n {\n age: ageMax,\n ...sleepGuidelines.at(-1)\n }\n ]\n : []\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"sleepGuidelines = [\n { ageRange: \"1–2\", recommended: [11, 14], acceptable: [9, 16] },\n { ageRange: \"3–5\", recommended: [10, 13], acceptable: [8, 14] },\n { ageRange: \"6–13\", recommended: [9, 11], acceptable: [7, 12] },\n { ageRange: \"14–17\", recommended: [8, 10], acceptable: [7, 11] },\n { ageRange: \"18–25\", recommended: [7, 9], acceptable: [6, 11] },\n { ageRange: \"26–40\", recommended: [7, 9], acceptable: [6, 10] },\n { ageRange: \"41–65\", recommended: [7, 9], acceptable: [6, 10] },\n { ageRange: \"66–98\", recommended: [7, 8], acceptable: [5, 9] }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3207,"value":"---\n### Point Cloud","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3173,"value":"function drawPointcloud(context) {\n context.fillStyle = colors.text;\n context.globalAlpha = 0.3;\n simulatedData\n .filter((d) => d.age >= ageMin && d.age <= ageMax)\n .forEach((point) => {\n context.beginPath();\n context.arc(\n xScaleSVG(point.age) * canvasScaleFactor,\n yScaleSVG(point.sleepTime) * canvasScaleFactor,\n 0.5,\n 0,\n 2 * Math.PI\n );\n context.fill();\n });\n context.globalAlpha = 1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3238,"value":"---\n### Cases","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3240,"value":"function drawCases(svg) {\n const casesGroup = svg.append(\"g\").attr(\"id\", \"casesGroup\");\n casesGroup\n .selectAll(\"circle\")\n .data(cases) // Bind data for each case\n .join(\"circle\") // Create a circle for each case\n .attr(\"cx\", (d) => xScaleSVG(d.age)) // Set the x-coordinate based on the age\n .attr(\"cy\", (d) => yScaleSVG(d.tib)) // Set the y-coordinate based on the tib\n .attr(\"r\", 2.5) // Radius of the circle\n .attr(\"fill\", colors.text); // Fill color of the circles\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":"---\n### data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":205,"value":"ageGroups = [\n { ageRange: \"5–10\", name: \"bis 10 Jahre\" },\n { ageRange: \"11–17\", name: \"11–17 Jahre\" },\n { ageRange: \"18–65\", name: \"18–65 Jahre\" },\n { ageRange: \"66–95\", name: \"über 66 Jahre\" }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2539,"value":"groupedByPercentile = d3.group(flattenedData, (d) => d.percentile)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2533,"value":"flattenedData = data.flatMap((d) =>\n d.percentilePlotData.map((p) => ({\n age: d.ageRange.start,\n percentile: Math.round(p.p * 100),\n tst: p.q\n }))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3164,"value":"---\n### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2329,"value":"import { thresholdsAge } from \"94ca72f3e7f195cb\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3166,"value":"import { simulatedData } from \"94ca72f3e7f195cb\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2592,"value":"import { dataSet } from \"94ca72f3e7f195cb\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2288,"value":"import { data } from \"94ca72f3e7f195cb\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1582,"value":"import { bindot } from \"@uwdata/dot-plots\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 32:"$31:body"