31:T103a,{ const viewWidth=696 // const viewWidth=width const maxWidth=viewWidth const viewHeight=396 // const viewHeight=520 const margin = {top: 48, bottom: 60, left: 12, right: 12} const caffeineStreams=dosesToCaffeineStreams(state.doses, {totalHours, caffeinePerCupMg}) .sort((l,r)=>(l[0][0]-r[0][0])) const stackedStreams = stackStreams(caffeineStreams) let streamsToPlot= stackedStreams .map((curStream)=>{ return curStream .filter(([x])=>x<=30) .map(([x,y0,y])=>({x,y0,y}))}) // Assign IDs to the streams let streamCountByTime= new Map() streamsToPlot.forEach((curStream)=>{ const countForTime = (streamCountByTime.get(curStream[0].x) || 0) // Update streamCountByTime streamCountByTime.set(curStream[0].x, countForTime+1) // Set an ID on the current stream curStream.id = `${curStream[0].x}_${countForTime}` }) const streamIDs = new Set(streamsToPlot.map((ds)=>ds.id)) const enteredStreamIDs = new Set([...streamIDs].filter(x => !visibleStreamIDs.has(x))) const exitedStreamIDs = new Set([...visibleStreamIDs].filter(x => !streamIDs.has(x))) if ( 0 !== enteredStreamIDs.size || 0 !== exitedStreamIDs.size ) { // mutable visibleDataHashes = dataHashes console.log("Entered: " + Array.from(enteredStreamIDs)) console.log("Exited: " + Array.from(exitedStreamIDs)) new Promise(async ()=>{ await Promises.delay(500) mutable visibleStreamIDs = new Set([...visibleStreamIDs, ...enteredStreamIDs] .filter(x => !exitedStreamIDs.has(x))) }) } // Mark new streams as entered // This is not great and super fragile streamsToPlot.forEach(curStream=>{ curStream.entered = enteredStreamIDs.has(curStream.id) curStream.exited = exitedStreamIDs.has(curStream.id) }) // return streamsToPlot const maxCaffeine = d3.max(streamsToPlot.flat() .map(d=>caffeineSleepThreshold<=d.y)) const caffeineBelowSleepThreshold = (maxCaffeine <= caffeineSleepThreshold) const sleepTime = calculateSleepTime(streamsToPlot) const description = getDescriptionText(streamsToPlot) const descriptionParts = description.split("\n") const colors = d3.quantize(d3.interpolateRgb("#E6762A", "#F3E500"), Math.max(2,streamsToPlot.length)) // const grid = renderGrid() const grid = null const renderedCaffeineChart = caffeineChart(streamsToPlot, { colors, width: viewWidth-margin.left-margin.right, height: viewHeight-margin.top-margin.bottom, domain: [6,30] }) return svg` ` } 32:T40c,//https://pubmed.ncbi.nlm.nih.gov/24235903/ // caffeineSleepThreshold=caffeineRemaining(6)*400 // 212 // https://onlinelibrary.wiley.com/doi/full/10.1111/j.1365-2869.2006.00518.x // caffeineSleepThreshold=(caffeineRemaining(3)*100+caffeineRemaining(1)*100) // caffeineSleepThreshold=170 // caffeineSleepThreshold=170 viewof caffeineSleepThreshold = { const output = slider({ title: "Caffeine Sleep Treshold (mg)", min: 0, max: 300, step: 10, value: (state.caffeineSleepThreshold || 50), description: "The maximum amount of caffeine in your body where you can sleep restfully. The FDA suggests that a single cup of coffee (80mg caffeine) can keep you awake at bedtime, equivalent to ~50mg present at bedtime. Other studies suggest people can fall asleep with 170mg present at bedtime, but their sleep is measurably worse." }) output.addEventListener("mouseup", ()=>{ // Update state for sharing mutable state = {...state, caffeineSleepThreshold: parseInt(output.value)} }) return output } 33:T73b,getDescriptionText = (streamsToPlot)=>{ if (streamsToPlot.length == 0) { return "Please click + below beside a time \n to add a simulated caffeine drink." } const maxCaffeine = d3.max(streamsToPlot.flat().map(d=>d.y)) const totalCaffeine = streamsToPlot.length * caffeinePerCupMg const caffeineBelowSleepThreshold = (maxCaffeine <= caffeineSleepThreshold) const plural = 1 < streamsToPlot.length const sleepTime = calculateSleepTime(streamsToPlot) const ouncesPerCup = {155: 8, 235: 12, 310: 16, 410: 20}[caffeinePerCupMg] let description = "" if ( caffeineToxicThreshold <= totalCaffeine ) { description = `${streamsToPlot.length} × ${ouncesPerCup}oz cup${plural? "s" : ""} of coffee is roughly ${totalCaffeine}mg of caffeine. Consuming more than\n ${caffeineToxicThreshold}mgs of caffeine is considered toxic and can lead to effects like seizures.` } else if ( caffeineHealthThreshold <= totalCaffeine ) { description = `${streamsToPlot.length} × ${ouncesPerCup}oz cup${plural? "s" : ""} of coffee is roughly ${totalCaffeine}mg of caffeine. This exceeds the FDA's ${caffeineHealthThreshold}mg/day \nhealthy limit. Given your coffee intake, you might expect restful sleep after ${hourToTimeString(sleepTime)}.` } else if( sleepTime < 20 || maxCaffeine < caffeineSleepThreshold ) { description = `${streamsToPlot.length} × ${ouncesPerCup}oz cup${plural? "s" : ""} of coffee is roughly ${totalCaffeine}mg of caffeine. Given your coffee intake,\n you'll be below the sleep threshold (${caffeineSleepThreshold}mg) before bedtime.` } else { description = `${streamsToPlot.length} × ${ouncesPerCup}oz cup${plural? "s" : ""} of coffee is roughly ${totalCaffeine}mg of caffeine. Given your coffee intake,\n you might expect restful sleep after ${hourToTimeString(sleepTime)}.` } return description }34:T56b,/** * Render a controller for adding / subtracting simulated coffee */ renderCoffeeInputter = (doses, onChange, params)=> { params = params || {} const width = params['width'] || 800 // Determine the hours users can set const hoursToPlot = d3.range(6,24,2) const colCount = (320 < width)? 2 : 1 const hoursPerCol = Math.floor(hoursToPlot.length / colCount) const output = html`

${d3.range(colCount).map((colIndex)=>{ const hours = hoursToPlot.slice(colIndex*hoursPerCol, (colIndex+1)*hoursPerCol) return html`

${hours.map((k)=>{ const row = html` ` row[`${k}-inc`].disabled = 6<=doses.get(k) row[`${k}-dec`].disabled = !doses.get(k) || doses.get(k)<=0 row[`${k}-inc`].addEventListener("click", () => {onChange(k, 1)}); row[`${k}-dec`].addEventListener("click", () => {onChange(k, -1)}); return row })}

` })}

` return output }35:T497,/** * Render the streams. * Make it shaky when the value is really high to feel like caffeine jitters. * Lots of magic values here that were tweaked for look */ shakyStreamPlotFn = (data, params) => { const {x, y, margin, seriesIndex, colors} = params; const fillColor = colors[seriesIndex % colors.length] let classString = "stream" if ( data.entered ) { classString = classString + " entered" } // upsample the data to support the jitters data = upsample(data, ['x', 'y0', 'y'], 50) // Calculate how much to shake based on how much total caffeine const shakeFactor= d3.scaleLinear() .domain([caffeineSleepThreshold,500]) .range([0,1]).clamp(true) // Chosen for look const amplitude=.9 // Render with shakes const area = d3.area() .x((d,j)=> (x(d.x)+(1*Math.cos(x(d.x)*amplitude))*shakeFactor(d.y) )) .y0((d,j)=>(y(d.y0)+(-1*Math.cos(x(d.x)*amplitude))*shakeFactor(d.y0))) .y1((d,j)=>(y(d.y)+(-1*Math.cos(x(d.x)*amplitude))*shakeFactor(d.y))) let output= svg` ` return output }36:T466,/* * Render the line showing when the user could expect to fall asleep */ sleeplinePlotFn = ((allData, params)=>{ const {x, y, margin, seriesIndex, plotHeight, caffeineSleepThreshold} = params; // if no time exceeds the caffeine threshold, don't draw if( allData.flat().filter(d=>caffeineSleepThreshold<=d.y).length === 0) return null // Calculate the earliest the person could fall asleep const sleepTime = calculateSleepTime(allData) // If they can selep before 8pm, don't plot the line // if( sleepTime < 20 ) return null //Render the line with the emoji on top const output=svg` ${renderSleepIcon()} ` return output })37:T779,/** * Render the caffeine chart * Try to keep magic numbers here... */ caffeineChart = ((data,params) => { params = params || {} let colors = params['colors'] || [] // Plot fn for the caffeine streams const plotFn = (data,params)=>{ return shakyStreamPlotFn(data, {...params, colors})} // Plot fn for the overlaid cups and sleep line const contextPlotFn = ((seriesData, params)=>{ const {x,y,seriesIndex} = params; // Only render this once if ( seriesIndex !==0 ) return null const cups = svg` ${cupsPlotFn(data, params)} ` const sleepLine= sleeplinePlotFn(data, {...params, caffeineSleepThreshold}) const sleepThresholdLine = svg`` const dayNightBar = svg` ${renderDayNightBar()} ` return svg` ${cups} ${dayNightBar} ${sleepLine} `}) // Determine the largest number of coffee cups being rendered // to calculate how much to offset the margin let maxCupCount = d3.max( Array.from(d3.rollup(data.map(d=>d[0].x), xs=>xs.length, x=>x)) .map(([_,v])=>v)) maxCupCount=maxCupCount||1 params = { plotFn, contextPlotFn, margin: {top: 12, left:48, right: 36, bottom: 60+12*maxCupCount}, xAxisTickSizeInner: 14, // Set a minimum range, so it feels less jarring w/ few drinks added range: [Math.min(0,d3.min(data.flat().map(d=>d.y))), Math.max(150, Math.ceil(d3.max(data.flat().map(d=>d.y))/100.0)*100)], xTickFormatFn: hourToTimeString, yTickFormatFn: (n)=>(n+"mg"), ...params, } return chart(data, params) })38:T9e6,/** * chart boilerplate. */ chart = ((stackedData, params) => { params = params || {} const width = params['width'] || 320 const height = params['height'] || 120 const color = params['color'] || '#1184C4' const classId = params['class'] || "" const xAxisTickSizeInner = params['xAxisTickSizeInner'] || 3 const domain = params['domain'] || [d3.min(stackedData.flat().map(d=>d.x)), d3.max(stackedData.flat().map(d=>d.x))] const range = params['range'] || [Math.min(0,d3.min(stackedData.flat().map(d=>d.y))), d3.max(stackedData.flat().map(d=>d.y))] const yMax = range[1] const yMin = range[0] const xTickFormatFn = params.xTickFormatFn || d3.format(".1d") const yTickFormatFn = params.yTickFormatFn || d3.format(".1d") let margin = {top: 20, right: 0, bottom: 24, left: 30, spacing: 1, ...(params.margin||{})} const plotHeight = height-margin.top-margin.bottom const plotWidth = width - margin.left - margin.right const plotFn = params["plotFn"] || ((data, params) => {}) const contextPlotFn = params["contextPlotFn"] || ((data, params) => {}) const x = d3.scaleLinear() .domain(domain) .range([0, plotWidth]); const axisBottom= d3.axisBottom(x).tickFormat(xTickFormatFn) const xAxis = (g) => ( g .attr("class", `x-axis`) .attr("transform", `translate(0,${plotHeight})`) .call(axisBottom.tickSizeOuter(0).tickSizeInner(xAxisTickSizeInner))) const y = d3.scaleLinear() .domain(range) .range([plotHeight, 0]) const axisLeft = d3.axisLeft(y).tickFormat(yTickFormatFn) const yAxis = (g) => ( g .attr("class", `y-axis`) .attr("transform", `translate(${0},${-3})`) .call(axisLeft.ticks(5).tickSize(0)) // .call(axisLeft) ) // return html` ` })39:[] 2f:{"title":"Caffeine Simulator","cells":[{"id":0,"value":"md`# Caffeine Simulator\n\nHow long does caffeine stay in your system? Does coffee in the morning impact sleep at night?\n\nNotes / Writeup for this are here: [Visualizing Caffeine & Bedtime](https://towardsdatascience.com/interactive-visualizing-caffeine-bedtime-4c256d562193)\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"{\n // Handle updating state whenever one of the buttons are clicked\n const onChange = (k,delta)=>{\n // Get doses with the new count applied\n let newDoses = new Map([...state.doses, [k, Math.max(0,(state.doses.get(k)||0)+delta)]])\n //remove zeros\n newDoses = Array.from(newDoses)\n .filter(([k,v])=>0`.href, state)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1602,"value":"md`## Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2121,"value":"//https://www.starbucks.com/menu/product/480/hot?parent=%2Fdrinks%2Fhot-coffees%2Fbrewed-coffees\nviewof caffeinePerCupMg = {\n const output = radio({\n title: 'Caffeine Per Cup (mg)',\n description: 'Based on Starbucks Pike Place Roast',\n options: [\n { label: '90mg - FDA Serving Size (8oz)', value: 90 },\n { label: '155mg - Small / Short (8oz)', value: 155 },\n { label: '235mg - Medium / Tall (12oz)', value: 235 },\n { label: '310mg - Large / Grande (16oz)', value: 310 },\n { label: '410mg - X-Large / Venti (20oz)', value: 410 }\n ],\n value: (state.caffeinePerCupMg || 155)\n })\n output.addEventListener(\"input\", ()=>{\n // Update state for sharing\n mutable state = {...state, caffeinePerCupMg: parseInt(output.value)}\n })\n return output\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2140,"value":"//https://www.ncbi.nlm.nih.gov/books/NBK223808/\nviewof caffeineHalfLifeHrs = {\n const output = slider({\n title: \"Caffeine Half-Life (hrs)\",\n min: 1.5,\n max: 9.0,\n precision: 3,\n step: 0.5,\n value: (state.caffeineHalfLifeHrs || 5.0),\n description:\n \"Caffeine's Half-Life is how many hours it takes for half the substance to \\\"clear\\\" from your body. Smaller numbers mean caffeine is cleared from your body faster. 5 is typical, but it can range from 1.5 - 9.5 hours. Things like your metabolism, smoking and birth control can affect caffeine half-life.\"\n })\n output.addEventListener(\"mouseup\", ()=>{\n // Update state for sharing\n mutable state = {...state, caffeineHalfLifeHrs: parseFloat(output.value)}\n })\n return output\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1148,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2078,"value":"//https://www.fda.gov/consumers/consumer-updates/spilling-beans-how-much-caffeine-too-much\ncaffeineHealthThreshold = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":2073,"value":"//https://www.fda.gov/consumers/consumer-updates/spilling-beans-how-much-caffeine-too-much\ncaffeineToxicThreshold = 1200","pinned":false,"hidden":false,"mode":"ojs"},{"id":1606,"value":"totalHours=96","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"md`## State`","pinned":false,"hidden":false,"mode":"ojs"},{"id":654,"value":"/*\n* Attempt to initialize from query params, otherwise this is controlled by the coffee inputter and the param inputs.\n* State is a map of hours to # of cups of coffee consumed\n*/\nmutable state = (getInitialStateFromShareURL(location.href) || {\n caffeinePerCupMg: 155,\n caffeineHalfLifeHrs: 5,\n caffeineSleepThreshold: 50,\n doses: new Map([[8,1],[10,1],[12,1]])})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2933,"value":"// To support enter animations w/o giving up declarative svg\nmutable visibleStreamIDs= new Set()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2927,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2900,"value":"md`# Misc Notes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2887,"value":"md`## Halflife distributions\nHalflives from 2 studies \"A urinary metabolite ratio that reflects systemic caffeine clearance\" and \"Effect of smoking on caffeine clearance\"\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2946,"value":"{\n const allHalfLives = Object.values(halflivesBySubjectType).flat()\n const halflifeMean = d3.mean(allHalfLives)\n \nreturn md`\nMean: ${halflifeMean.toPrecision(2)}; 95% CI: ${jstat.normalci(halflifeMean, 0.05, allHalfLives).map(x=>x.toPrecision(2)).join(\" - \")}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2133,"value":"halflivesBySubjectType= ({\n //A urinary metabolite ratio that reflects systemic caffeine clearance\n //Effect of smoking on caffeine clearance\n nonSmokers: [9.5, 6.0, 7.5, 5.6, 5.4, 4.2,3.0,7.6,3.8,6.4,7.7,9.4,6.7,4.2,7.7,7.1,5.9,3.7,], \n birthControl: [8.3, 12.1, 9.0, 8.6, 8.1],\n\n smokers: [5.3, 2.2, 5.2, 3.6, 3.9, 3.0, 1.5, 2.3, 5.9, 4.4, 5.9, 3.8, 4.3, 1.6, 4.1, 4.0, 2.6, 2.6]\n})\n\n// halflives= [\n// //A urinary metabolite ratio that reflects systemic caffeine clearance\n// // Birth control\n// 8.3, 12.1, 9.0, 8.6, 8.1, \n// // non smokers\n// 9.5, 6.0, 7.5, 5.6, 5.4, \n// // smokers\n// //5.3, 2.2, 5.2, 3.6, 3.9,\n// //Effect of smoking on caffeine clearance\n// // non-smokers\n// 4.2,3.0,7.6,3.8,6.4,7.7,9.4,6.7,4.2,7.7,7.1,5.9,3.7,\n// // smokers\n// //3.0, 1.5, 2.3, 5.9, 4.4, 5.9, 3.8, 4.3, 1.6, 4.1, 4.0, 2.6, 2.6\n// ]\n// mean 6.3\n// CI 5.6 - 8.2","pinned":false,"hidden":false,"mode":"ojs"},{"id":2892,"value":"md`Halflives for smokers, non-smokers, birth-control takers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2826,"value":"{\n\n const histogram = d3.histogram()\n .domain([2,11])\n .thresholds(11); \n\n const distributionsToPlot = Object.entries(halflivesBySubjectType)\n .map(([subjectType, halflives])=>{\n return histogram(halflives).map(bin=>({x:bin.x0, y0: 0, y:bin.length}))\n })\n\nreturn stackedAreaGraph(distributionsToPlot)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2895,"value":"md`All halflives together`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2876,"value":"{\n\n const histogram = d3.histogram()\n .domain([2,11])\n .thresholds(11); \n \n const distributionsToPlot = [histogram(Object.values(halflivesBySubjectType).flat()).map(bin=>({x:bin.x0, y0: 0, y:bin.length}))]\n\nreturn stackedAreaGraph(distributionsToPlot)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"createShareURL=(currentURL, state)=>{\n if (!state) return currentURL\n const [baseURL,queryString] = currentURL.split(\"?\")\n const preparedState = {...state, doses: Object.fromEntries(state.doses)}\n const queryParams=new URLSearchParams(queryString)\n queryParams.set(\"state\", btoa(JSON.stringify(preparedState)))\n return baseURL + \"?\" + queryParams.toString()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"getInitialStateFromShareURL=(url)=>{\n\n if (!url) return null\n\n const queryParams=new URLSearchParams(url.split(\"?\")[1])\n\n if ( !queryParams.get(\"state\") ) return null\n\n try{\n\n let output=JSON.parse(atob(queryParams.get(\"state\")))\n output = {...output, doses: new Map(Object.entries(output.doses).map(([k,v])=>([parseInt(k), v])))}\n return output\n\n } catch (ex) {\n return null\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"//This is kindof a stupid design\nupsample= (data, keys, multiple=10) => {\n const interpolators = keys.map(k=>(data.map(d=>d[k])))\n .map(x=>(d3.piecewise(d3.interpolateNumber, x)))\n // .map(d3.interpolateBasis)\n const n = data.length * multiple\n \n const upsampledData = interpolators\n .map(interpolator=> d3.quantize(interpolator, n))\n \n return d3.range(n).map(i=>{\n return keys.reduce((agg,k,j)=>({...agg, [k]: upsampledData[j][i]}),{})\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"caffeineRemaining = (tHours, halflifeHours=caffeineHalfLifeHrs) => {\n if ( tHours == 0 ) return 1.0\n return .9444 * Math.pow(0.5, (tHours -1) / halflifeHours)}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1640,"value":"dosesToCaffeineStreams = (dosesByHour, {totalHours, caffeinePerCupMg}) => {\n return Array.from(dosesByHour).map(([startTime, cups])=>{\n startTime = parseInt(startTime)\n return d3.range(cups).map(i=>{\n const dose = caffeinePerCupMg\n return [[startTime, 0], \n ...d3.range(startTime+1,totalHours)\n .map(t=>([t,1.0 * dose * caffeineRemaining(t-startTime)]))]})\n }).flat()\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1710,"value":"stackStreams = (streams) => {\n const amountsByHour = d3.rollup(streams.flat(), \n ds=>ds.map(([t,v])=>v), \n d=>d[0])\n \n return streams.map((curStream, streamIndex)=>{\n return curStream.map(([t,_])=>[t, \n d3.sum(amountsByHour.get(t).slice(0, streamIndex)), \n d3.sum(amountsByHour.get(t).slice(0, streamIndex+1)), ])\n})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"md`## Charts & Inputter` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2082,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2436,"value":"renderGrid=()=>{\n // return null\n\n return svg`\n\n${d3.range(100).map(i=>(svg``))}\n${d3.range(100).map(i=>(svg``))}\n\n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1459,"value":"renderCoffeeCup=()=>{\nreturn svg`☕️`\n// return svg`\n// \n// \n// \n// `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1959,"value":"renderSleepIcon=()=>{\n return svg`😴`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1756,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1978,"value":"/**\n* Determine the earliest time the user could fall asleep\n* Uses global caffeineSleepThreshold\n*/ \ncalculateSleepTime = (allData)=> {\n\n if ( 0 === allData.length ) return null\n\n let sleepTime = 0\n \n // For the last (latest) caffeine stream, get the times that are\n // below the sleep threshold\n const sleepTimeCandidates = allData[allData.length-1]\n .slice(1) // account for rampup hour\n .filter(d=>d.y < caffeineSleepThreshold)\n \n // Update the sleeptime based on the first candidate\n if ( 0 < sleepTimeCandidates.length) {\n // Not sure when a candidate might be below 0... is this old?\n sleepTime = Math.max(sleepTime, sleepTimeCandidates[0].x) \n }\n\n return sleepTime\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2377,"value":"renderDayNightBar = () => {\n return svg`\n \n \n \n \n \n \n \n \n \n \n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1768,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1786,"value":"/**\n* Unused, keeping for reference\n* Render the stacks of cups on top of the stream peaks\n*/\ntopCupsPlotFn = (allData,params) => {\n const {x, y, margin, seriesIndex} = params;\n \n const streamPeaks=allData.map(stream=>{\n return stream[d3.maxIndex(stream.map(d=>d.y))]\n })\n \n const streamPeaksByHour = d3.group(streamPeaks, d=>d.x)\n\n const output = svg`\n ${Array.from(streamPeaksByHour).map(([k,streamPeaks])=>{\n \n const tallestPeakY = d3.max(streamPeaks.map(d=>d.y))\n \n return svg`\n ${streamPeaks.map((d, i)=>{\n return svg`${renderCoffeeCup()}`\n })}\n`\n\n })}\n \n`\n \n return output\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1832,"value":"/**\n* Render columns of cups below the X-axis based on # of drinks\n*/ \ncupsPlotFn = (allData,params) => {\n const {x, y, margin, seriesIndex} = params;\n\n // Get the starting value for each stream, by hour\n const streamStarts=allData.map(stream=>stream[0])\n const streamStartsByHour = d3.group(streamStarts, d=>d.x)\n\n const output = svg`\n\n ${Array.from(streamStartsByHour).map(([k,streamStarts])=>{\n // At the start of each stream, render a stack of coffee cups\n return svg`\n \n ${streamStarts.map((d, i)=>{\n return svg`\n \n ${renderCoffeeCup()}\n `})}\n `})}\n`\n\n return output\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1988,"value":"//parse / format an int into a time string e.g. \"6pm\"\nhourToTimeString=(x)=>(d3.timeFormat(\"%-I%p\")(d3.timeParse(\"%I\")(x)).toLowerCase())","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2870,"value":"stackedAreaGraph = (data, params) => {\n data= stackStreams(data.map(curSeries=>curSeries.map(d=>[d.x, d.y])))\n .map(curSeries=>curSeries.map(([x,y0,y])=>({x,y0, y})))\n \n const colors= [\"#7E7DE0\", \"#4E4D93\", \"#2A2654\"]\n\n return chart(data, {\n xTickFormatFn: (i)=>i,\n plotFn: (data, params)=>{\n let {x,y, margin, seriesIndex} = params\n // colors = colors || []\n const fillColor = colors[seriesIndex % colors.length]\n\n const\tarea = d3.area()\t\n .x((d,j)=> (x(d.x) ))\t \n .y0((d,j)=>(y(d.y0)))\t\t\t\t\n .y1((d,j)=>(y(d.y)))\n\n return svg`\n\n\n`\n\n }})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"md`## Includes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"\nd3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2159,"value":"import {slider, radio} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2984,"value":"jstat = require(\"https://cdn.jsdelivr.net/npm/jstat@latest/dist/jstat.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2937,"value":"gtag = {\n await require(\"https://www.googletagmanager.com/gtag/js?id=UA-19745547-3\").catch(() => {});\n const dataLayer = window.dataLayer = window.dataLayer || [];\n function gtag(){dataLayer.push(arguments);}\n await gtag('js', new Date());\n await gtag('config', 'UA-19745547-3', {'page_path': \"/@elibryan/caffeine-simulator\"});\n return function() { dataLayer.push(arguments); };\n}\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}