28:null 29:["$","title",null,{"children":"Logarithmic progress bars | Fabian Gündel | Observable"}] 2e:[] 2c:{"id":"f340a9f67e9968c7","slug":"log-scale-example","title":"Logarithmic progress bars","thumbnail":"3938d96f57af6691d2dc3586d7d672467f58f074ce9c43ed83dd6cd6065781bf","access_level":"public","create_time":"$D2018-05-02T12:24:53.445Z","update_time":"$D2018-10-27T18:53:43.669Z","view_time":null,"first_public_time":"$D2018-05-02T12:25:47.384Z","has_unpublished_edits":null,"fork":{"id":"5d8da0d2b501828e","slug":"scale-con-d3","title":"scale con d3:","owner":{"id":"9e22a4389bf26c8f","login":"littleark","name":"Carlo Zapponi"}},"stars":2,"starred":false,"owner":{"type":"team","id":"40fc243da291ec86","login":"sto3psl","name":"Fabian Gündel","avatar_url":"https://avatars-next.observableusercontent.com/389bce2d61aebba762252043b015af9ec5702eefde81634e9db5c593934b7b0e","tier":"starter_2024"},"version":133,"publish_version":133,"role":null,"authored":false,"authors":[{"type":"individual","id":"c7d44ebfc09fccc5","login":"sto3psl","name":"Fabian Gündel","avatar_url":"https://avatars-next.observableusercontent.com/389bce2d61aebba762252043b015af9ec5702eefde81634e9db5c593934b7b0e","tier":null}],"members":[{"type":"individual","id":"c7d44ebfc09fccc5","login":"sto3psl","name":"Fabian Gündel","avatar_url":"https://avatars-next.observableusercontent.com/389bce2d61aebba762252043b015af9ec5702eefde81634e9db5c593934b7b0e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Logarithmic progress bars","cells":[{"id":31,"value":"md`\n# Logarithmic progress bars\n\nUsually progress bars show linear progress of a certain process, like the completion of certain tasks. This is a little playground trying out a progress bar with a logarithmic scale. The idea was to show the user quick progress early on in a long taking process to motivate them to continue.\n\nThe second reason I made this is to show how to use logarithmic scales with D3.js and show how they can behave compared to linear scales.\n\nChange the value slider to see how the fill status changes for linear and logarithmic scales.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"viewof value = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`\n* linear \n

\n* log \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"{\n const circumference = r => 2 * Math.PI * r\n return html`\n\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"val = {\n\tconst scaleLinear = d3.scaleLinear().domain([1, 100]).range([0,10000]);\n const scaleLog = d3.scaleLog().domain([1,100]).range([0,10000]);\n \t\n return {linear: Math.round(scaleLinear(value) / 100), log: Math.round(scaleLog(value) / 100)}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"