3e:null 3f:["$","title",null,{"children":"Visualization of My Week | Jianan Li | Observable"}] 45:T4e0,md `
Between 2/7/19 (Thu) and 2/13/19 (Wed), I made a grocery list app both to further my understanding of the iOS development process, and to have something that I can end up using on a weekly basis.

In this notebook, I want to show you how I spent my time on this project and how it affected my normal schedule through a visualization.

In addition to manually recording the time I woke up and went to bed every day, I used the following data collection tools to capture my week in as much detail as possible:

Timing (macOS)
TimeYourWeb Time Tracker (Chrome)
Webtime Tracker (Chrome)

You can also click here to see the data playground where I wrangled and wrestled with the data before importing them into this notebook. `46:T1ab6,chart = { const svg = d3.select(DOM.svg(width, height)); svg.attr("id", "myGraph"); let asleep = svg.append("rect") .attr("x", `${margin.left}`) .attr("y", `${margin.top}`) .attr("width", `${graphWidth}`) .attr("height", `${graphHeight}`) .attr("id", "asleep") .attr("class", "noSelect") .attr("fill", "#002244") .attr('data-tippy-content', d => tooltips["Asleep"]) .on("mouseenter", function(d) { d3.selectAll(".subCategory").each(function(d, i) { eventHandlers.restore(this, d) }) eventHandlers.displayText("33% of the week"); }) .on("mouseout", function(d) { eventHandlers.displayText("...") }) let yAxisContainer = svg.append("g") .attr("id", "yAxis") .attr("class", "y-axis") .attr("transform", `translate(${margin.left},0)`) .call(yAxis); let awake = svg.append("path") .datum(myData) .attr("id", "awake") .attr("class", "area noSelect") .attr("fill", "#f9f9f9") .attr('data-tippy-content', d => tooltips["Awake"]) .attr("d", timeAwakeAreaGenerator(false)) .on("mouseenter", function(d) { d3.selectAll(".subCategory").each(function(d, i) { eventHandlers.restore(this, d) }) eventHandlers.displayText("56% of awake time"); }) .on("mouseout", function(d) { eventHandlers.displayText("...") }) // The purpose of this transparentOverlay is to prevent showing tooltip // when in the ideal schedule state let transparentOverlay = svg.append("rect") .attr("x", `${margin.left}`) .attr("y", `${margin.top}`) .attr("width", `${graphWidth}`) .attr("height", `${graphHeight}`) .attr("id", "transparentOverlay") .attr("fill", "hsla(0,0%,0%,0.0)"); let xAxisContainer = svg.append("g") .attr("id", "xAxis") .attr("class", "x-axis") .attr("transform", `translate(0,${margin.top})`) .call(xAxis); // Google, YouTube, Stack Overflow, ... let subCategoriesStack = svg.append("g") .selectAll('.area') .data(subCategoriesStackedData) .enter().append('path') .attr('class', 'project categories subCategory area noSelect clickable') .attr('fill', d => colors[d.key][0]) .attr('data-tippy-content', d => tooltips[d.key]) // +" "+statistics[d.key] .attr('d', stackedAreaGenerator(false)) .on("mouseenter", function(d) { console.log("mouseenter event fired"); // Assign this to currentElement so that we can use it later for filtering let currentElement = this; // Fill the other elements with washed out color d3.selectAll(".subCategory") .filter(function() { return this !== currentElement }) .each(function(d, i) { eventHandlers.deemphasize(this, d) }) // Fill the mouse over element with it's original color eventHandlers.emphasize(currentElement, d); eventHandlers.displayText(statistics[d.key]); if (!currentElement._tippy) { // console.log(currentElement) tippy(this, defaultTippyConfig); } else { currentElement._tippy.set({ followCursor: true, hideOnClick: false }) } }) .on("mouseout", function (d) { let hoverElement = document.querySelectorAll(':hover'); // hoverElement[2].className === "tippy-popper" if (document.getElementsByClassName('tippy-popper').length > 0) { // mouse out into a tippy // don't change anything console.log(`Hover on tippy: ${hoverElement[2].className}`) } else { // Fill all elements with original color d3.selectAll(".subCategory").each(function(d, i) { eventHandlers.restore(this, d) }) let hoverElement = document.querySelectorAll(':hover'); this._tippy.destroy() } }) .on("click", function (d) { console.log("click event fired"); let tippyInstance = this._tippy if (tippyInstance) { if (tippyInstance.props.followCursor === true) { tippyInstance.set({ followCursor: 'initial', hideOnClick: true }) } else if (tippyInstance.props.followCursor === 'initial') { // tippyInstance.destroy() // tippy(this,defaultTippyConfig); } } else { tippy(this,defaultTippyConfig); } }) // Search, consume, produce information let mainCategoriesStack = svg.append("g") .selectAll('.area') .data(mainCategoriesStackedData) .enter().append('path') .attr('class', 'project overlay categories mainCategory area noSelect clickable') .attr('fill', d => colors[d.key][0]) .attr('data-tippy-content', d => tooltips[d.key]) .attr('d', stackedAreaGenerator(false)) .on("mouseenter", function(d) { // Assign this to currentElement so that we can use it later for filtering let currentElement = this; // Fill the other elements with washed out color d3.selectAll(".mainCategory") .filter(function() { return this !== currentElement }) .each(function(d, i) { eventHandlers.deemphasize(this, d) }) // Fill the mouse over element with it's original color eventHandlers.emphasize(currentElement, d); eventHandlers.displayText(statistics[d.key]); }) .on("mouseout", function (d) { // Fill all elements with original color d3.selectAll(".mainCategory").each(function(d, i) { eventHandlers.restore(this, d) }) }) .on("click", function(d) { eventHandlers.hideOnClick(this) }); // Working on the app let workingOnTheApp = svg.append("path") .datum(myData) .attr("id", "workingOnTheApp") .attr("class", "project overlay area noSelect clickable") .attr("fill", d => colors["Working on the App"][0]) .attr('data-tippy-content', d => tooltips["Working on the App"]) .attr("d", workingOnTheAppAreaGenerator(false)) .on("mouseenter", function(d) { eventHandlers.highlight(this, "Working on the App"); eventHandlers.displayText("50h (44% of awake time)"); }) .on("mouseout", function (d) { eventHandlers.dehighlight(this, "Working on the App"); eventHandlers.displayText("..."); }) .on("click", function(d) { eventHandlers.hideOnClick(this) }); let tippyConfig = { arrow: false, flip: false, followCursor: true, placement: 'right', offset: "60, 10", animation: 'fade', duration: [100, 100], hideOnClick: false }; tippy(asleep.node(), tippyConfig); tippy(awake.node(), tippyConfig); tippy(workingOnTheApp.node(), tippyConfig); return svg.node(); }47:T502,// Various event handers used for mouse events and displaying eventHandlers = ({ hideOnClick: function(clickedElement) { d3.select(clickedElement).transition("makeElementTransparent").duration(300).attr("opacity", 0); d3.select(clickedElement).transition("hideElement").delay(300).attr("visibility", "hidden"); }, highlight: function(element, elementName) { d3.select(element).transition("highlight").duration(100).attr("fill", colors[elementName][2]); }, dehighlight: function(element, elementName) { d3.select(element).transition("dehighlight").duration(100).attr("fill", colors[elementName][0]); }, emphasize: function(element, data) { d3.select(element).transition("emphasize").duration(100).attr("fill", colors[data.key][1]); }, deemphasize: function(element, data) { d3.select(element).transition("deemphasize").duration(100).attr("fill", colors[data.key][2]); }, restore: function(element, data) { d3.select(element).transition("restore").duration(100).attr("fill", colors[data.key][0]); }, setStrokeOpacity: function(element, val) { d3.select(element).attr("stroke-opacity", 1.0); }, displayText: function(text, force) { $("#narrative").fadeOut(function() { $(this).text(text).fadeIn(); }); } })48:T842,reality = { // This section updates when the reality toggle button is hit realityToggleButton console.log("haha!!") // Check the current value of reality if (typeof this === 'undefined') { // It's undefined at page load, so if it's undefined, initilize as false // because we're starting with the planned schedule // Display the beginning of the story eventHandlers.displayText("up at 7:00 and in bed at 10:30 🙂"); return false; } else { if (this === false) { // Switching to reality eventHandlers.displayText("lol just kidding 😂 "); setTimeout(function(){ eventHandlers.displayText("Hover over graph to explore 🕵️‍♂️"); }, 3000); // Make all the overlay areas (that might be hidden) immediately visible d3.select("#transparentOverlay") .attr("visibility", "hidden"); d3.select("#workingOnTheApp") .attr("opacity", 1) .attr("visibility", "visible"); d3.selectAll(".mainCategory") .attr("opacity", 1) .attr("visibility", "visible"); // Toggle button name d3.select('#realityToggleButton') .text("← Show Ideal Schedule"); // Config tippy tippy(d3.selectAll(".mainCategory").nodes(),defaultTippyConfig); tippy(d3.selectAll(".subCategory").nodes(),defaultTippyConfig); } else{ // Switching to plan eventHandlers.displayText("up at 7:00 and in bed at 10:30 🙂"); // Toggle button name d3.select('#realityToggleButton') .text(" Show Reality →"); d3.select("#transparentOverlay") .attr("visibility", "visible"); } d3.select("#awake") .transition("expandAwake").duration(1500) .attr("d", timeAwakeAreaGenerator(!this)); d3.select("#workingOnTheApp") .transition("expandWorkingOnTheApp").duration(1500) .attr("d", workingOnTheAppAreaGenerator(!this)); d3.selectAll(".categories") .transition("expandCategories").duration(1500) .attr("d", stackedAreaGenerator(!this)); return !this; } }49:T654,modifyChart = { // This is to tell the notebook that this chunk depends on chart // so that every time chart update, this block should update too chart graphGridlines // These are the things we want to modify let dayAxis = d3.select("#xAxis"); let hourAxis = d3.select("#yAxis") let dayAxisTicks = dayAxis.selectAll(".tick"); let hourAxisTicks = hourAxis.selectAll(".tick"); // Hide both axes dayAxis.select(".domain") .attr("stroke", "hsla(0,0%,0%,0.0)"); hourAxis.select(".domain") .attr("stroke", "hsla(0,0%,0%,0.0)"); // Change color of all day axis ticks dayAxisTicks .selectAll("line") .attr("stroke", graphGridlines === "Yes"? "hsla(212, 8%, 52%, 0.5)" : "hsla(212, 8%, 52%, 0)"); // Set the tick mark at 2/13 to be clear dayAxisTicks .filter(function(){ return ["2/7 Thu","2/13 Wed"].includes(d3.select(this).select("text").text()) }) .select("line") .attr("stroke", "hsla(0,0%,0%,0.0)"); // For all axis labels: set color, font size, and transform to lowercase dayAxisTicks .selectAll("text") .attr("fill","hsl(0, 0%, 40%)") .style("font-size","1.2rem") // .style("text-transform","lowercase"); hourAxisTicks .selectAll("text") .attr("fill","hsl(0, 0%, 50%)") .style("font-size","1rem") .style("text-transform","lowercase"); // Hide the blue selection border for everythin in class .noSelect d3.selectAll(".noSelect") .style("outline","none"); // Change cursor to pointer for everything in the class .clickable d3.selectAll(".clickable") .style("cursor","pointer"); }4a:Te66,// Information to be displayed inside the Tippy tooltips upon hover tooltips = ({ "Google": '

Google', "YouTube": '

YouTube', "Stack Overflow": '

Stack Overflow', "Apple Developer Doc": '

Apple Developer Doc', "Other Websites": '

Other Websites', "Write Code": '

Write Code', "Create Graphics": '

Create Graphics', "Make Video": '

Make Video', "Update Portfolio": '

Update Portfolio', "Search for Information": '

🔍

Search for Information', "Consume Information": '

🍽

Consume Information', "Produce Information": '

✍🏻

Produce Information', "Working on the App": '

👨🏻‍💻

Working on app', "Awake": '

🤹‍♂️

Not working on app', "Asleep": '

😴

Sleeping' })4b:[] 43:{"id":"f1b554aeba42fe97","slug":"visualization-of-my-week","title":"Visualization of My Week","thumbnail":"b6dcf1881e1d4a159d51771c52177758b4c7ca1e1ceb0a01dc49a17f4d73b697","access_level":"public","create_time":"$D2019-02-17T14:26:55.191Z","update_time":"$D2019-04-30T01:38:09.596Z","view_time":null,"first_public_time":"$D2019-02-18T20:31:55.898Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"881fc2b256e7c071","login":"jianan-li","name":"Jianan Li","avatar_url":"https://avatars-next.observableusercontent.com/e8c06c2a9a3d18db6de7b5fa2fc3d67e8ef110984cbb142ff5b422915f3be3f7","tier":"starter_2024","bio":"Insights through data"},"version":2510,"publish_version":2510,"role":null,"authored":false,"authors":[{"type":"individual","id":"62f1170da871cbae","login":"jianan-li","name":"Jianan Li","avatar_url":"https://avatars-next.observableusercontent.com/e8c06c2a9a3d18db6de7b5fa2fc3d67e8ef110984cbb142ff5b422915f3be3f7","tier":null,"bio":"Insights through data"}],"members":[{"type":"individual","id":"62f1170da871cbae","login":"jianan-li","name":"Jianan Li","avatar_url":"https://avatars-next.observableusercontent.com/e8c06c2a9a3d18db6de7b5fa2fc3d67e8ef110984cbb142ff5b422915f3be3f7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visualization of My Week","cells":[{"id":0,"value":"md`# Visualization of My Week`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2391,"value":"md `###

Ok, first some context.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"html`
\n

\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2428,"value":"md `###
Now the visualization ↓`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1870,"value":"html `

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1044,"value":"viewof story = html`\n

...

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2064,"value":"viewof realityToggleButton = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1891,"value":"html `

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2439,"value":"md`### Some more clickable things`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1775,"value":"viewof graphGridlines = radio({\n title: 'Show gridlines?',\n description: '',\n options: [\n { label: 'Show', value: \"Yes\" },\n { label: 'Hide', value: \"No\" },\n ],\n value: \"Yes\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"viewof graphStyle = radio({\n title: 'Style?',\n description: '',\n options: [\n { label: 'Curve', value: 'curveMonotoneX' },\n { label: 'Line', value: 'curveLinear' },\n ],\n value: 'curveMonotoneX'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1384,"value":"viewof unhideOverlaysButton = button({value: \"Unhide Overlays\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"DOM.download(() => serialize(chart), null, \"Save as SVG\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2458,"value":"md `

Here are a few things not included in this visualization:\n1. Notion. While Timing tells me the total time I spent in Notion, there is no data on how much time I spent in Notion for this project vs. other things. To avoid inflating the statistics, I decided to leave it out.\n2. Time spend testing the app while away from computer. I did not record this data. iOS Screen Time only tells me the total hours spent in app, which is dominated by the time spent in the app while I was coding.\n3. Domains that I visited for a total of less than 60 seconds during the entire week.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2445,"value":"md `#

Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2355,"value":"md `###
Tippy Tooltip Configuration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2264,"value":"// Declaring it here so that it can be used in multiple cells\ndefaultTippyConfig = ({\n arrow: false,\n flip: true,\n followCursor: true,\n placement: 'right',\n offset: \"60, 10\",\n animation: 'fade',\n duration: [100, 100],\n hideOnClick: false,\n interactive: true\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1837,"value":"md `### Chart Event Handlers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1860,"value":"md `### React to Ideal Schedule vs Reality Toggle`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1224,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1894,"value":"md `### React to Unhide Overlays Button Click`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1404,"value":"unhideButtonClicked = {\n // This section updates when the unhide button is hit\n unhideOverlaysButton\n \n // First make overlay areas visible\n d3.selectAll(\".overlay\")\n .attr(\"visibility\", \"visible\");\n \n // Then opacity transition from 0 to 1\n d3.selectAll(\".overlay\")\n .transition(\"makeElementOpaque\")\n .duration(300)\n .attr(\"opacity\", 1.0);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1854,"value":"md `### Modify and Style Chart (react to chart redraw and option change)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1516,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"// Graph technically starts at 3 AM, but using 2:40 here to shrink the axis labels vertically so that they are vertically contained within the top and bottom boundary of the graph\nstartOfDay = new Date('2/7/19 2:40:00 AM')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"// Same as above\nendOfDay = startOfDay.addDays(1).addMinutes(40)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1489,"value":"xAxisTicks = [new Date('2/7/19'), new Date('2/8/19'), new Date('2/9/19'), new Date('2/10/19'), new Date('2/11/19'), new Date('2/12/19'), new Date('2/13/19')]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"yAxisTicks = startOfDay.generateTicks(9, 3, 20)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"myDataCSV = `Index,Date,Wake up Time,Go to Sleep Time,Google,YouTube,Stack Overflow,Apple Developer Doc,Other Websites,Write Code,Create Graphics,Make Video,Update Portfolio,Search for Information,Consume Information,Produce Information,Working on the App\n0,2/7/19,2/7/19 7:34:00 AM,2/7/19 10:28:00 PM,139,5193,420,848,0,3840,0,0,0,139,6461,3840,10440\n1,2/8/19,2/8/19 7:05:00 AM,2/9/19 2:45:00 AM,1074,3360,3720,2182,2354,35280,1809,0,0,1074,11616,37089,49779\n2,2/9/19,2/9/19 8:43:00 AM,2/9/19 11:41:00 PM,290,138,1860,1832,325,19320,1119,0,0,290,4155,20439,24884\n3,2/10/19,2/10/19 8:04:00 AM,2/11/19 1:15:00 AM,1034,338,4980,648,530,27420,3723,0,0,1034,6496,31143,38673\n4,2/11/19,2/11/19 8:08:00 AM,2/12/19 12:21:00 AM,368,109,900,591,342,23820,4879,0,0,368,1942,28699,31009\n5,2/12/19,2/12/19 8:06:00 AM,2/12/19 10:53:00 PM,16,0,720,428,0,360,116,0,0,16,1148,476,1640\n6,2/13/19,2/13/19 7:08:00 AM,2/13/19 10:34:00 PM,1094,0,300,60,569,2160,4555,4186,11863,1094,929,22764,24787`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"// Convert csv data into an array of objects, where each object represents a single day (a row in the csv)\nmyData = d3.csvParse(myDataCSV, row => ({\n \"Index\": +row[\"Index\"], \n \"Date\": new Date(row[\"Date\"]), \n \"Wake up Time\": new Date(row[\"Wake up Time\"]),\n \"Go to Sleep Time\": new Date(row[\"Go to Sleep Time\"]),\n \"Baseline\": new Date(row[\"Baseline\"]),\n \"Google\": +row[\"Google\"], \n \"YouTube\": +row[\"YouTube\"], \n \"Stack Overflow\": +row[\"Stack Overflow\"], \n \"Apple Developer Doc\": +row[\"Apple Developer Doc\"], \n \"Other Websites\": +row[\"Other Websites\"], \n \"Write Code\": +row[\"Write Code\"], \n \"Create Graphics\": +row[\"Create Graphics\"], \n \"Make Video\": +row[\"Make Video\"], \n \"Update Portfolio\": +row[\"Update Portfolio\"],\n \"Search for Information\": +row[\"Search for Information\"], \n \"Consume Information\": +row[\"Consume Information\"], \n \"Produce Information\": +row[\"Produce Information\"],\n \"Working on the App\": +row[\"Working on the App\"]\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"// Verify all the columns in my data\nmyData.columns","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"// An arbitrary array of offsets for the streamgraph that makes visual sense\nappAreaOffsets = [281, 192, 230, 192, 211, 246, 258]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"// Colors for all the area paths: [original, emphasize, deemphasize]\n// emphasize: some bright colors are darkened (to increase contrast) while the rest are the same as the original\n// deemphasize: lightened versions of the original colors \ncolors = ({ \n \"Google\": [\"#DA4251\", \"#DA4251\", \"#FFD6DC\"],\n \"YouTube\": [\"#ED6F48\", \"#ED6F48\", \"#FFE4DB\"],\n \"Stack Overflow\": [\"#F7A65B\", \"#F7A65B\", \"#FFEEDE\"],\n \"Apple Developer Doc\": [\"#FAD785\",\"#FAD785\",\"#FFF8E6\"],\n \"Other Websites\": [\"#F6F3A7\", \"#E8E18B\", \"#FEFDEE\"], \n \"Write Code\": [\"#D6EA92\", \"#BDD289\", \"#F8FCEA\"],\n \"Create Graphics\": [\"#A2D69A\",\"#A2D69A\",\"#ECF9EB\"],\n \"Make Video\": [\"#64B8A4\",\"#64B8A4\",\"#DFF5F0\"],\n \"Update Portfolio\": [\"#4288B5\",\"#4288B5\",\"#D9EFFF\"],\n \"Search for Information\": [\"#666666\", \"#666666\", \"#bbbbbb\"],\n \"Consume Information\": [\"#888888\", \"#777777\", \"#cccccc\"],\n \"Produce Information\": [\"#aaaaaa\", \"#888888\", \"#dddddd\"],\n \"Working on the App\": [\"#555555\", \"#555555\", \"#888888\"]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1388,"value":"// Statistics to be interactively displayed below the graph\nstatistics = ({\n \"Google\": \"1h (2%)\",\n \"YouTube\": \"2.5h (5%)\",\n \"Stack Overflow\": \"3.5h (7%)\",\n \"Apple Developer Doc\": \"2h (4%)\",\n \"Other Websites\": \"1h (2%)\",\n \"Write Code\": \"31h (62%)\",\n \"Create Graphics\": \"4.5h (9%)\",\n \"Make Video\": \"1h (2%)\",\n \"Update Portfolio\": \"3.5h (7%)\",\n \"Search for Information\": \"1h (2%)\",\n \"Consume Information\": \"9h (18%)\",\n \"Produce Information\": \"40h (80%)\",\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1999,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"md`## Graph Config`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"md`### Dimension`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"height = width * 0.55","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"margin = ({\n top: 50,\n bottom: 0,\n left: 80,\n right: 80\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"graphWidth = width - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"graphHeight = height - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"md`### Scale and Axis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"x = d3.scaleTime()\n .domain([new Date('2/7/19'), new Date('2/13/19')])\n .range([margin.left, graphWidth+margin.left]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"y = d3.scaleLinear()\n .domain([startOfDay, endOfDay])\n .range([margin.top, graphHeight+margin.top]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"// .tickSize(-graphHeight) is used to produce gridlines\nxAxis = d3.axisTop(x).tickSize(-graphHeight).tickPadding(20).tickValues(xAxisTicks).tickFormat(d3.timeFormat(\"%-m/%-d %a\"));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"// .tickSize(0) is used to completely hide the ticks\nyAxis = d3.axisLeft(y).tickSize(0).tickPadding(10).tickValues(yAxisTicks).tickFormat(d3.timeFormat(\"%-I %p\"));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"md`## Area Chart Generators`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2377,"value":"md `The chart generator produced by d3.area() is what translate the raw data value into an area on the graph`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"md`1 - Awake`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"timeAwakeAreaGenerator = function(reality) {\n return d3.area()\n .curve(graphStyle == 'curveMonotoneX'? d3.curveMonotoneX : d3.curveLinear)\n .x(d => x(d.Date))\n .y0(d => reality ? y(d[\"Wake up Time\"].subtractDays(d.Index)) : y(new Date(\"2/7/19 7:00:00 AM\")) )\n .y1(d => reality ? y(d[\"Go to Sleep Time\"].subtractDays(d.Index)) : y(new Date(\"2/7/19 10:30:00 PM\")));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"md`2 - Working on the app`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"workingOnTheAppAreaGenerator = function(reality) {\n return d3.area()\n .curve(graphStyle == 'curveMonotoneX'? d3.curveMonotoneX : d3.curveLinear)\n .x(d => x(d.Date))\n .y0(d => reality ?\n y(d[\"Wake up Time\"]\n .subtractDays(d.Index).addMinutes(appAreaOffsets[d.Index]))\n : y(new Date(\"2/7/19 12:00:00 PM\")))\n .y1(d => reality ?\n y(d[\"Wake up Time\"]\n .subtractDays(d.Index).addMinutes(appAreaOffsets[d.Index]).addSeconds(d[\"Working on the App\"])) \n : y(new Date(\"2/7/19 12:00:00 PM\")));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"md`3 - Stacked Categories`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"stackedAreaGenerator = function(reality) {\n return d3.area()\n .curve(graphStyle == 'curveMonotoneX'? d3.curveMonotoneX : d3.curveLinear)\n .x(d => x(d.data.Date))\n .y0(d => reality ?\n y(d.data[\"Wake up Time\"]\n .subtractDays(d.data.Index).addMinutes(appAreaOffsets[d.data.Index]).addSeconds(d[0]))\n : y(new Date(\"2/7/19 12:00:00 PM\")))\n .y1(d => reality ?\n y(d.data[\"Wake up Time\"]\n .subtractDays(d.data.Index).addMinutes(appAreaOffsets[d.data.Index]).addSeconds(d[1]))\n : y(new Date(\"2/7/19 12:00:00 PM\")));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1843,"value":"md `3.1 - Main Categories`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"mainCategoriesStackedData = {\n const keys = myData.columns.slice(-4, -1);\n const stack = d3.stack()\n \t.keys(keys)\n \t.order(d3.stackOrderAescending);\n return stack(myData);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"md `3.2 - Sub Categories`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"subCategoriesStackedData = {\n const keys = myData.columns.slice(4, -4);\n const stack = d3.stack()\n \t.keys(keys)\n \t.order(d3.stackOrderAescending);\n return stack(myData);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"md`## Helper Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"Date.prototype.generateTicks = function(numberOfTicks, gapInHours, offsetMinutes) {\n let startTick = new Date(this.valueOf());\n startTick = startTick.addMinutes(offsetMinutes)\n let ticks = []\n for (let i = 0; i < numberOfTicks; i++) {\n let nextTick = startTick.addHours(i*gapInHours)\n ticks.push(nextTick)\n }\n return ticks;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"Date.prototype.subtractDays = function(days) {\n var date = new Date(this.valueOf());\n date.setDate(date.getDate() - days);\n return date;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"Date.prototype.addDays = function(days) {\n var date = new Date(this.valueOf());\n date.setDate(date.getDate() + days);\n return date;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"Date.prototype.addHours = function(hours) {\n var date = new Date(this.valueOf());\n date.setHours(date.getHours() + hours);\n return date;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"Date.prototype.addMinutes= function(minutes) {\n var date = new Date(this.valueOf());\n date.setMinutes(date.getMinutes() + minutes);\n return date;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"Date.prototype.addSeconds= function(seconds) {\n var date = new Date(this.valueOf());\n date.setSeconds(date.getSeconds() + seconds);\n return date;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"md`## Page Styling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"md`Set notebook font to Apple system font (i.e. San Francisco)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"// Use jQuery to select all element on the page and set font family\n$( \"*\" ).css( \"font-family\", \"-apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif\" )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2178,"value":"md `Center the reality toggle button by wrapping it in a flex container`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2128,"value":"$$(\"#realityToggleButton\").wrap('

');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1982,"value":"md `CSS Styling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1980,"value":"html `\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"md`## Import D3 and other libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"import {serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"import {slider, radio, button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"// Import jQuery for both selection and easy text fade in and fade out transitions\n$ = require(\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"// A tooltip library written in vanilla JS\ntippy = require(\"https://unpkg.com/tippy.js@4.0.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"// Tippy depends on popper\npopper = require(\"https://unpkg.com/popper.js@1/dist/umd/popper.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"// Import D3\nd3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 44:"$43:body"