27:null 28:["$","title",null,{"children":"Quantile, Quantize and Threshold scales | inanimatedObjects | Observable"}] 2d:T5a6,function showScaleGrouping(data, scales) { const margins = { left: 130 }; const x = d3 .scaleLinear() .domain(d3.extent(data)) .range([margins.left, width - 5]); const r = 3; const rectHeight = 20; const chart = svg` `; return chart; }2e:[] 2b:{"id":"75fa4fa7384b3f83","slug":null,"title":"Quantile, Quantize and Threshold scales","thumbnail":"9672e2ae077f3ca385bbd79fdaee40f8d91d52c4d28ec0e0ea22e9a66f30ec2b","access_level":"public","create_time":"$D2025-03-27T20:27:33.514Z","update_time":"$D2025-03-27T20:27:33.514Z","view_time":null,"first_public_time":"$D2025-03-27T20:27:33.514Z","has_unpublished_edits":null,"fork":{"id":"157060a005a781b3","slug":null,"title":"Quantile, Quantize and Threshold scales","owner":{"id":"d39900b7b3a24f4c","login":"ejfox","name":"EJ Fox"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3bbc91b184894216","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":"starter_2024"},"version":713,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b92cff3813c066cd","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":null}],"members":[{"type":"team","id":"3bbc91b184894216","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":"starter_2024","role":"editor"},{"type":"individual","id":"b92cff3813c066cd","login":"inanimated","name":"inanimatedObjects","avatar_url":"https://avatars-next.observableusercontent.com/89f123aa4c34e9a1c3453e22063931486d006c00ce79eefb5974e51e869f0cb8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Quantile, Quantize and Threshold scales","cells":[{"id":645,"value":"md`# Quantile, Quantize and Threshold scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"scaleCompareChart = showScaleGrouping(data, {\n scaleQuantile: quantile,\n // scaleThreshold: threshold,\n scaleJenks: jenks,\n scaleQuantize: quantize,\n scaleQuantizeNice: quantize.copy().nice()\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"data = [\n 11002, 29017, 45793, 7000, 120040, 30138, 21699, 47058, 24001, 6000, 69007,\n 40000, 55001, 30001, 61150, 12000, 85530, 83000, 23100, 96225, 45003, 34300,\n 43000, 63131, 52001, 36000, 10001, 225786, 0, 75000, 195100, 33010, 5000,\n 31213, 79050, 40010, 37002, 50000, 60000, 66529, 39048, 27276, 28007, 153420,\n 44500, 145443, 89550, 16024, 50, 25001, 300577, 102035, 20581, 170240, 126101,\n 18001, 15000, 4000, 0, 100003, 35000, 14001, 72046, 30000, 0, 65006, 56000,\n 42000, 17158, 135096, 70040, 114068, 22216, 60020, 2742, 35030, 25000, 76005,\n 40600, 48335, 58000, 900, 8000, 19002, 92000, 13000, 50008, 20000, 15100,\n 108023, 50600, 26483, 38002, 53440, 32007, 25654, 80130, 20000, 9500, 1968\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"linear = d3.scaleLinear()\n .domain([0, d3.max(data)])\n .range([\"white\", \"red\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"quantize = d3.scaleQuantize()\n .domain(d3.extent(data)) // pass only the extreme values to a scaleQuantize’s domain\n .range([\"white\", \"pink\", \"red\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"quantile = d3.scaleQuantile()\n .domain(data) // pass the whole dataset to a scaleQuantile’s domain\n .range([\"white\", \"pink\", \"red\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"jenks = d3\n .scaleThreshold()\n .domain([53440, 135096])\n .range([\"white\", \"pink\", \"red\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"md`---\n\n## Appendix\n\nThanks to [Guillaume Calmettes](/@gcalmettes) and [Sylvain Lesage](/@severo) for proofreading and code suggestions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"d3 = require(\"d3-array@2\", \"d3-format@2\", \"d3-scale@3\", \"d3-selection@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"function numericSort(x) {\n return (\n x\n // ensure the array is not changed in-place\n .slice()\n // comparator function that treats input as numeric\n .sort((a, b) => a - b)\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"function chart(data, scale) {\n const w = 30,\n cols = Math.floor(Math.min(600, width) / w),\n lines = Math.ceil(100 / cols);\n const chart = d3\n .create(\"svg\")\n .attr(\"width\", cols * w)\n .attr(\"height\", lines * w);\n\n chart\n .append(\"g\")\n .attr(\"transform\", \"translate(2,2)\")\n .attr(\"style\", \"stroke:black; fill:white;\")\n .selectAll(\"rect\")\n .data(data)\n .join(\"rect\")\n .attr(\"width\", w - 3)\n .attr(\"height\", w - 3)\n .attr(\"x\", (_, i) => w * (i % cols))\n .attr(\"y\", (_, i) => w * ((i / cols) | 0))\n .style(\"fill\", d => (scale ? scale(d) : \"#ddd\"));\n return chart.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"simple = require(\"simple-statistics@7/dist/simple-statistics.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"ckmeansThresholds = simple.ckmeans(data, 3).map(v => v.pop())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"