31:T842,/** * Rendering function, add a svg inside the passed node if needed and render the roation animation * @param root * @param rotationFn */ renderingRotation = (root, rotationFn) => { const mySegment = ({x1:10 , y1:10 , x2:20, y2:10 }); const margin = ({ left : 20, right: 10, top : 10, bottom : 20 }); // Add a svg if needed d3.select(root) .selectAll('svg') .data(['chart']) .enter() .append('svg') .attr('width',width+margin.left+margin.right) .attr('height',height+margin.top+margin.bottom) .append('g') .attr('class','chart') .attr('transform',`translate(${margin.left},${margin.right})`) .each(function(){ d3.select(this).append('g').attr('class','xAxis') d3.select(this).append('g').attr('class','yAxis') }) d3.select(root) .select('.xAxis') .attr('transform',`translate(0,${height})`) .call(d3.axisBottom(x)) d3.select(root) .select('.yAxis') .call(d3.axisLeft(y)) const rotateTweenX = function (segment) { return function (t) { return x(rotationFn({x : segment.x1 ,y : segment.y1},{x : segment.x2 ,y : segment.y2},360*t).x); }; } const rotateTweenY = function (segment) { return function (t) { return y(rotationFn({x : segment.x1 ,y : segment.y1},{x : segment.x2 ,y : segment.y2},360*t).y); }; } const rotated = d3.select(root).select('.chart').selectAll('.rotatedSegment').data([mySegment]); //animate all posible rotation rotated.enter() .append('line') .attr('class','rotatedSegment') .attr('stroke',"red") .attr('x1',(d)=> x(d.x1)) .attr('y1',(d)=> y(d.y1)) .merge(rotated) .transition().duration(2000) .attrTween('x2',rotateTweenX) .attrTween('y2',rotateTweenY) const segment = d3.select(root).select('.chart').selectAll('.baseSegment').data([mySegment]); segment.enter() .append('line') .attr('class','baseSegment') .attr('stroke',"black") .merge(segment) .attr('x1',(d)=> x(d.x1)) .attr('x2',(d)=> x(d.x2)) .attr('y1',(d)=> y(d.y1)) .attr('y2',(d)=> y(d.y2)) }32:[] 2f:{"title":"Unit testing inside a notebook","cells":[{"id":0,"value":"md`# Unit testing inside a notebook`","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"expect = require('jest-expect-standalone@24.0.2/dist/expect.min.js').catch(() => window.expect)","pinned":true,"hidden":false,"mode":"ojs"},{"id":477,"value":"md`> ## \\`forked to resolve the module import problem in the fork parent\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"md `Let's say we are trying to write a rotation function. We find the mathematical equation from wikipedia:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"tex`{\\begin{pmatrix}x'\\\\y'\\end{pmatrix}}={\\begin{pmatrix}\\cos \\varphi &-\\sin \\varphi \\\\\\sin \\varphi &\\cos \\varphi \\end{pmatrix}}{\\begin{pmatrix}x\\\\y\\end{pmatrix}}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"md`and attempt to write a function to acheive that:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"/**\n * Rotate a point\n **/\n\nrotatePoint1 = (base, point, angle) => {\n const radians = - (Math.PI / 180) * angle;\n const cos = Math.sin(radians); // ohoh it seem we made a mistake here using sine instead of cosine\n const sin = Math.sin(radians);\n return {\n x:(cos * (point.y - base.y)) - (sin * (point.x - base.x)) + base.x, \n y:(cos *(point.x - base.x)) + (sin * (point.y - base.y)) + base.y\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"example1 = html `

rotatePoint1()
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"md `With 'jest-expect' we can write some unit tests directly into the notebook:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"test(\"Does Rotate Correctly\",\n ()=>{\n expect(rotatePoint1({x:10,y:10},{x:20,y:10},90)).toEqual( {\"x\": 10, \"y\": 0})\n expect(rotatePoint1({x:10,y:10},{x:20,y:10},0)).toEqual( {\"x\": 20, \"y\": 10})\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":437,"value":"md `Jest affords us the ability to test the code we're writing while simultaneously viewing the visual in the Notebook. So let's fix that broken function...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"/**\n * Rotate a point.\n * @param base\n * @param point\n * @param angle\n * @returns {{x: *, y: *}}\n **/\nrotatePoint2 = (base, point, angle) => {\n const radians = - (Math.PI / 180) * angle;\n const cos = Math.cos(radians);\n const sin = Math.sin(radians);\n return {\n x:(cos * (point.x - base.x)) - (sin * (point.y - base.y)) + base.x, \n y:(cos *(point.y - base.y)) + (sin * (point.x - base.x)) + base.y\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"example2 = html `

rotatePoint2()
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"evall2 = test(\"Does Rotate Correctly\",\n ()=>{\n expect(rotatePoint2({x:10,y:10},{x:20,y:10},90)).toEqual( {\"x\": 10, \"y\": 0})\n expect(rotatePoint2({x:10,y:10},{x:20,y:10},0)).toEqual( {\"x\": 20, \"y\": 10})\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"md `Now this seems correct ! \n\nWhile developing you can have both unit test result and visual result. I don't think i have ever experience this level of confort while developing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"md`## utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"md `Below are just some rendering and helpers functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"/**\n * Test helper to display test title into the notebook\n */\ntest = (title, testFunction) => {\n testFunction();\n return html `✓ : ${title||'Test passing '}`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":519,"value":"md`### generators`","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"tick = {\n while (true) {\n yield Promises.tick(2500);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"//use tick to restart rotation animation every 2.5 sec\nrenderer = { \n tick;\n\n renderingRotation(example1,rotatePoint1);\n renderingRotation(example2,rotatePoint2);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"md`### drawing / svg config`","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"width = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"x = d3.scaleLinear().domain([0,width/10]).range([0,width])","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"y = d3.scaleLinear().domain([0,height/10]).range([height,0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":528,"value":"md`### libs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}