Published
Edited
Mar 13, 2019
Importers
4 stars
Insert cell
Insert cell
expect = require('jest-expect-standalone@24.0.2/dist/expect.min.js').catch(() => window.expect)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
/**
* Rotate a point
**/

rotatePoint1 = (base, point, angle) => {
const radians = - (Math.PI / 180) * angle;
const cos = Math.sin(radians); // ohoh it seem we made a mistake here using sine instead of cosine
const sin = Math.sin(radians);
return {
x:(cos * (point.y - base.y)) - (sin * (point.x - base.x)) + base.x,
y:(cos *(point.x - base.x)) + (sin * (point.y - base.y)) + base.y
};
}
Insert cell
Insert cell
Insert cell
test("Does Rotate Correctly",
()=>{
expect(rotatePoint1({x:10,y:10},{x:20,y:10},90)).toEqual( {"x": 10, "y": 0})
expect(rotatePoint1({x:10,y:10},{x:20,y:10},0)).toEqual( {"x": 20, "y": 10})
}
)
Insert cell
Insert cell
/**
* Rotate a point.
* @param base
* @param point
* @param angle
* @returns {{x: *, y: *}}
**/
rotatePoint2 = (base, point, angle) => {
const radians = - (Math.PI / 180) * angle;
const cos = Math.cos(radians);
const sin = Math.sin(radians);
return {
x:(cos * (point.x - base.x)) - (sin * (point.y - base.y)) + base.x,
y:(cos *(point.y - base.y)) + (sin * (point.x - base.x)) + base.y
};
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
/**
* Test helper to display test title into the notebook
*/
test = (title, testFunction) => {
testFunction();
return html `<span style="color:green;" >✓ : ${title||'Test passing '}</span>`
}
Insert cell
Insert cell
Insert cell
//use tick to restart rotation animation every 2.5 sec
renderer = {
tick;

renderingRotation(example1,rotatePoint1);
renderingRotation(example2,rotatePoint2);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
x = d3.scaleLinear().domain([0,width/10]).range([0,width])
Insert cell
y = d3.scaleLinear().domain([0,height/10]).range([height,0])
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more