Orthographic Pie Chart

This bl.ock follows in the footsteps of this block with orthographic labels.

It uses a quick demo of a module that takes a path or selection with paths, overlays it on a projection, converts the path's coordinates to geographic coordinates and then into geojson.

It uses a few methods:

geoCentroid([longitude,latitude])

The geographic centroid to apply to the non-geographic path. Aligns with 0,0 in the non-geographic coordinate space.

geoScale(value)

Sets the scale of the geographic projection which the non-geographic path is overlain ontop of before getting the geographic coordinates. Lower values result in larger features.

pathScale(value)

Sets the scaling value of the non-geographic path. Smaller values result in smaller features.

selection(selection)

Takes a d3 selection, extracts their paths and creates geojson from the paths.

path(path)

Takes a path and creates geojson from the path.

features()

Returns features generated from the selection/path

featureCollection()

Returns a featureCollection generated from the selection/path

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="d3orthoPath.js"></script>
<script>

var width = 800;
var height = 800;

var svg = d3.select("body").append("svg")
  .attr("width",width)
  .attr("height",height);
  
var projection = d3.geoOrthographic();

var pie = d3.pie().value(function(d) { return d; });
    
var arc = d3.arc()
  .outerRadius(20)
  .innerRadius(10);
  
var color = ["orange","steelblue","crimson","lightgreen"]

var data = [10,20,30,40];

var path = d3.geoPath().projection(projection);

d3.json("https://unpkg.com/world-atlas@1/world/50m.json", function(error, world) {
  if (error) throw error;

svg.insert("path", ".graticule")
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path);

svg.insert("path", ".graticule")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("d", path);
 
 var ortho = d3.orthoLabel()
  .geoCentroid([-40,40])
  .geoScale(100)
  .pathScale(1)
  .distance(1.5);
  
 var geojson = [];
 
 var symbols = svg.selectAll()
  .data(pie(data))
  .enter()
  .append("path")
  .attr("fill",function(d,i) { return color[i]; })
  .attr("opacity",0.7)
  .attr("d",function(d,i) { geojson.push(ortho.path(arc(d)).featureCollection()); return geojson[i]; });
  
  symbols.data(geojson);
  
  var speed = 1e-2;
  var start = Date.now();
  d3.timer(function() {
    projection.rotate([speed * (Date.now() - start), -15]);
	d3.selectAll("path").attr("d",path);
  });
  
})
</script>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v1.min.js