30:T699,md` \`\`\`js // bubble for (let i = 0; i < input.length; i++) { for (let j = 1; j < input.length; j++) { if (input[j - 1] > input[j]) { let a = input[j] let b = input[j - 1] input[j] = b input[j - 1] = a } } } // gnome let pos = 0 while (pos < input.length) { if (pos == 0 || input[pos] >= input[pos - 1]) { pos = pos + 1 } else { let a = input[pos] let b = input[pos - 1] input[pos] = b input[pos - 1] = a pos = pos - 1 } } // cocktail let swapped = false do { swapped = false let i for (i = 0; i < input.length - 1; i++) { if (input[i] > input[i + 1]) { let a = input[i] let b = input[i + 1] input[i] = b input[i + 1] = a swapped = true } } if (!swapped) { break } swapped = false for (i = input.length - 1; i > 0; i--) { if (input[i] > input[i + 1]) { let a = input[i] let b = input[i + 1] input[i] = b input[i + 1] = a swapped = true } } } while (swapped) // quicksort function quicksort(left, right) { if (left < right) { let pivot = input[left + Math.floor((right - left) / 2)], leftNew = left, rightNew = right; do { while (input[leftNew] < pivot) { leftNew++; } while (pivot < input[rightNew]) { rightNew--; } if (leftNew <= rightNew) { let temp = input[leftNew]; input[leftNew] = input[rightNew]; input[rightNew] = temp; leftNew++; rightNew--; } } while (leftNew <= rightNew); quicksort(left, rightNew); quicksort(leftNew, right); } } quicksort(0, input.length - 1) \`\`\` `31:T545,babelPlugin = { return ({ types: t }) => { const createStatement = () => t.awaitExpression(t.callExpression(t.identifier("__SECRET_CHECK_INPUT"), [])) return { visitor: { FunctionDeclaration(path, state) { const fnName = path.node.id.name path.node.async = true // console.log(fnName, path) path.parentPath.traverse({ CallExpression(path, state) { if (t.isIdentifier(path.node.callee, { name: fnName }) && path.parent.type !== 'AwaitExpression') { // console.log(fnName, path) path.replaceWith( t.awaitExpression(path.node) ) } } }) }, ExpressionStatement(path, state) { // AssignmentExpression // console.log(path.node) path.insertAfter(createStatement()) }, DoWhileStatement(path, state) { path.get('body').pushContainer('body', createStatement()) }, WhileStatement(path, state) { path.get('body').pushContainer('body', createStatement()) }, ForStatement(path, state) { // console.log('createStatement', createStatement()) path.get('body').pushContainer('body', createStatement()) } } } } }32:Tdfe,setupCanvas = ({x, domain, colorScale, duration, renderCircles}) => { const margin = {top: 20, right: 0, bottom: 10, left: 0} const rowHeight = 20 const strokeWidth = 6 const bottom = renderCircles.height - renderCircles.padding - rowHeight const dpi = window.devicePixelRatio const canvas = document.createElement('canvas') canvas.style.position = 'absolute' canvas.style.bottom = `${bottom}px` canvas.style.left = '0' const context = canvas.getContext('2d') let innerHeight function setCanvasSize(swaps) { innerHeight = (swaps.length - 1) * rowHeight console.log({innerHeight}) canvas.width = width * dpi canvas.height = (innerHeight + margin.top + margin.bottom) * dpi canvas.style.width = width + 'px' context.scale(dpi, dpi) context.translate(margin.left, margin.top) } let time function reset() { time = 0 setCanvasSize([]) // setting canvas width/height attr clears } reset() const y = d3.scaleLinear() .domain([0, 1]) .range([0, rowHeight]) context.lineWidth = 6 context.lineCap = 'round' context.lineJoin = 'round' function drawPath(v, i0, i1, t0, t1, t) { context.beginPath() context.moveTo(x(i0), y(t0)) if (i0 === i1 || t < 1 / 3) { context.lineTo(x(i0), y(t0) + (y(t1) - y(t0)) * Math.max(t, 1e-4)) } else { context.lineTo(x(i0), y(t0) + (y(t1) - y(t0)) / 3) if (t < 2 / 3) { context.lineTo(x(i0) + (x(i1) - x(i0)) * (t - 1 / 3) * 3, y(t0) + (y(t1) - y(t0)) * t) } else { context.lineTo(x(i1), y(t0) + (y(t1) - y(t0)) * 2 / 3) context.lineTo(x(i1), y(t0) + (y(t1) - y(t0)) * t) } } context.lineWidth = strokeWidth + 2 context.strokeStyle = "#fff" context.stroke() context.lineWidth = strokeWidth context.strokeStyle = colorScale(domain.indexOf(v)) context.stroke() } function next(history) { const record0 = history[time] const record1 = history[time + 1] if (!record0 || !record1) { return } const time0 = time const time1 = ++time const box = [ [-strokeWidth, time0 ? y(time0) : -strokeWidth], [width + strokeWidth, time0 ? y(time0) : -strokeWidth], [width + strokeWidth, y(time1) + strokeWidth], [-strokeWidth, y(time1) + strokeWidth] ] canvas.style.bottom = `${bottom}px` d3.transition() .duration(duration) .on('start', function() { context.save() context.beginPath() context.moveTo(box[0][0], box[0][1]) context.lineTo(box[1][0], box[1][1]) context.lineTo(box[2][0], box[2][1]) context.lineTo(box[3][0], box[3][1]) context.closePath() context.clip() }) .tween('path', function() { return function(t) { context.clearRect(-strokeWidth, -strokeWidth, width + strokeWidth * 2, innerHeight + strokeWidth * 2) record0.forEach((d, i) => { drawPath(d, i, record1.indexOf(d), time0, time1, t) }) canvas.style.bottom = `${bottom + rowHeight * t}px` } }) .on('end', function() { context.restore() next(history) }) } function render(history) { setCanvasSize(history) for (let time0 = 0; time0 < time; time0++) { const record0 = history[time0] const record1 = history[time0 + 1] record0.forEach((d, i) => { drawPath(d, i, record1.indexOf(d), time0, time0 + 1, 1) }) } next(history) } render.node = canvas render.reset = reset return render }33:Tcb6,setupCircles = ({x, domain, colorScale, onChange, duration}) => { const padding = 50 const size = Math.max(x.step(), 4) const radius = Math.min(30, Math.max(size / 2 - 5, 2)) const height = padding * 2 + radius * 2 const svgNode = DOM.svg(width, 70) svgNode.style.position = 'relative' let circleData = [] function endAll(transition, onEnd) { if (!onEnd) { return } let n = transition.size() transition.on('end', () => { --n if (!n) { onEnd() } }) } function textColor(bgColor) { const color = d3.rgb(bgColor) const yiq = (color.r * 299 + color.g * 587 + color.b * 114) / 1000 return yiq >= 128 ? 'black' : 'white' } const render = (data, onEnd) => { // const rows = Math.ceil(data.length / ((width - padding) / size)) // const columns = Math.ceil(data.length / rows) // const xPad = (width - size * columns) / 2 // const height = rows * size + padding const svg = d3.select(svgNode) svg.attr('width', width) svg.attr('height', height) svg.attr('viewBox', [0,0,width,height].join()) circleData = data.map((label, i) => { const d = ( circleData.find(datum => datum.label === label) || {label} ) // const row = Math.floor(i / columns) // d.x = xPad + i % columns * size // d.y = padding / 2 + row * size + size / 2 d.x = x(i) d.y = padding + radius return d }) function dragstarted() { d3.select(this).raise().select('circle').attr('stroke', '#000') } function dragged(d, i) { d.x = d3.event.x d.y = d3.event.y d3.select(this).attr('transform', `translate(${[d.x, d.y]})`) } function dragended() { d3.select(this).select('circle').attr('stroke', 'none') //onChange(circleData // .map(d => ({ // label: d.label, // x: d.x, // row: Math.max(0, Math.floor((d.y - padding / 2) / size)) // })) // .sort((a, b) => d3.ascending(a.row, b.row) || d3.ascending(a.x, b.x)) // .map(d => d.label)) onChange(circleData .slice() .sort((a, b) => d3.ascending(a.x, b.x)) .map(d => d.label) ) } const circles = svg.selectAll('g').data(circleData, d => d.label) const newCircles = circles.enter().append('g') .attr('transform', d => `translate(${[d.x, d.y]})`) .call(d3.drag() .on('start', dragstarted) .on('drag', dragged) .on('end', dragended) ) newCircles.append('circle') .attr('r', radius) .attr('fill', d => colorScale(domain.indexOf(d.label))) newCircles.append('text') .attr('text-anchor', 'middle') .attr('dy', '0.3em') .attr('font-family', 'sans-serif') .attr('fill', d => textColor(colorScale(domain.indexOf(d.label)))) .attr('font-size', Math.min(16, radius)) .text(radius > 5 ? d => d.label : undefined) circles.transition() .duration(duration) .attr('transform', d => `translate(${[d.x, d.y]})`) .call(endAll, onEnd) return svgNode } render.node = svgNode render.height = height render.padding = padding return render }34:T74f,setupSortVis = ({domain, duration, onChange}) => { const maxIndex = domain.length - 1 const colorScale = maxIndex < 9 ? d3.scaleLinear() .interpolate(d3.interpolateCubehelix) .domain([0, maxIndex / 2, maxIndex]) .range([d3.hsl('rgb(24,100,170)'), d3.hsl('#FFB3E8'), d3.hsl('rgb(187,21,26)')]) : d3.scaleSequential(d3.interpolateRainbow).domain([0, maxIndex * 1.16]) /* const colorScale = d3.scaleLinear() .interpolate(d3.interpolateCubehelix) .domain([0, maxIndex / 2, maxIndex]) // maxIndex / 2 - 0.1, maxIndex / 2, maxIndex / 2 + 0.1, .range([d3.hsl('rgb(24,100,170)'), d3.hsl('#FFB3E8'), d3.hsl('rgb(187,21,26)')]) // d3.hsl('#fff'), d3.hsl('#eee'), d3.hsl('#fff'), */ const x = d3.scalePoint() .domain(domain.map((d, i) => i)) .range([0, width]) .round(true) .padding(2) const renderCircles = setupCircles({x, domain, colorScale, duration, onChange}) const renderCanvas = setupCanvas({x, domain, colorScale, duration, renderCircles}) const div = document.createElement('div') div.style = `position: relative; padding-top: ${300}px; overflow: hidden;` div.appendChild(renderCanvas.node) div.appendChild(renderCircles.node) let history = [] const record = (nextData) => { const previous = history[history.length - 1] if (JSON.stringify(previous) === JSON.stringify(nextData)) { return } history.push(nextData.slice()) } const reset = () => { let nextData = randomWrong(domain) renderCanvas.reset() history = [nextData.slice()] onChange(nextData) return nextData } return { render(data) { record(data) renderCanvas(history) renderCircles(data) return div }, update(data, onEnd) { record(data) renderCanvas(history) return renderCircles(data, onEnd) }, reset } }35:T519,setupButtons = ({vis, code, data, onChange}) => { const runButton = html`` const runSort = new Function( 'input', 'test', `${transformCode(code)}; return sort(input, test);` ) let lastData = [].concat(data) const update = async (d) => { if (d.some((item, index, all) => all.indexOf(item) !== index)) { // intermediate state with duplicates return } if (JSON.stringify(d) === JSON.stringify(lastData)) { // console.log('same') return } // tLog('update', d.join(' ')) lastData = d return new Promise((resolve) => { vis.update(d, () => { // tLog('onEnd', d.join(' ')) resolve() }) }) } runButton.onclick = async (e) => { e.preventDefault() const returnValue = await runSort(data, () => { return update([].concat(data)) }) update(returnValue || data).then(() => { onChange(returnValue || data) }) } const resetButton = html`` resetButton.onclick = (e) => { e.preventDefault() vis.reset() } const div = document.createElement('div') div.appendChild(runButton) div.appendChild(document.createTextNode(' ')) div.appendChild(resetButton) return div }36:[] 2e:{"title":"Interactive Sort","cells":[{"id":0,"value":"md`# Interactive Sort`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1033,"value":"md`Full interactive article «[Worldwide Weaving](https://www.republik.ch/2018/06/25/worldwide-weaving)» on republik.ch.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"md`Bring the circles into an ascending order. By hand or with code.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"vis.render(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"viewof code = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":854,"value":"setupButtons({vis, code, data, onChange: d => { mutable data = d }})","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"mutable data = randomWrong(answer)","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"answer = d3.range(20).map(i => i + 1)// .map(i => String.fromCharCode(65 + i))","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"vis = setupSortVis({\n domain: answer,\n duration: 400,\n onChange: (d) => {\n mutable data = d\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1028,"value":"md`Based on work by Mike Bostock and Tom MacWright. Thank you for your amazing examples.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"transformCode = () => {\n const extendedCode = babel.transform(`async function sort(input, __SECRET_CHECK_INPUT) {\\n${code}\\n}`, {plugins: [babelPlugin]}).code\n return babel.transform(extendedCode, {presets: ['es2015']}).code\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":840,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"randomWrong = right => {\n let wrong\n do {\n wrong = d3.shuffle(right.slice())\n } while (JSON.stringify(wrong) === JSON.stringify(right))\n return wrong\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"tLog = {\n const format = d3.timeFormat('%S.%L')\n return (...args) => console.log(`[${format(new Date())}]`, ...args)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"babel = require('babel-standalone@6.26.0')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}