31:T48d,{ const ticks = ExtendedWilkinson([Math.floor(range[0]),Math.ceil(range[1])],ticksNumber); console.log('ext',ticks) console.log('--->main',mainScale.domain()) const scaleX = mainScale.copy().domain([ticks.lmin,ticks.lmax]); const xAxis = g => g .attr("transform", `translate(0,5)`) .call(g => { g.append('line') .attr('x1', margins.left) .attr('x2', scaleX(ticks.ticks[ticks.ticks.length - 1], [ticks.lmin, ticks.lmax], [margins.left, width - margins.right])) .attr('stroke','#000') }) .selectAll('g') .data(ticks.ticks) .join('g') .attr('transform',d => `translate(${scaleX(d, [ticks.lmin, ticks.lmax], [margins.left, width - margins.right])}, 0)`) .call(g => { g .append('line') .attr('y1',0) .attr('y2',10) .attr('stroke','#000') g.append('text') .attr('x',0) .attr('y',10) .attr('dy','1em') .attr('fill','#000') .attr('text-anchor','middle') .text(d => d) }) const svg = d3.select(DOM.svg(width, 40)); svg.append("g").call(xAxis); return svg.node(); }32:T9e3,function ExtendedWilkinson([dmin, dmax], m, Q=[1,5,2,2.5,4,3], onlyLoose = false, w=[0.25, 0.2, 0.5, 0.05], nice=true) { const eps = Number.EPSILON * 100; if(dmin > dmax) { const temp = dmin; dmin = dmax; dmax = temp; } if(dmax - dmin < eps) { return d3.range(dmin, dmax, (dmax-dmin)/m) } const best = {score: -2}; let j = 1; while(j < Infinity) { for(const q of Q) { const sm = simplicity.max(q, Q, j); if((w[0]*sm+w[1]+w[2]+w[3]) < best.score) { j = Infinity; break; } let k = 2; while(k < Infinity) { const dm = density.max(k, m); if((w[0]*sm+w[1]+w[2]*dm+w[3]) < best.score) { break; } const delta = (dmax-dmin)/(k+1)/j/q; let z = Math.ceil(Math.log10(delta)); while(z < Infinity) { const step = j * q * Math.pow(10,z); //const step = 60 * 60 * 1000 * 24; const cm = coverage.max(dmin, dmax, step * (k-1)); if((w[0]*sm+w[1]*cm+w[2]*dm+w[3]) < best.score) { break; } const min_start = Math.floor(dmax/(step))*j - (k - 1)*j; const max_start = Math.ceil(dmin/(step))*j; if(min_start > max_start) { z += 1; continue; } const range = d3.range(min_start, max_start); for(let start = min_start; start <= max_start; start++ ) { const lmin = start * (step/j); const lmax = lmin + step*(k-1); const lstep = step; const s = simplicity(q, Q, j, lmin, lmax, lstep); const c = coverage(dmin, dmax, lmin, lmax); const g = density(k, m, dmin, dmax, lmin, lmax); const l = legibility(lmin, lmax, lstep); const score = w[0]*s + w[1]*c + w[2]*g + w[3]*l; if(score > best.score && (!onlyLoose || (lmin <= dmin && lmax >= dmax))) { best.lmin = lmin; best.lmax = lmax; if(nice) { best.lmin = lmin < lmax ? Math.floor(dmin / lstep) * lstep : Math.ceil(dmin / lstep) * lstep; best.lmax = lmax > lmin ? Math.ceil(dmax / lstep) * lstep : Math.floor(dmax / lstep) * lstep; } best.lstep = lstep; best.score = score; } } z += 1; } k += 1; } } j += 1; } // console.log('BEST', best); best.ticks = d3.range(best.lmin, best.lmax, best.lstep).concat(best.lmax); return best; }33:[] 2f:{"title":"Extended Wilkinson Algorithm","cells":[{"id":0,"value":"md`# Extended Wilkinson Algorithm`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`\nA notebook implementation of the Extended-Wilkinson algorithm for positioning labels on an Axis as described in Talbot, J., Lin, S., Hanrahan, P. (2010) “[Extension of Wilkinson's Algorithm for Positioning Tick Labels on Axes, InfoVis 2010][extwilk2010]”.\n[extwilk2010]: http://vis.stanford.edu/files/2010-TickLabels-InfoVis.pdf\n\nThis algorithm is an extended version of Wilkinson labeling approach based on an optimization search over a space of possible labelings.\n\nThe notebook compares the **Extended Wilkinson** algorithm with other algorithms for label positioning such as **Heckbert** and **d3.scaleLinear.ticks**\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"md`### Customize parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"viewof range = rangeSlider({\n min: -10,\n max: 10,\n value: [0, 10],\n precision: 1, // how many decimal places\n title: 'Data range between -100 and 100',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"viewof ticksNumber = slider({\n min: 1,\n max: 100,\n step: 1,\n value: 10,\n title: \"Number of ticks\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"md`### Extended Wilkinson`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"md`### Heckbert`","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"{\n const ticks = Heckbert(range, ticksNumber);\n const xScale = mainScale.copy().domain([ticks.lmin, ticks.lmax])\n const xAxis = g => g\n .attr(\"transform\", `translate(0,5)`)\n .call(g => {\n g.append('line')\n .attr('x1', margins.left)\n .attr('x2', xScale(ticks.ticks[ticks.ticks.length - 1]))\n .attr('stroke','#000')\n })\n .selectAll('g')\n .data(ticks.ticks)\n .join('g')\n .attr('transform',d => `translate(${xScale(d)}, 0)`)\n .call(g => {\n g\n .append('line')\n .attr('y1',0)\n .attr('y2',10)\n .attr('stroke','#000')\n g.append('text')\n .attr('x',0)\n .attr('y',10)\n .attr('dy','1em')\n .attr('fill','#000')\n .attr('text-anchor','middle')\n .text(d => d)\n })\n \n const svg = d3.select(DOM.svg(width, 40));\n svg.append(\"g\").call(xAxis);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"md`### d3.scaleLinear.ticks()`","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"{\n const ticks = mainScale.ticks(ticksNumber);\n console.log(mainScale.domain(), mainScale.ticks())\n const xAxis = g => g\n .attr(\"transform\", `translate(0,5)`)\n .call(g => {\n g.append('line')\n .attr('x1', mainScale(ticks[0]))\n .attr('x2', mainScale(ticks[ticks.length - 1]))\n .attr('stroke','#000')\n })\n .selectAll('g')\n .data(ticks)\n .join('g')\n .attr('transform',d => `translate(${mainScale(d)}, 0)`)\n .call(g => {\n g\n .append('line')\n .attr('y1',0)\n .attr('y2',10)\n .attr('stroke','#000')\n g.append('text')\n .attr('x',0)\n .attr('y',10)\n .attr('dy','1em')\n .attr('fill','#000')\n .attr('text-anchor','middle')\n .text(d => d)\n })\n \n const svg = d3.select(DOM.svg(width, 40));\n svg.append(\"g\").call(xAxis);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"md`---\n## Algorithms`","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"md`### Extended Wilkinson`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"md`### Heckbert`","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"function Heckbert([dmin, dmax], ticksNumber = 10) {\n const _ticks = [];\n \n const nicenum = (x, round) => {\n const e = Math.floor(Math.log10(x));\n const f = x / Math.pow(10, e);\n let nf;\n if (round) {\n if (f < 1.5) nf = 1;\n else if (f < 3) nf = 2;\n else if (f < 7) nf = 5;\n else nf = 10;\n } else {\n if (f <= 1) nf = 1;\n else if (f <= 2) nf = 2;\n else if (f <= 5) nf = 5;\n else nf = 10;\n }\n return nf * Math.pow(10, e);\n };\n \n const range = nicenum(dmax - dmin, false);\n const lstep = nicenum(range / (ticksNumber - 1), true);\n const lmin = Math.floor(dmin / lstep) * lstep;\n const lmax = Math.ceil(dmax / lstep) * lstep;\n\n // console.log(this.range, this.lstep, this.lmin, this.lmax)\n\n for (let tick = lmin; tick <= lmax; tick += lstep) {\n _ticks.push(tick);\n }\n return {\n lmin,\n lmax,\n lstep,\n ticks: _ticks\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"md`### Util functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"function simplicity(q, Q, j, lmin, lmax, lstep) {\n const eps = Number.EPSILON * 100;\n const n = Q.length;\n const i = match(q,Q)[0];\n const v = ((lmin % lstep < eps || lstep - (lmin % lstep) < eps) && lmin <=0 && lmin >=0) ? 1 : 0;\n \n return 1 - (i - 1)/(n - 1) - j + v;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"simplicity.max = (q, Q, j) => {\n const n = Q.length;\n const i = match(q, Q)[0];\n const v = 1;\n return 1 - (i - 1)/(n - 1) - j + v;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"function coverage(dmin, dmax, lmin, lmax) {\n const range = dmax - dmin;\n return 1 - 0.5 * (Math.pow((dmax-lmax),2)+ Math.pow((dmin-lmin),2)) / Math.pow((0.1*range),2);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"coverage.max = (dmin, dmax, span) => {\n const range = dmax - dmin;\n if(span > range) {\n const half = (span - range)/2;\n return 1 - 0.5 * (Math.pow(half,2) + Math.pow(half,2)) / Math.pow((0.1 * range),2);\n } else {\n return 1;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"function density(k, m, dmin, dmax, lmin, lmax) {\n const r = (k-1) / (lmax-lmin);\n\tconst rt = (m-1) / (Math.max(lmax,dmax) - Math.min(dmin,lmin));\n\treturn 2 - Math.max( r/rt, rt/r );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"legibility = (lmin, lmax, lstep) => 1;","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"density.max = (k,m) => {\n return k >= m ? 2 - (k-1)/(m-1) : 1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"function match(a,b) {\n if(Array.isArray(a)) {\n return a.map(d => b.indexOf(d)).map(d => d > -1 ? d : null);\n } else {\n const index = b.indexOf(a);\n return index > -1 ? [index + 1] : [null];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"mainScale = d3.scaleLinear().domain(range).range([margins.left, width - margins.right]).nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"margins = ({top: 0, left: 50, right: 50, bottom: 0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"html`