Public
Edited
May 19, 2023
1 fork
21 stars
cartesian = new Coordinate({
width: rectWidth,
height: rectHeight,
transformations:[['cartesian']]
})
visualizeCoordinate(cartesian, auxiliaryLines(cartesian));
visualizeCoordinate(cartesian, bars());
translate = cartesian
.clone()
.transform('translate', tx, ty);
visualizeCoordinate(translate, bars());
scale = {
// move to center to scale
const [cx, cy] = cartesian.getCenter();
return cartesian
.clone()
.transform("translate", cx, cy)
.transform("scale", sx, sy)
.transform("translate", cx, cy);
}
visualizeCoordinate(scale, bars());
rotate = {
// move to center to rotate
const [cx, cy] = cartesian.getCenter();
return cartesian
.clone()
.transform('translate', cx, cy)
.transform('rotate', theta)
.transform('scale', 0.5, 0.5)
.transform('translate', -cx, -cy);
}
visualizeCoordinate(rotate, bars());
shearX = cartesian
.clone()
.transform('scale', 0.5, 0.5)
.transform('shear.x', Math.PI / 3)
visualizeCoordinate(shearX, bars());
shearY = cartesian
.clone()
.transform('scale', 0.5, 0.5)
.transform('shear.y', Math.PI / 2.5)
visualizeCoordinate(shearY, bars());
shear = cartesian
.clone()
.transform('scale', sx, sy)
.transform('shear.x', Math.PI / 3)
.transform('shear.y', Math.PI / 2.5)
visualizeCoordinate(shear, bars());
reflectX = {
// move to center to reflect
const [cx, cy] = cartesian.getCenter();
return cartesian
.clone()
.transform('translate', cx, cy)
.transform('reflect.x')
.transform('translate', -cx, -cy);
}
visualizeCoordinate(reflectX, bars());
reflectY = {
// move to center to reflect
const [cx, cy] = cartesian.getCenter();
return cartesian
.clone()
.transform('translate', cx, cy)
.transform('reflect.y')
.transform('translate', -cx, -cy);
}
visualizeCoordinate(reflectY, bars());
reflect = {
// move to center to reflect
const [cx, cy] = cartesian.getCenter();
return cartesian
.clone()
.transform('translate', cx, cy)
.transform('reflect')
.transform('translate', -cx, -cy);
}
visualizeCoordinate(reflect, bars());
transpose = {
const transpose = new Coordinate({
width: rectWidth,
height: rectHeight
});
const [cx, cy] = transpose.getCenter();
return (
transpose
.transform("transpose")
// .transform("translate", 0.5, 0.5)
// .transform("reflect.x")
// .transform("translate", -0.5, -0.5)
.transform("cartesian")
);
}
visualizeCoordinate(transpose, bars());
polar = new Coordinate({
width: circleSize,
height: circleSize,
transformations:[
['polar', startAngle, endAngle, innerRadius, outerRadius],
['cartesian']
]
})
visualizeCoordinate(polar, auxiliaryLines(polar, 10));
rose = {
const rose = new Coordinate({
width: circleSize,
height: circleSize
});
return (
rose
// .transform("translate", 0.5, 0.5)
// .transform("reflect.y")
// .transform("translate", -0.5, -0.5)
// .transform("polar", 0, Math.PI * 2, 0, 1)
.transform("cartesian")
);
}
visualizeCoordinate(rose, bars(20));
visualizeCoordinate(cartesian, bars(1, true));
visualizeCoordinate(rose, bars(30, true));
donut = {
const donut = new Coordinate({
width: circleSize,
height: circleSize
});
donut
.transform("transpose")
.transform("translate", 0.5, 0.5)
.transform("reflect.x")
.transform("translate", -0.5, -0.5)
.transform("polar", 0, Math.PI, 0, 1)
.transform("translate", 0, -0.5)
.transform("cartesian");
console.log(111, donut.getCenter());
return donut;
}
visualizeCoordinate(donut, bars(50, true));
helix = new Coordinate({
width: 500,
height: 500,
transformations: [
["helix", startAngle1, endAngle1, innerRadius1, outerRadius1],
["cartesian"]
]
})
visualizeCoordinate(helix, auxiliaryLines(helix, 10));
helixCenter = {
// move to center
const helixCenter = new Coordinate({
width: 500,
height: 500
})
return helixCenter
.transform('translate', 0.5, 0.5)
.transform('reflect.y')
.transform('translate', -0.5, -0.5)
.transform('helix', startAngle1, endAngle1, innerRadius1, outerRadius1)
.transform('cartesian');
}
visualizeCoordinate(helixCenter, bars(30));
helixTranspose = {
// transpose
const helixTranspose = new Coordinate({
width: 500,
height: 500
});
return helixTranspose
.transform('transpose')
.transform('translate', 0.5, 0.5)
.transform('reflect.x')
.transform('translate', -0.5, -0.5)
.transform('helix', startAngle1, endAngle1, innerRadius1, outerRadius1)
.transform('cartesian');
}
visualizeCoordinate(helixTranspose, bars(100));
visualizeCoordinate(helixCenter, bars(30, true));
visualizeCoordinate(helixTranspose, bars(100, true));
parallel = new Coordinate({
width: 800,
height: 320,
transformations: [
['parallel', 0, 1, 0, 1],
['cartesian']
]
})
visualizeCoordinate(parallel, highPoints());
radar = new Coordinate({
width: 400,
height: 400,
transformations: [
['parallel', 0, 1, 0, 1],
['translate', 0.5, 0.5],
['reflect.y'],
['translate', -0.5, -0.5],
['polar', 0, Math.PI * 2, 0, 1],
['cartesian']
]
})
visualizeCoordinate(radar, highPoints())
fisheyeCartesian = cartesian
.clone()
.transform('fisheye', 400, 100, distortionX, distortionY);
visualizeCoordinate(fisheyeCartesian, auxiliaryLines(fisheyeCartesian));
fisheyePolar = polar
.clone()
.transform('fisheye', 200, 200, 2, 2)
visualizeCoordinate(fisheyePolar, auxiliaryLines(fisheyePolar, 10));
visualizeCoordinate(fisheyeCartesian, bars());
fisheyeParallel = parallel
.clone()
.transform('fisheye', 200, 200, 2, 2)
visualizeCoordinate(fisheyeParallel, highPoints())
fisheyeCircularCartesian = cartesian
.clone()
.transform('fisheye.circular', 400, 160, distortionRadius, distortion);
visualizeCoordinate(fisheyeCircularCartesian, auxiliaryLines(fisheyeCircularCartesian, 15));
fisheyeCircularParallel = parallel
.clone()
.transform('fisheye.circular', 400, 100, 100, 2);
fisheyeCircularPolar = polar
.clone()
.transform('fisheye.circular', 200, 200, 80, 2);
visualizeCoordinate(fisheyeCircularPolar, auxiliaryLines(fisheyeCircularPolar, 10));
visualizeCoordinate(fisheyeCircularParallel, highPoints());
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.
