linea = {
const svg = d3.create("svg")
.attr('style', 'background: #000')
.attr("viewBox", [0, 0, width, width])
const innerRadius = 350
let rot = 0
const projection = d3.geoOrthographic()
.translate([width/2,width/2])
.scale(350)
.rotate(darRotacion([350,0]))
const front = svg.append('circle')
.attr('cx', width/2)
.attr('cy', width/2)
.attr('r', innerRadius)
.attr('fill', '#000')
.attr('stroke', '#000')
const paises = svg.append('g').selectAll('path')
.data(mundo.features)
.join('path')
.attr('fill', d=>color(Math.random()*10))
.attr('stroke', '#000')
.attr('d',d3.geoPath(projection))
function darRotacion(coor){
return [-coor[0], -coor[1]]
}
d3.timer(() => {
rot += 1
paises.attr('d',d3.geoPath(projection.rotate(darRotacion([rot,0]))))
if(rot%3 === 0){
paises
.attr('fill', d=>{
return color(Math.random()*10)
})
}
}, 150)
return svg.node()
}