2f: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; }30:[] 2d:{"title":"Quantile, Quantize and Threshold scales","cells":[{"id":645,"value":"md`# Quantile, Quantize and Threshold scales`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":223,"value":"linear = d3.scaleLinear()\n .domain([0, d3.max(data)])\n .range([\"white\", \"red\"])","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":434,"value":"jenks = d3\n .scaleThreshold()\n .domain([53440, 135096])\n .range([\"white\", \"pink\", \"red\"])","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":34,"value":"d3 = require(\"d3-array@2\", \"d3-format@2\", \"d3-scale@3\", \"d3-selection@2\")","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":410,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":569,"value":"simple = require(\"simple-statistics@7/dist/simple-statistics.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":571,"value":"ckmeansThresholds = simple.ckmeans(data, 3).map(v => v.pop())","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}