31:T448,Plot.plot({ width: width, // marginLeft: 100, insetLeft: 10, marginBottom: 100, marginRight: 100, x: { // tickRotate: -45, label: null, // range: ['11/01/2022', '11/30/2022'] // tickFormat: d3.utcFormat("%A %B %d"), }, color : { // domain: ['german', 'japanese'] range: [germanColor, japaneseColor] }, y: { padding: 10 // range: [400, 0] }, style: { // color: graphTextCol, fontSize: 12, fontFamily: graphFontFamily, // fontWeight: graphFontWeight }, marks: [ // Plot.ruleY([0]), Plot.areaY(dailyTotals, {x: d => ((parseTime(d.date))), fill: 'language', y:d => d.total ? convertH2M(d.total) : 0, order: 'language', opacity: 0.8, curve: 'basis', stroke: 'white'}), // vertical rule to mark date/time of event Plot.ruleX([realizationEvent.datetime], { stroke: "gray", y1: 170, y2: maxDailys }), // text to mark date/time of event Plot.text([realizationEvent], { text: "description", x: "descDatetime", y: maxDailys * 1.05, textAnchor: "start", }) ] })32:[{"id":"5d4a8eeb856f011354859a2d9355c5a97e3425ee35d2d0bc0966487d2f42a658895a096a37188001ef705393b5a3fef4551638c4c5a33c8beec5a971b2658e97","href":"https://static.observableusercontent.com/files/5d4a8eeb856f011354859a2d9355c5a97e3425ee35d2d0bc0966487d2f42a658895a096a37188001ef705393b5a3fef4551638c4c5a33c8beec5a971b2658e97","name":"decGerman.csv","type":"text/csv","lastModified":1673134998717.923,"size":3542},{"id":"c5f93b2dd2ebc0593b0561177c7ff45fcc551f86bb8198a8caf913a8d45657b02879d6c657987134d9dfd00ad7ea0a7e38e447b925678ed2d9be2c4ce0e73784","href":"https://static.observableusercontent.com/files/c5f93b2dd2ebc0593b0561177c7ff45fcc551f86bb8198a8caf913a8d45657b02879d6c657987134d9dfd00ad7ea0a7e38e447b925678ed2d9be2c4ce0e73784","name":"novGerman@1.csv","type":"text/csv","lastModified":1673134998717.923,"size":2397},{"id":"dcd04c8cd5821f0f91030ad6ef6ae4a4812ee6f26448fb54c87b525726c00c9824c7dbc57adf99db64ac4bb695f83d57475bc002cfc7ed41e82504f0ba51625f","href":"https://static.observableusercontent.com/files/dcd04c8cd5821f0f91030ad6ef6ae4a4812ee6f26448fb54c87b525726c00c9824c7dbc57adf99db64ac4bb695f83d57475bc002cfc7ed41e82504f0ba51625f","name":"novJap@4.csv","type":"text/csv","lastModified":1673134998717.923,"size":2174},{"id":"a57c5ebfcc8689f96e0635a457c1c9e557026e709314807c0f29b614e9ca93591fcd7ffc3d24c7337e57d3cdac82023bf4a8e45ca6f103ef845505a621491cc2","href":"https://static.observableusercontent.com/files/a57c5ebfcc8689f96e0635a457c1c9e557026e709314807c0f29b614e9ca93591fcd7ffc3d24c7337e57d3cdac82023bf4a8e45ca6f103ef845505a621491cc2","name":"Dec - Japanese.csv","type":"text/csv","lastModified":1673880596521.031,"size":3170}] 2f:{"title":"📊 Japanese and German activity breakdown","cells":[{"id":0,"value":"# 📊 Japanese and German activity breakdown","pinned":false,"hidden":false,"mode":"md"},{"id":1279,"value":"This page focuses on my activity overview 📊, aiming to answer the following questions: \n- What are my BANs?\n- What did I do most of in Japanese vs German?\n- How did the activities stack up in these respective languages?","pinned":false,"hidden":false,"mode":"md"},{"id":1097,"value":"## Totals and Averages\n### _hours:minutes_","pinned":false,"hidden":false,"mode":"md"},{"id":683,"value":"example = { \n let badges = [];\n badges.push({stat: totals[0], description: \"Total\", backColor: badgeBackground, start:1, end: 3});\nbadges.push({stat: totals[1], description: \"Daily Average\", backColor: badgeBackground, start: 3, end: 5});\n badges.push({stat: totals[2], description: \"Japanese Total\", backColor: badgeBackgroundMinor,});\n badges.push({stat: totals[3], description: \"German Total\", backColor: badgeBackgroundMinor,});\n badges.push({stat: totals[4], description: \"Japanese Daily Average\", backColor: badgeBackgroundMinor,});\n badges.push({stat: totals[5], description: \"German Daily Average\", backColor: badgeBackgroundMinor,});\n return dashboard({columns: 4, badges});\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1117,"value":"## Japanese and German over time","pinned":false,"hidden":false,"mode":"md"},{"id":563,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1263,"value":"The proportional change is even clearer with a 100% stacked area chart.","pinned":false,"hidden":false,"mode":"md"},{"id":1225,"value":"{\n const xy = {x: d => ((parseTime(d.date))), y: d => d.total ? convertH2M(d.total) : 0, z: \"language\",offset: \"expand\", reverse: true};\n return Plot.plot({\n width: width,\n // marginLeft: 100,\n insetLeft: 10,\n marginBottom: 100,\n marginRight: 100,\n color : {\n // domain: ['german', 'japanese']\n range: [germanColor, japaneseColor]\n},\n y: {\n // grid: true,\n label: \"Daily %\",\n percent: true\n },\n marks: [\n Plot.areaY(dailyTotals, Plot.stackY({...xy, fill: \"language\", opacity: 0.8, curve: 'basis'})),\n Plot.lineY(dailyTotals, Plot.stackY2({...xy, stroke: \"white\", strokeWidth: 1, curve: 'basis'})),\n \n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"## Japanese Daily Logs\n### November\n日本語
\nWhile I have done a lot of Japanese output already (traveling to Japan, staying with 'host families' and especially due to starting it in a classroom setting), I determined that I really needed to focus on input. While my comprehension is high, my speaking wasn't very natural. By listening and reading I was able to be exposed to the language more and absorb repeated and natural expressions. Consequently, I noticed a great improvement in my outputing come December. ","pinned":false,"hidden":false,"mode":"md"},{"id":374,"value":"Plot.plot({\n...activityStyles,\n\n color: {\n //scheme: 'Magma',\n type: 'linear',\n range: ['white', japaneseColor],\n domain: [0, 120],\n legend: true\n },\n // x: {\n // tickFormat: d => `'${d.toString().slice(2, 4)}`\n // },\n y: {\n domain: ['listening', 'reading','flashcards', 'writing', 'conversation', 'monologue', 'shadowing', 'chorusing'],\n label: null\n },\n marks: [\n Plot.cell(jNovByActivity, {\n x: d => (formatTime(parseTime(d.date))),\n y: \"activity\",\n fill: 'time',\n rx: 4,\n stroke: '#000',\n strokeWidth: 2.5,\n strokeOpacity: 0.9\n }),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":805,"value":"### December","pinned":false,"hidden":false,"mode":"md"},{"id":807,"value":"Plot.plot({\n...activityStyles,\n color: {\n //scheme: 'Magma',\n type: 'linear',\n range: ['white', japaneseColor],\n domain: [0, 120],\n legend: true\n },\n // x: {\n // tickFormat: d => `'${d.toString().slice(2, 4)}`\n // },\n y: {\n domain: ['listening', 'reading','flashcards', 'writing', 'conversation', 'monologue', 'shadowing', 'chorusing'],\n label: null\n },\n marks: [\n Plot.cell(jDecByActivity, {\n x: d => (formatTime(parseTime(d.date))),\n y: \"activity\",\n fill: 'time',\n rx: 4,\n stroke: '#000',\n strokeWidth: 2.5,\n strokeOpacity: 0.9\n }),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":816,"value":"## German Daily Logs\n### November\nDeutsch
\nI used November to refresh and concentrate on input, and as December came I was more than ready to level up and focus on output.","pinned":false,"hidden":false,"mode":"md"},{"id":660,"value":"Plot.plot({\n...activityStyles,\n\n color: {\n //scheme: 'Magma',\n type: 'linear',\n range: ['white', germanColor],\n domain: [0, 120],\n legend: true\n },\n // x: {\n // tickFormat: d => `'${d.toString().slice(2, 4)}`\n // },\n y: {\n domain: ['listening', 'reading','flashcards', 'writing', 'conversation', 'monologue', 'shadowing', 'chorusing'],\n label: null\n },\n \n marks: [\n Plot.cell(gNovByActivity, {\n x: d => (formatTime(parseTime(d.date))),\n y: \"activity\",\n fill: 'time',\n rx: 4,\n stroke: '#000',\n strokeWidth: 2.5,\n strokeOpacity: 0.9\n }),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"### December","pinned":false,"hidden":false,"mode":"md"},{"id":821,"value":"Plot.plot({\n...activityStyles,\n color: {\n //scheme: 'Magma',\n type: 'linear',\n range: ['white', germanColor],\n domain: [0, 120],\n legend: true\n },\n // x: {\n // tickFormat: d => `'${d.toString().slice(2, 4)}`\n // },\n y: {\n domain: ['listening', 'reading','flashcards', 'writing', 'conversation', 'monologue', 'shadowing', 'chorusing'],\n label:null\n },\n marks: [\n Plot.cell(gDecByActivity, {\n x: d => (formatTime(parseTime(d.date))),\n y: \"activity\",\n fill: 'time',\n rx: 4,\n stroke: '#000',\n strokeWidth: 2.5,\n strokeOpacity: 0.9\n }),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1270,"value":"## Total Activity Time in Japanese and German","pinned":false,"hidden":false,"mode":"md"},{"id":354,"value":"{\n const xy = Plot.normalizeX({basis: \"sum\", z: \"activity\", x: \"time\", y: \"activity\"});\n return Plot.plot({\n height: 300,\n insetBottom: 10,\n...activityStyles,\n\n x: {\n inset: 1,\n domain: [0, d3.max(activityTotals, d=> d.time+200)],\n label: 'minutes →',\n tickFormat: d => d3.format(\".2d\")(d)\n },\n y: {\n domain: activityTotals.map(d => d.activity),\n tickSize: 0,\n grid: 'true',\n label: null\n },\n marks: [\n Plot.link(activityTotals, Plot.groupY({x1: \"min\", x2: \"max\"}, {x: \"time\", y: \"activity\"})),\n // Plot.link(activityTotals, {x1:\n\n // Plot.dot(activityTotals.filter(d => d.language === \"Japanese\"), { y: 'activity', x: 'time', stroke: '#000', strokeWidth: 4, fill: \"language\", title: \"language\", r:8, stroke: '#000', strokeWidth: 2}),\n // Plot.groupY({...xy, stroke: '#000', strokeWidth: 4, fill: 'language' }),\n Plot.dot(activityTotals, Plot.groupY({x: 'sum'}, { y: 'activity', x: 'time', fill: 'language', r:8, stroke: '#000', strokeWidth: 1, }) )\n ]\n})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1015,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1108,"value":"\n","pinned":false,"hidden":false,"mode":"html"},{"id":1137,"value":"---\n# Data","pinned":false,"hidden":false,"mode":"md"},{"id":1360,"value":"activityStyles = ({ width: 1100,\n marginLeft: 110,\n marginBottom: 60,\n padding: 0.2,\n style: {\n // color: graphTextCol,\n fontSize: graphFontSize,\n fontFamily: graphFontFamily,\n // fontWeight: graphFontWeight\n },\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"jDecByActivity = {\n let data = tidy(decJap.slice(0,31),\n pivotLonger({\n cols: ['listening', 'reading','flashcards', 'writing', 'conversation', 'monologue', 'shadowing', 'chorusing'],\n namesTo: 'activity',\n valuesTo: 'time',\n })\n)\n // return data\n return data.map( d=> ({\n activity: d.activity,\n date:d.date,\n language: 'Japanese',\n input: convertH2M(d.input),\n output: convertH2M(d.output),\n jTotal: convertH2M(d.total),\n time: d.time ? convertH2M(d.time) : 0\n }))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"jNovByActivity = {\n let data = tidy(novJap.slice(0,30),\n pivotLonger({\n cols: ['listening', 'reading','flashcards', 'writing', 'conversation', 'monologue', 'shadowing', 'chorusing'],\n namesTo: 'activity',\n valuesTo: 'time',\n })\n)\n // return data\n return data.map( d=> ({\n activity: d.activity,\n date:d.date,\n language: 'Japanese',\n input: convertH2M(d.input),\n output: d.output ? convertH2M(d.output) : 0,\n jTotal: convertH2M(d.total),\n time: d.time ? convertH2M(d.time) : 0\n }))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"gDecByActivity = {\n \n let data = tidy(\n decGerm.slice(0,31),\n pivotLonger({\n cols: ['listening', 'reading','flashcards', 'writing', 'conversation', 'monologue', 'shadowing', 'chorusing'],\n namesTo: 'activity',\n valuesTo: 'time',\n }))\n\n return data.map( d=> ({\n activity: d.activity,\n date:d.date,\n input: convertH2M(d.input),\n output: convertH2M(d.output),\n gTotal: convertH2M(d.german_total),\n language: 'German',\n total: convertH2M(d.total),\n time: d.time ? convertH2M(d.time) : 0\n }))\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":789,"value":"gNovByActivity = {\n \n let data = tidy(\n novGerm.slice(0,30),\n pivotLonger({\n cols: ['listening', 'reading','flashcards', 'writing', 'conversation', 'monologue', 'shadowing', 'chorusing'],\n namesTo: 'activity',\n valuesTo: 'time',\n }))\n\n return data.map( d=> ({\n activity: d.activity,\n date:d.date,\n input: convertH2M(d.input),\n output: convertH2M(d.output),\n gTotal: convertH2M(d.german),\n language: 'German',\n total: convertH2M(d.total),\n time: d.time ? convertH2M(d.time) : 0\n }))\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":797,"value":"allByActivity = [...jDecByActivity, ...jNovByActivity, ...gDecByActivity, ...gNovByActivity]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1153,"value":"germ = allByActivity.filter(d => d.activity === 'reading' && d.language == \"German\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"formatTime = d3.timeFormat(\"%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"parseTime = d3.timeParse('%m/%d/%Y')","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"function convertH2M(timeInHour){\n if(timeInHour) {\n const timeParts = timeInHour.split(\":\");\n return Number(timeParts[0]) * 60 + Number(timeParts[1]);\n }\n else 0\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"formatTimeLong = d3.timeFormat('%d. %b')","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"novGerm = await FileAttachment(\"novGerman@1.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"novJap = await FileAttachment(\"novJap@4.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"decGerm = await FileAttachment(\"decGerman.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"decJap = await FileAttachment(\"Dec - Japanese.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"url = \"https://docs.google.com/spreadsheets/d/1pDWsayqaA9q-W4Am_oq61xka75CsQVOaX_LTa-PQ22g/edit#gid=691342637\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"data = d3.csv(getCsvUrl(url), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"pctJ = tidy(\n jDecByActivity,\n\n // 1. compute the total for each month and store as a property on each point\n groupBy('date', mutateWithSummary({ totalTime: sum('time') })),\n\n // 2. compute the percent of total. use rate() to safely\n // handle division by zero and nully values.\n mutate({ percent: rate('time', 'totalTime') })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"activityTotals = {\n \n let data = tidy(\n allByActivity,\n groupBy(['activity', 'language'], [\n summarize({ time: sum('time') })\n ])\n)\n console.log(data)\nreturn data.map(d => ({\n activity: d.activity === \"reading-ex\" || d.activity === 'reading-in' ? 'reading': d.activity,\n language: d.language,\n time: d.time,\n }))\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"totals = ['236:10','03:41','150:35', '85:35','02:21','01:20']","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"dailyTotals = d3.csv(getCsvUrl(dailyTotalsURL), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"dailyTotalsURL = 'https://docs.google.com/spreadsheets/d/1pDWsayqaA9q-W4Am_oq61xka75CsQVOaX_LTa-PQ22g/edit#gid=470266718'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1080,"value":"badgeBackground= d3.rgb(44,49,122)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1084,"value":"badgeBackgroundMinor= \"#BEBEBE\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1327,"value":"turquoise = d3.rgb(63, 171, 171)","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"realizationEvent = ({\n description: \"Realization I'm moving to Germany soon\",\n datetime: new Date(\"2022-12-27T07:25:00Z\"),\n descDatetime: new Date(\"2022-12-20T07:25:00Z\"),\n\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"germanColor = d3.rgb(0,114,184)","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"japaneseColor = d3.rgb(232,92,34)","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"maxDailys = d3.max(dailyTotals, (d => convertH2M(d.total)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"graphFontSize = 16","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"graphFontFamily = 'Fig tree'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1216,"value":"- [japanese fonts](https://googlefonts.github.io/japanese/#sawarabigothic)\n- [google fonts in observable](https://observablehq.com/@triptych/google-fonts-in-observable)","pinned":false,"hidden":false,"mode":"md"},{"id":1386,"value":"// import { activityStyles} from '@datagrazing/ld-helpers-styles'","pinned":true,"hidden":false,"mode":"ojs"},{"id":583,"value":"pctData = {\n\n let data = jDecByActivity\nreturn tidy(\n jDecByActivity,\n\n // 1. compute the total for each month and store as a property on each point\n groupBy('activity', mutateWithSummary({ pct: sum('time') })),\n\n // 2. compute the percent of total. use rate() to safely\n // handle division by zero and nully values.\n mutate({ percent: rate('time', 'pct') })\n)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"// Converts a Google Sheets website URL to its CSV URL. You can also go to “File → Publish to web”, select the “Comma-separated values (.csv)” type, select the sheet with your data, and use that CSV URL directly with `d3.csv` above. If you need data to update faster, try the Google Sheets API: https://stackoverflow.com/questions/30082277/accessing-a-new-style-public-google-sheet-as-json/44479726#44479726\n\ngetCsvUrl = url => {\n url = new URL(url);\n const id = url.pathname.split(\"/\")[3]\n const gid = new URLSearchParams(url.hash.slice(1)).get(\"gid\") || 0;\n return `https://docs.google.com/spreadsheets/d/${id}/export?format=csv&gid=${gid}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"import {rename, tidy, summarize, groupBy, mutate, rate, sum, mutateWithSummary, pivotLonger} from '@pbeshai/tidyjs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"import {dashboard} from \"@cobus/dashboard-badges\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"import { SummaryTable } from \"@observablehq/summary-table\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}