29:null 2a:["$","title",null,{"children":"DDD #11: Relative Comparison | Lao | Observable"}] 2f:T8b9,logDifference = { let money = [ ({symbol:'circle', fill:'#da8a67', money:'1¢', value:.01}), ({symbol:'circle', fill:'silver', money:'5¢', value:.05}), ({symbol:'circle', fill:'lightgrey', money:'10¢', value:.1}), ({symbol:'circle', fill:'lightgrey', money:'25¢', value:.25}), ({symbol:'circle', fill:'lightgrey', money:'50¢', value:.5}), ({symbol:'square', fill:'#B5D8A1', money:'$1', value:1}), ({symbol:'square', fill:'#B5D8A1', money:'$2', value:2}), ({symbol:'square', fill:'#B5D8A1', money:'$5', value:5}), ({symbol:'square', fill:'#B5D8A1', money:'$10', value:10}), ({symbol:'square', fill:'#B5D8A1', money:'$20', value:20}), ({symbol:'square', fill:'#B5D8A1', money:'$50', value:50}), ({symbol:'square', fill:'#B5D8A1', money:'$100', value:100}), ] let change = [ ({x1:money[0].value, x2:money[1].value}), ({x1:money[1].value, x2:money[2].value}), ({x1:money[2].value, x2:money[3].value}), ({x1:money[3].value, x2:money[4].value}), ({x1:money[4].value, x2:money[5].value}), ({x1:money[5].value, x2:money[6].value}), ({x1:money[6].value, x2:money[7].value}), ({x1:money[7].value, x2:money[8].value}), ({x1:money[8].value, x2:money[9].value}), ({x1:money[9].value, x2:money[10].value}), ({x1:money[10].value, x2:money[11].value}), ({x1:money[5].value, x2:money[7].value}), // difference between $1 and $5, since people don't use $2 ] return Plot.plot({ title:'US money denominations are about evenly spaced on a log scale', subtitle:'Increments double except for jumps to accomidate 5s', width:width, height:170, marginTop:100, marginRight:30, x: { type: 'log', tickFormat: '', label:'dollars, log scale', labelAnchor:'center', grid:true }, marks: [ Plot.arrow(change, {x1:'x1', x2:'x2', y1:0, y2:0, bend:90, sweep:'-x', strokeDasharray:[1.5, 4]}), Plot.dot(money, Plot.pointer({x:'value', r:25, fill:'black'})), Plot.dot(money, {x:'value', r:15, symbol:d=>d.symbol, fill:'fill'}), Plot.text(money, {x:'value', y:0, text:'money', fill:'black', className:'moneyLabel', fontSize:'12px', fontWeight:600}), ] }) }30:Ta92,relativeDifference = { let indexValue = denominations.find(e => e.name == index).value let money = [ ({symbol:'circle', fill:'#da8a67', money:'1¢', value:.01}), ({symbol:'circle', fill:'silver', money:'5¢', value:.05}), ({symbol:'circle', fill:'lightgrey', money:'10¢', value:.1}), ({symbol:'circle', fill:'lightgrey', money:'25¢', value:.25}), ({symbol:'circle', fill:'lightgrey', money:'50¢', value:.5}), ({symbol:'square', fill:'#B5D8A1', money:'$1', value:1}), ({symbol:'square', fill:'#B5D8A1', money:'$2', value:2}), ({symbol:'square', fill:'#B5D8A1', money:'$5', value:5}), ({symbol:'square', fill:'#B5D8A1', money:'$10', value:10}), ({symbol:'square', fill:'#B5D8A1', money:'$20', value:20}), ({symbol:'square', fill:'#B5D8A1', money:'$50', value:50}), ({symbol:'square', fill:'#B5D8A1', money:'$100', value:100}), ] for( let i=0; id.symbol, fill:'fill'}), Plot.text(money, {x:'difference', y:0, text:'money', fill:'black', className:'moneyLabel', fontSize:'12px', fontWeight:600}), ] }) }31:Tb3d,multipliedDifference = { let indexValue = denominations.find(e => e.name == index).value let money = [ ({symbol:'circle', fill:'#da8a67', money:'1¢', value:.01}), ({symbol:'circle', fill:'silver', money:'5¢', value:.05}), ({symbol:'circle', fill:'lightgrey', money:'10¢', value:.1}), ({symbol:'circle', fill:'lightgrey', money:'25¢', value:.25}), ({symbol:'circle', fill:'lightgrey', money:'50¢', value:.5}), ({symbol:'square', fill:'#B5D8A1', money:'$1', value:1}), ({symbol:'square', fill:'#B5D8A1', money:'$2', value:2}), ({symbol:'square', fill:'#B5D8A1', money:'$5', value:5}), ({symbol:'square', fill:'#B5D8A1', money:'$10', value:10}), ({symbol:'square', fill:'#B5D8A1', money:'$20', value:20}), ({symbol:'square', fill:'#B5D8A1', money:'$50', value:50}), ({symbol:'square', fill:'#B5D8A1', money:'$100', value:100}), ] for( let i=0; id.symbol, fill:'fill'}), Plot.text(money, {x:'difference', y:0, text:'money', fill:'black', className:'moneyLabel', fontSize:'12px', fontWeight:600}), Plot.text( [({x:1,y:1,text:'100%'})],{x:'x', y:'y', dx:2.5, dy:-10, text:'text', fill:'black', className:'moneyLabel', fontSize:'12px', fontWeight:600}), ] }) }32:T536,compareMetrics = { let a = form1.index let b = form1.value if( a==b){b+=.001} let data = [] let keys = Object.keys(change) for( let i=0; i ` ${d.z} \n number: ${d.x} \n change: ${(d.y).toFixed(2)}`, // \n makes a new line tip:'xy', mixBlendMode:'darken' }), Plot.dot( dotData, {x:'x', y:'y', stroke:'black', r:10 }), Plot.text( dotData, {x:'x', y:'y', dy:-15, text:'text'}) ] }) }33:T60f,symmetricLogScale = { let data = [] let places = 4 let show = [1,2,3,4,6,8] for( let j=-places; j e.name != '1/1') return Plot.plot({ width:width, height:100, title:'Symmetric log scale using fractions', marginTop:20, marginBottom:40, marginLeft:30, marginRight:5, x: {type: 'log',label:null, axis:null}, y: {label:null, axis:null}, marks: [ Plot.line(data, {x:'x', y:'y', z:'name', strokeOpacity: 'opacity'}), Plot.text(data, {x:'x', y:'y', dx:2.5, dy:5, rotate:-45, text:'text', textAnchor:'end'}) ] }) }34:[{"id":"124ed36ccf9c9552ff966349664890497316f4f72157fd6495864b74c4e9425dfceab502c355d75566f455da92b63965bd53c06e8110afacc5fcf02760eb33ee","href":"https://static.observableusercontent.com/files/124ed36ccf9c9552ff966349664890497316f4f72157fd6495864b74c4e9425dfceab502c355d75566f455da92b63965bd53c06e8110afacc5fcf02760eb33ee","name":"image.png","type":"image/png","lastModified":1720792510856.361,"size":299374}] 2d:{"id":"f3b4551be0f353ad","slug":null,"title":"DDD #11: Relative Comparison","thumbnail":"ed7cf288590bea6b4ad200d0d84cf4fcd585b37637fe4af59c52c256e2954722","access_level":"public","create_time":"$D2024-06-27T14:45:52.467Z","update_time":"$D2025-03-13T11:49:13.040Z","view_time":null,"first_public_time":"$D2024-07-12T20:47:14.121Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":779,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"},{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"DDD #11: Relative Comparison","cells":[{"id":0,"value":"# DDD #11: Relative Comparison\n## Index charts and logarithmic perception","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":758,"value":"Goal:\n- Grok index charts and logarithmic perception\n- Decide when to index from 100% or 0% change\n- Decide when to use multiple vs percent index chart\n- Onboard audience to how to use log charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":615,"value":"Material:\n- [Fuzzy vs symbolic number sense](https://youtu.be/vRqCs2SUdxY?t=105) (14 min)\n- [Weber, Fechner and Stevens's Power Law](https://www.raggeduniversity.co.uk/wp-content/uploads/2018/03/Weber-Fechner-Law.pdf) (5min)\n- [Index Charts](https://www.youtube.com/watch?v=qs7h19vaqQc) (8 min)\n- [Interactive Index Chart](https://observablehq.com/@d3/index-chart/2) (2 min)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":755,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":710,"value":"\n \n \n \n \n

${tex`\\ln{(x \\cdot y)} = \\ln{(x)} + \\ln{(y)}`}

${tex`\\ln{(x / y)} = \\ln{(x)} - \\ln{(y)}`}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":70,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":246,"value":"denominations = [\n ({name: 'penny', value:.01}),\n ({name: 'nickel', value:.05}),\n ({name: 'dime', value:.1}),\n ({name: 'quarter', value:.25}),\n ({name: 'half dollar', value:.5}),\n ({name: '$1 bill', value:1}),\n ({name: '$2 bill', value:2}),\n ({name: '$5 bill', value:5}),\n ({name: '$10 bill', value:10}),\n ({name: '$20 bill', value:20}),\n ({name: '$50 bill', value:50}),\n ({name: '$100 bill', value:100}),\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":237,"value":"viewof index = Inputs.select(denominations.map(e => e.name), {label: \"Select an index\", value:'$5 bill'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":214,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":761,"value":"- Index data can be re-indexed without losing information","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":416,"value":"[link to interactive index chart](https://observablehq.com/@d3/index-chart/2)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":291,"value":"Percent change cannot be graphed on a log scale\n\n- The index value will have 0% change relative to itself, and log(0) is infinity\n- log is not defined for negative values","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":308,"value":"Inputs.bind(Inputs.select(denominations.map(e => e.name), {label: \"Select an index\", value:'$5 bill'}), viewof index)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":267,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"Which pair seems closer?\n\n

9 - 10           10 - 11

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":361,"value":"viewof consecutive = Inputs.select(['log difference','precent change'], {label: \"Compare with:\", value:'$5 bill'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":326,"value":"\n \n \n \n \n

${tex`\\Delta log = \\dfrac{ \\ln{x_2} - \\ln{x_1}} {\\ln{1}} `}

${tex`change = \\dfrac{x_2-x_1}{x_1}`}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":8,"value":"{\n let n = 20\n let data = []\n for( let i=1; i\n \n ${tex`Change = \\dfrac{x_2-x_1}{x_1}`}\n ${tex`Multiple = 1+\\dfrac{x_2-x_1}{x_1}`}\n \n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":420,"value":"change = ({\n relative: (x,y) => (y-x) / x,\n ln: (x,y) => Math.log(y) - Math.log(x),\n /*\n arithmetic: (x,y) => ( (y-x) / x ) / (.5 + .5*y/x),\n geometric: (x,y) => ( (y-x) / x ) / Math.sqrt(y/x),\n harmonic: (x,y) => .5 * ( (y-x) / x ) * (1+x/y),\n \n max: (x,y) => (y/x-1) / Math.max(1,y/x),\n min: (x,y) => (y/x-1) / Math.min(1,y/x),\n moment: (x,y,k=1) => (y/x-1) / (.5*( 1 + (y/x)**k ))**(1/k)\n */\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":428,"value":"viewof form1 = Inputs.form({\n index: Inputs.range([1, 100], {label: \"Index, x1\", step: 1, value:10}),\n value: Inputs.range([1, 100], {label: \"Value, x2\", step: 1, value:60}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":435,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":519,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":730,"value":"import {chart} from \"@john-guerra/stevenss-power-law\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":737,"value":"chart","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":742,"value":"![image.png](${await FileAttachment(\"image.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2e:"$2d:body"