31:T5f7,{ const form = html` `; const buttons = [ ...form.querySelectorAll( 'button' ) ]; buttons.forEach( button => { button.addEventListener( 'click', event => { viewof physicalPixelsPerInch.value = button.getAttribute( 'data-dpi' ); viewof physicalPixelsPerInch.dispatchEvent( new CustomEvent( 'input' ) ); viewof physicalPixelsPerCSSPx.value = button.getAttribute( 'data-dppx' ); viewof physicalPixelsPerCSSPx.dispatchEvent( new CustomEvent( 'input' ) ); } ); } ); form.addEventListener( 'submit', e => { e.preventDefault(); } ) return form; }32:T45e,table = { const root = document.createElement('table'); root.appendChild( html` assuming a normal distribution… Age range (years) Number of subjects Mean LogMAR ± standard deviation ${ Math.round( percentOfPeople * 100 ) }% of people have a LogMAR score worse than ${ Math.round( percentOfPeople * 100 ) }% of people can’t discern DPR above `); buckets.forEach( ( bucket ) => { const quantile = stdlib.base.dists.normal.quantile( 1 - percentOfPeople, bucket.meanLogMAR, bucket.standardDeviation ); const maxDPRforPercent = logMAR2dpr( quantile ); root.appendChild( html` ${ bucket.ageRange } ${ bucket.numberOfSubjects } ${ bucket.meanLogMAR } ± ${ bucket.standardDeviation } ${ Math.round( quantile * 100 ) / 100 } ${ Math.round( maxDPRforPercent * 100 ) / 100 } ` ); } ) return root } 33:T531, buckets = [ { ageRange: '18-24', numberOfSubjects: 37, meanLogMAR: -0.13, standardDeviation: 0.06 }, { ageRange: '25–29', numberOfSubjects: 14, meanLogMAR: -0.16, standardDeviation: 0.06 }, { ageRange: '30-34', numberOfSubjects: 13, meanLogMAR: -0.15, standardDeviation: 0.06 }, { ageRange: '35–39', numberOfSubjects: 13, meanLogMAR: -0.14, standardDeviation: 0.07 }, { ageRange: '40-44', numberOfSubjects: 21, meanLogMAR: -0.13, standardDeviation: 0.05 }, { ageRange: '45–49', numberOfSubjects: 19, meanLogMAR: -0.12, standardDeviation: 0.05 }, { ageRange: '50-54', numberOfSubjects: 17, meanLogMAR: -0.10, standardDeviation: 0.06 }, { ageRange: '55–59', numberOfSubjects: 14, meanLogMAR: -0.10, standardDeviation: 0.04 }, { ageRange: '60-64', numberOfSubjects: 14, meanLogMAR: -0.07, standardDeviation: 0.06 }, { ageRange: '65–69', numberOfSubjects: 18, meanLogMAR: -0.05, standardDeviation: 0.05 }, { ageRange: '70-74', numberOfSubjects: 23, meanLogMAR: -0.04, standardDeviation: 0.04 }, { ageRange: '75+', numberOfSubjects: 20, meanLogMAR: -0.02, standardDeviation: 0.05 } ]34:[] 2f:{"title":"Visual acuity, age, and DPR (and variable px & viewing distances)","cells":[{"id":0,"value":"md`# Visual acuity, age, and DPR (and variable \\`px\\` & viewing distances)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"md`A complication of [an earlier exploration](https://observablehq.com/@eeeps/visual-acuity-age-and-dpr).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"md`## Assumptions\n\n1. A [normal distribution](https://en.wikipedia.org/wiki/Normal_distribution) of visual acuity amongst humans. This [might be a shaky assumption](https://eric-cloudinary-res.cloudinary.com/image/upload/v1552942657/visual-acuity-distribution.png).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"md`## Calculations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"md`### First we need a CSS \\`px\\` pitch…`","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"viewof physicalPixelsPerInch = { \n const form = html``;\n const input = form.querySelector('input'),\n output = form.querySelector('output');\n function update() {\n output.textContent = `${ input.value } ppi`;\n form.value = input.value;\n }\n function externalUpdate() {\n input.value = form.value;\n output.textContent = `${ input.value } ppi`;\n }\n input.addEventListener( 'input', update );\n form.addEventListener( 'input', externalUpdate );\n update();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"viewof physicalPixelsPerCSSPx = { \n const form = html``;\n const input = form.querySelector('input'),\n output = form.querySelector('output');\n function update() {\n output.textContent = `${ input.value }x`;\n form.value = input.value;\n }\n function externalUpdate() {\n input.value = form.value;\n output.textContent = `${ input.value }x`;\n }\n input.addEventListener( 'input', update );\n form.addEventListener( 'input', externalUpdate );\n update();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"lengthOfOneCSSPx_inInches = physicalPixelsPerCSSPx / physicalPixelsPerInch // in inches","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"md`### …then we establish a viewing distance`","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"{\n const form = html`\n`;\n const buttons = [ ...form.querySelectorAll( 'button' ) ];\n buttons.forEach( button => {\n button.addEventListener( 'click', event => {\n viewof viewingDistance_inInches.value = button.getAttribute( 'data-viewing-distance' );\n viewof viewingDistance_inInches.dispatchEvent( new CustomEvent( 'input' ) );\n } );\n } );\n form.addEventListener( 'submit', e => { e.preventDefault(); } )\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"viewof viewingDistance_inInches = { \n const form = html``;\n const input = form.querySelector('input'),\n output = form.querySelector('output');\n function update() {\n output.textContent = `${ input.value } inches`;\n form.value = input.value;\n }\n function externalUpdate() {\n input.value = form.value;\n output.textContent = `${ input.value } inches`;\n }\n input.addEventListener( 'input', update );\n form.addEventListener( 'input', externalUpdate );\n update();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"md`### Now we can calculate the visual angle that \\`1px\\` subtends on a viewer’s eye…`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"visualAngleOfOneCSSPx_inDegrees = 2 * Math.atan( ( 0.5 * lengthOfOneCSSPx_inInches ) / viewingDistance_inInches ) /* in radians */ * ( 180 / Math.PI ) /* to get degrees*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"{\n const refPx_degrees = 0.02131539391825254;\n const relativePercentage = ( visualAngleOfOneCSSPx_inDegrees / refPx_degrees ) - 1;\n const roundedDisplayPercentage = Math.round( relativePercentage * 100 );\n let greaterOrLess;\n if ( roundedDisplayPercentage > 1 ) {\n return html`(This is ${ roundedDisplayPercentage }% larger than a CSS reference pixel.)`;\n }\n else if ( roundedDisplayPercentage < -1 ) {\n return html`(This is ${ Math.abs( roundedDisplayPercentage ) }% smaller than a CSS reference pixel.)`;\n } else {\n return html`(This is about the same as a CSS reference pixel.)`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"md`### …and determine the maximum useful device pixel ratio, for different segements of the population:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"viewof percentOfPeople = { \n const form = html``;\n const input = form.querySelector('input'),\n output = form.querySelector('output');\n function update() {\n output.textContent = `${ Math.round( input.value * 100 ) }%`;\n form.value = input.value;\n }\n input.addEventListener( 'input', update );\n update();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"md`## References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"md`“Average mobile web device distance” came from [a study by Mark Rosenfeld](https://wolterskluwer.com/company/newsroom/news/2011/07/how-close-do-you-hold-your-smart-phone.html)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"md`Device resolution data from a few different sources... [DPI Love](http://dpi.lv) is the best!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"md`Now for all of the vision science...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"md`### Elliott et al. (1995)\n\nElliott, David & C. H. Yang, Kathy & Whitaker, David. (1995). Visual Acuity Changes Throughout Adulthood in Normal, Healthy Eyes: Seeing Beyond 6/6. Optometry and vision science : official publication of the American Academy of Optometry. 72. 186-91. 10.1097/00006324-199503000-00006.\n\n[\\[PubMed\\]](https://www.ncbi.nlm.nih.gov/pubmed/7609941)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"html`

Table from Elliott et al that I took the distributional data from

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"html`

Chart of all datapoints from Elliott et al.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"md`### Ohlsson & Villarreal (2005)\n\nOhlsson, J. and Villarreal, G. (2005), Normal visual acuity in 17–18 year olds. Acta Ophthalmologica Scandinavica, 83: 487-491. doi:[10.1111/j.1600-0420.2005.00516.x](https://doi.org/10.1111/j.1600-0420.2005.00516.x)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"html`

Chart of all datapoints from Ohlsson & Villarreal. Note that the subjects were all 17-18 year olds.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"html`

Chart in which Ohlsson & Villarreal compare their study’s mean visual acuities to other visual acuity studies’ means (including Elliott et al.’s)

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"stdlib = require( \"@stdlib/dist-flat\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"degreesMinutesSeconds2Decimal = function(degrees, minutes, seconds) {\n return degrees + ( minutes / 60 ) + ( seconds / ( 60 * 60 ) );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"logMAR2Decimal = function( logMar ) {\n const minutes = 10 ** ( logMar );\n return degreesMinutesSeconds2Decimal(0, minutes, 0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"logMAR2dpr = function( logMAR ) { \n return visualAngleOfOneCSSPx_inDegrees / logMAR2Decimal( logMAR )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}