25:["$","title",null,{"children":"Speedtracer | Rithwik Anand | Observable"}] 4b:T47a,viewof rows = { save clear await Promises.delay(10) const savedRows = JSON.parse(localStorage.getItem(KEY)) const rows = Array.isArray(savedRows) ? savedRows : [] return Inputs.table(rows.map((data, i) => { const keystrokes = data.keystrokes const timestamps = keystrokes.map(d => new Date(d.ts)) const performedAt = d3.timeFormat('%d-%m %H:%M:%S')(timestamps[0]) const totalTimeInMilliSeconds = d3.timeMillisecond.count(timestamps[0], timestamps[timestamps.length - 1]) const meanTime = d3.mean(time_diff(timestamps)) const errorPercentage = keystrokes.filter(d => !d.correct).length / keystrokes.length const meanTimeForOneWord = totalTimeInMilliSeconds / data.repeat const kpm = 60e3 / meanTimeForOneWord return ({ Index: `${i}`, Keyword: data.keyword, Repeat: data.repeat, 'Performed At': performedAt, 'Total time': `${d3.format('.2f')(totalTimeInMilliSeconds/1000)} s`, 'KPM': d3.format('.0f')(kpm), 'Average time to keypress': `${d3.format('.2f')(meanTime)} ms`, 'Error %': d3.format('.1%')(errorPercentage), }) }), { required: false }) }4c:T442,table = data => { const keystrokes = data.keystrokes const timestamps = keystrokes.map(d => d.ts) const performedAt = d3.timeFormat('%d-%m %H:%M:%S')(timestamps[0]) const totalTimeInMilliSeconds = d3.timeMillisecond.count(timestamps[0], timestamps[timestamps.length - 1]) const meanTime = d3.mean(time_diff(timestamps)) const errorPercentage = keystrokes.filter(d => !d.correct).length / keystrokes.length const meanTimeForOneWord = totalTimeInMilliSeconds / data.repeat const kpm = 60e3 / meanTimeForOneWord return !data.keyword.length || data.index < data.keyword.length * data.repeat ? md`` : Inputs.table([ { Title: 'Keyword', Value: data.keyword }, { Title: 'Repeat', Value: data.repeat }, { Title: 'Performed at', Value: performedAt }, { Title: 'Total time', Value: `${d3.format('.2f')(totalTimeInMilliSeconds/1000)} s` }, { Title: 'KPM', Value: d3.format('.0f')(kpm)}, { Title: 'Average time to keypress', Value: `${d3.format('.2f')(meanTime)} ms` }, { Title: 'Error %', Value: d3.format('.1%')(errorPercentage) }, ], { width: 1200}) }4d:T538,chart1 = (data, ymax) => { const meanRepeats = d3.rollups(data.keystrokes, g => d3.mean(time_diff(g.map(d => d.ts))), (d, i) => Math.floor(i / keyword.length)) const chart = Plot.plot({ width, x: { axis: null, }, y: { domain: [0, ymax] }, facet: { data, fx: 'attempt' }, color: { domain: [true, false, 'odd', 'even'], range: ['#5e8962', '#a93333', 'transparent', '#ddd'], }, marks: [ Plot.barY(data.keystrokes, Plot.mapY(time_diff, { y: 'ts', x: (d, i) => i, fill: 'correct', })), Plot.text(data.keystrokes, Plot.mapY(time_diff, { y: 'ts', x: (d, i) => i, fill: 'white', text: 'key', dy: 10, })), Plot.ruleY(data.keystrokes, Plot.groupZ({ y: 'mean' }, Plot.mapY(time_diff, { y: 'ts', }))), Plot.tickY(data.keystrokes, { x: (d, i) => i, y: (d, i) => meanRepeats[Math.floor(i / data.keyword.length)][1], }), Plot.barY(data.keystrokes, { x: (d, i) => i, y: d => ymax, fill: (d, i) => Math.floor(i / data.keyword.length) % 2 === 0 ? 'odd' : 'even', fillOpacity: 0.5, }) ] }) return !data.keyword.length || data.index < data.keyword.length * data.repeat ? md`` : chart }4e:[] 47:{"id":"02a88fd802b09c9c","slug":"speedtracer","title":"Speedtracer","thumbnail":"6765d5b5d0f1b04ef06fe2543c973f8bfabb6e77b833baaef04053b9ac964ebd","access_level":"public","create_time":"$D2021-08-24T12:16:32.499Z","update_time":"$D2021-09-06T06:41:10.531Z","view_time":null,"first_public_time":"$D2021-08-24T12:28:12.914Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"77b49d5139b68ed8","login":"rithwikanand","name":"Rithwik Anand","avatar_url":"https://avatars-next.observableusercontent.com/2d11b8fc94986ebb4c9233d528cbb27cc8b80f1263a7ad00b479736ba2da942f","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":995,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2e0717d814773a4a","login":"rithwikanand","name":"Rithwik Anand","avatar_url":"https://avatars-next.observableusercontent.com/2d11b8fc94986ebb4c9233d528cbb27cc8b80f1263a7ad00b479736ba2da942f","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"2e0717d814773a4a","login":"rithwikanand","name":"Rithwik Anand","avatar_url":"https://avatars-next.observableusercontent.com/2d11b8fc94986ebb4c9233d528cbb27cc8b80f1263a7ad00b479736ba2da942f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Speedtracer","cells":[{"id":0,"value":"md`# Speedtracer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"viewof keyword = Inputs.text({ label: \"Keyword\", type: \"text\", value: \"143\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"viewof repeat = Inputs.range([3, 10], { label: 'Repeat', value: 4, step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"html`

\n ${\n [...keyword.repeat(repeat)]\n .map((letter, i) => html`${letter}`)\n }\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"viewof input = {\n reset\n keyword\n return Inputs.text({ label: 'Type the above sequence as fast as you can' })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"viewof reset = Inputs.button(\"Retry\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"table(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"chart1(data, d3.max(time_diff(data.keystrokes.map(d => d.ts))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"chart2(data, d3.max(time_diff(data.keystrokes.map(d => d.ts))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"viewof save = {\n reset\n input\n return Inputs.button('Save result')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"{\n if (save) {\n const savedRows = JSON.parse(localStorage.getItem(KEY))\n const rows = Array.isArray(savedRows) ? savedRows : []\n localStorage.setItem(KEY, JSON.stringify([ ...rows, data ]))\n return md`_Saved successfully_`\n }\n return md``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"md`### Compare against previous results`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"viewof clear = Inputs.button(\"Clear storage\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":795,"value":"{\n if (clear) {\n localStorage.setItem(KEY, JSON.stringify([]))\n return md`_Cleared successfully_`\n }\n return md``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"rows.length > 2 ? md`_You can select rows for comparison_` : md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"{\n const savedRows = JSON.parse(localStorage.getItem(KEY))\n const allRows = Array.isArray(savedRows) ? savedRows : []\n return rows.length && (rows.length !== allRows.length) ? Inputs.button(`Delete ${rows.length} selected rows`, {\n reduce: () => {\n const newRows = allRows.filter((_, i) => !rows.map(r => +r.Index).includes(i))\n localStorage.setItem(KEY, JSON.stringify(newRows))\n }}) : md``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"{\n if (data_stats.length >= 2) {\n return html`

\n ${data_stats.map(data => table(data))}\n

\n ${data_stats.map(data => chart1(data, ymax))}\n

\n ${data_stats.map(data => chart2(data, ymax))}\n

`\n }\n return md`_Choose at least two rows from the table for comparison_`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"md`_~~ Code ~~_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"data = {\n const key = input[input.length - 1]\n if (!key) {\n return {\n keyword,\n repeat,\n index: 0,\n keystrokes: []\n }\n }\n if (!keyword.length || this.index < keyword.length * repeat) {\n const correct = key === keyword[this.index % keyword.length]\n if (correct) {\n return {\n keyword,\n repeat,\n index: this.index + 1,\n keystrokes: this.keystrokes.concat({ key, correct, ts: new Date() })\n }\n }\n return {\n keyword,\n repeat,\n index: this.index,\n keystrokes: this.keystrokes.concat({ key, correct, ts: new Date() }),\n }\n }\n return this\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"data_stats = {\n return d3.sort(rows, d => +d.Index)\n .map(row => JSON.parse(localStorage.getItem(KEY))[row.Index])\n .map(d => ({ ...d, keystrokes: d.keystrokes.map(d => ({ ...d, ts: new Date(d.ts)}))}))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"chart2 = (data, ymax) => {\n const chart = Plot.plot({\n width,\n x: {\n domain: [...data.keyword].map((l, i) => `${l}-${i}`),\n tickFormat: d => d[0],\n },\n y: {\n domain: [0, ymax]\n },\n facet: {\n data,\n fx: 'attempt'\n },\n color: {\n domain: [true, false],\n range: ['#5e8962', '#a93333'],\n },\n marks: [\n Plot.barY(data.keystrokes, Plot.groupX({ y: 'mean' }, Plot.mapY(time_diff, {\n y: 'ts',\n x: (d, i) => `${d.key}-${Math.floor(i % data.keyword.length)}`,\n fill: 'correct'\n })))\n ]\n })\n return !data.keyword.length || data.index < data.keyword.length * data.repeat ? md`` : chart\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"time_diff = data => data.map((_, i) => i === 0 ? 0 : data[i] - data[i - 1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"time_elapsed = data => data.map((d, i) => data[i] - data[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"KEY = 'speedtracer-rows'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":885,"value":"import {localStorage} from \"@mbostock/safe-local-storage\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null