A generalization of d3.geoCircle with a parametric curve generator:
d3.geoCircle() == d3.geoShape().generator(t => [Math.cos(t), Math.sin(t)])
TODO: add a .rotate() method, based on:
// rotation
var r = angle * Math.PI/180,
c = Math.cos(r),
s = Math.sin(r);
return [x * c - y * s, y * c + x * s];
```
See the code at [github:Fil/d3-geo/geoShape](https://github.com/Fil/d3-geo/commit/cd6ad7a916ed99d5f74bd6004cd9ad66a67a6266)
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="geoshape.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
const svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
const projection = d3.geoConicEqualArea(),
path = d3.geoPath(projection);
var parametricShapes = [
t => [Math.cos(t), Math.sin(t)*Math.cos(t)],
t => [Math.cos(t), Math.sin(t)],
t => [Math.sin(t+0.1), Math.sin(t)],
t => [Math.round(Math.cos(t)), Math.sin(t)],
t => {let a = 0.95 + 0.1*Math.random(); return [a*Math.cos(t), a*Math.sin(t)]},
t => {
let x = Math.cos(t), y = Math.sin(t);
let mx = 0.85, my = 0.7;
x = Math.max(x,-mx)
x = Math.min(x,mx)
y = Math.max(y,-my)
y = Math.min(y,my)
return [x,y];
}
]
svg.append("path")
.datum({type: "Sphere"})
.attr('d', path)
.attr('fill', 'none')
.attr('stroke', '#444');
shapes = svg.append('g')
.selectAll("path")
.data(parametricShapes)
.enter()
.append('path')
.attr('fill', (_,i) => d3.schemeCategory10[i])
.attr('fill-opacity', 0.3)
.attr('stroke', '#444');
d3.interval(function(){
shapes
.transition()
.attr('d', d => {
let r = d3.geoShape().generator(d)
.radius(30 + 30 * Math.random())
.center([360*Math.random(),90*(Math.random()*Math.random()-Math.random()*Math.random())])
.precision(1);
return path(r())
});
}, 800)
</script>
</body>