2d:null 2e:["$","title",null,{"children":"Adjustable gradient scale with histogram and cumulative sum | Ville Saarinen | Observable"}] 33:T428,svg``34:[] 31:{"id":"770b3b02a3bc9f92","slug":"adjustable-gradient-scale","title":"Adjustable gradient scale with histogram and cumulative sum","thumbnail":"bb1ce9102e7ebe84c2f6405b12117f561aa8b8e25a42cd6bf93ea0e9a0395070","access_level":"public","create_time":"$D2020-05-22T07:06:22.822Z","update_time":"$D2020-05-27T09:15:02.651Z","view_time":null,"first_public_time":"$D2020-05-22T07:44:36.316Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"71d4e23f031c30ce","login":"vsaarinen","name":"Ville Saarinen","avatar_url":"https://avatars-next.observableusercontent.com/f270f77133e952c1faf69ae5c86607970d6c3c1ac7aba096191c6f1dab4c1170","tier":"starter_2024"},"version":289,"publish_version":289,"role":null,"authored":false,"authors":[{"type":"individual","id":"aee524ad0d8538f9","login":"vsaarinen","name":"Ville Saarinen","avatar_url":"https://avatars-next.observableusercontent.com/f270f77133e952c1faf69ae5c86607970d6c3c1ac7aba096191c6f1dab4c1170","tier":null}],"members":[{"type":"individual","id":"aee524ad0d8538f9","login":"vsaarinen","name":"Ville Saarinen","avatar_url":"https://avatars-next.observableusercontent.com/f270f77133e952c1faf69ae5c86607970d6c3c1ac7aba096191c6f1dab4c1170","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Adjustable gradient scale with histogram and cumulative sum","cells":[{"id":0,"value":"md`# Adjustable gradient scale with histogram and cumulative sum`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"html`

${\n svg``}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"{\n if (threshold <= 65) {\n return 'Very sensitive';\n }\n\n if (threshold <= 75) {\n return 'Sensitive';\n }\n\n if (threshold <= 85) {\n return 'Less sensitive';\n }\n\n return 'Least sensitive';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"viewof threshold = slider({ min: 55, max: 95, step: 5 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"html`

Technical details:

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"buffer = ({\n left: Math.min(Math.floor(threshold / 10), 8),\n right: Math.round((99 - threshold) / 10) + 5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"domain = [0, threshold - buffer.left, threshold, threshold + buffer.right, 100]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"range = ['#eee', '#eee', '#D393E5', '#F15489', '#F15489']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"smoothness = 3 // 0..n. The higher the number, the smoother the color gradient but also the slower the drawing","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"colorScale = d3.scaleLinear().domain(domain).range(range)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"random = d3.randomLogNormal(-0.04, 0.66)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"data = Float64Array.from({ length: 2000 }, () => {\n let num = Math.round(random() * 25);\n if (num > 100) {\n // We get a peak at 100 if we just do Math.min(x, 100)\n return num - 50;\n }\n return num;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"bins = {\n const binner = d3\n .histogram()\n .domain([0, 100])\n .thresholds(100);\n return binner(data).map(d => d.length);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"cumulativeSum = d3.cumsum(bins)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"countAtThreshold = cumulativeSum[threshold]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"countAbove = data.length - countAtThreshold","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"xScale = d3\n .scaleLinear()\n .domain([0, 100])\n .range([0, chartWidth])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"yScaleHistogram = d3\n .scaleLinear()\n .domain([0, d3.max(bins)])\n .nice()\n .range([histogramHeight, Math.round(histogramHeight / 2)])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"yScaleCumSum = d3.scaleLinear()\n .domain([0, data.length]).nice()\n .range([histogramHeight, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"chartWidth = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"histogramHeight = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"function asPercent(num) {\n return num.toLocaleString(undefined, {\n style: 'percent',\n minimumFractionDigits: 2\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import { slider } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"d3 = require(\"d3-scale@3\", \"d3-random@2\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"