Sunburst with Distortion

.block

license: gpl-3.0

readme.json

{"name":"data","children":[{"name":"entrevista","children":[{"name":"pending","children":[{"name":"39183258","children":[{"onCustomerDuration":null,"c8y_Position":{"lat":4.569014,"lng":-74.08792},"insideGeofence":false,"duration":30,"name":"Entrevista especifica Jose","address":"Cra. 1 #1d22, Bogotá","priority":"Alta","geofence":300,"id":871,"type":"entrevista","taskStatus":"pending","description":"text1","user_id":39183258,"companyId":31562966,"customer":{"name":"Angy","companyName":"Mi tienda M.C","client_id":34542630,"lastName":"Buitrago","lastVisit":null},"schedule":"2018-05-29T15:00:00","reason":null,"size":1}]},{"name":"39597569","children":[{"onCustomerDuration":null,"c8y_Position":{"lat":4.69653,"lng":-74.029916},"insideGeofence":false,"duration":60,"name":"Entrevista especifica Jose","address":"Cra. 6 #119b-50 a 119b-90, Bogotá","priority":"High","geofence":100,"id":882,"type":"entrevista","taskStatus":"pending","description":"Lorem","user_id":39597569,"companyId":31562966,"customer":{"name":"Sandra","companyName":"Furniture Store","client_id":1743221,"lastName":"Bermudez","lastVisit":null},"schedule":"2018-05-29T09:05:26","reason":"Cliente no disponible","size":1},{"onCustomerDuration":null,"c8y_Position":{"lat":4.674253,"lng":-74.103015},"insideGeofence":false,"duration":60,"name":"Formulario general de entradas","address":"Cl. 17 #65-55, Bogotá","priority":"High","geofence":100,"id":884,"type":"entrevista","taskStatus":"pending","description":"Lorem","user_id":39597569,"companyId":31562966,"customer":{"name":"Dario","companyName":"Papeleria y Misceleanas los Pijaos","client_id":6574839,"lastName":"Jimenez","lastVisit":null},"schedule":"2018-05-29T09:05:26","reason":"Cliente no disponible","size":1}]},{"name":"39597764","children":[{"onCustomerDuration":null,"c8y_Position":{"lat":4.674253,"lng":-74.103015},"insideGeofence":false,"duration":60,"name":"Entrevista especifica Jose","address":"Cl. 17 #65-55, Bogotá","priority":"High","geofence":100,"id":872,"type":"entrevista","taskStatus":"pending","description":"Lorem","user_id":39597764,"companyId":31562966,"customer":{"name":"Dario","companyName":"Papeleria y Misceleanas los Pijaos","client_id":6574839,"lastName":"Jimenez","lastVisit":null},"schedule":"2018-05-29T09:05:20","reason":"Cliente no disponible","size":1},{"onCustomerDuration":null,"c8y_Position":{"lat":4.6374442,"lng":-74.1145551},"insideGeofence":false,"duration":60,"name":"Formulario general de entradas","address":"Cl. 17 #65-55, Bogotá","priority":"High","geofence":100,"id":874,"type":"entrevista","taskStatus":"pending","description":"Lorem","user_id":39597764,"companyId":31562966,"customer":{"name":"Andres","companyName":"Macro llantas ut","client_id":675847,"lastName":"Martinez","lastVisit":null},"schedule":"2018-05-29T09:05:20","reason":"Cliente no disponible","size":1}]}]}]},{"name":"cobro","children":[{"name":"pending","children":[{"name":"39597569","children":[{"onCustomerDuration":null,"c8y_Position":{"lat":4.637635,"lng":-74.06696},"insideGeofence":false,"duration":60,"name":"Cobro juridico","address":"Ak. 14 #50 - 21, Bogotá","priority":"Low","geofence":100,"id":883,"type":"cobro","taskStatus":"pending","description":"Lorem","user_id":39597569,"companyId":31562966,"customer":{"name":"Jorge","companyName":"DDC MotorCycles","client_id":7584912,"lastName":"Duque","lastVisit":null},"schedule":"2018-05-29T09:05:26","reason":"Cliente no disponible","size":1}]},{"name":"39597764","children":[{"onCustomerDuration":null,"c8y_Position":{"lat":4.708564,"lng":-74.055658},"insideGeofence":false,"duration":60,"name":"Cobro juridico","address":"Calle 216 Bis #46-31, Bogotá","priority":"Normal","geofence":100,"id":873,"type":"cobro","taskStatus":"pending","description":"Lorem","user_id":39597764,"companyId":31562966,"customer":{"name":"Claudia","companyName":"Ble Panaderia Artesanal","client_id":1098345322,"lastName":"Hernandez","lastVisit":null},"schedule":"2018-05-29T09:05:20","reason":"Cliente no disponible","size":1},{"onCustomerDuration":null,"c8y_Position":{"lat":4.637635,"lng":-74.06696},"insideGeofence":false,"duration":60,"name":"Formulario general","address":"Ak. 14 #50 - 21, Bogotá","priority":"Low","geofence":100,"id":876,"type":"cobro","taskStatus":"pending","description":"Lorem","user_id":39597764,"companyId":31562966,"customer":{"name":"Jorge","companyName":"DDC MotorCycles","client_id":7584912,"lastName":"Duque","lastVisit":null},"schedule":"2018-05-29T09:05:20","reason":"Cliente no disponible","size":1}]},{"name":"39597826","children":[{"onCustomerDuration":null,"c8y_Position":{"lat":4.6374442,"lng":-74.1145551},"insideGeofence":false,"duration":60,"name":"Cobro juridico","address":"Cl. 17 #65-55, Bogotá","priority":"High","geofence":100,"id":879,"type":"cobro","taskStatus":"pending","description":"Lorem","user_id":39597826,"companyId":31562966,"customer":{"name":"Andres","companyName":"Macro llantas ut","client_id":675847,"lastName":"Martinez","lastVisit":null},"schedule":"2018-05-29T09:05:23","reason":"Cliente no disponible","size":1},{"onCustomerDuration":null,"c8y_Position":{"lat":4.6622047,"lng":-74.068481},"insideGeofence":false,"duration":60,"name":"Cobro juridico","address":"Cl. 34 #13-29, Bogotá","priority":"High","geofence":100,"id":881,"type":"cobro","taskStatus":"pending","description":"Lorem","user_id":39597826,"companyId":31562966,"customer":{"name":"Juan Carlos","companyName":"Restaurante Mar Adentro","client_id":109546789,"lastName":"Rivera","lastVisit":null},"schedule":"2018-05-29T09:05:23","reason":"Cliente no disponible","size":1}]}]}]}]}

README.md

A sunburst (radial partition layout) built with D3, featuring interactive distortion based on InterRing: when you click on a node, it expands to fill 80% of the parent arc. Clicking on the root node resets all distortions.

forked from mbostock's block: Sunburst with Distortion

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  stroke: #fff;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500,
    radius = Math.min(width, height) / 2;

var color = d3.scale.category20c();

var partition = d3.layout.partition()
    .size([2 * Math.PI, radius])
    .value(function(d) { return d.size; });

var arc = d3.svg.arc()
    .startAngle(function(d) { return d.x; })
    .endAngle(function(d) { return d.x + d.dx; })
    .innerRadius(function(d) { return d.y; })
    .outerRadius(function(d) { return d.y + d.dy; });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

d3.json("readme.json", function(error, root) {
  if (error) throw error;

  var g = svg.selectAll("g")
      .data(partition.nodes(root))
    	.enter().append("g");

  path = g.append("path")
      .attr("d", arc)
      .style("fill", function(d) { console.log(d); return color((d.children ? d : d.parent).name); })
      .on("click", magnify)
      .each(stash);
  
  
var text = g.append("text").attr("x", function (d) { return y(d.y); })
  .attr("dx", "6") // margin
	.attr("dy", ".35em") // vertical-align
  .attr("transform", function (d) { return "rotate(" + computeTextRotation(d) + ")"; })
  .text(function (d) { return d.name; })
  .style("fill","white");
  
});

// Distort the specified node to 80% of its parent.
function magnify(node) {
  if (parent = node.parent) {
    var parent,
        x = parent.x,
        k = .8;
    parent.children.forEach(function(sibling) {
      x += reposition(sibling, x, sibling === node
          ? parent.dx * k / node.value
          : parent.dx * (1 - k) / (parent.value - node.value));
    });
  } else {
    reposition(node, 0, node.dx / node.value);
  }

  path.transition()
      .duration(750)
      .attrTween("d", arcTween);
}

// Recursively reposition the node at position x with scale k.
function reposition(node, x, k) {
  node.x = x;
  if (node.children && (n = node.children.length)) {
    var i = -1, n;
    while (++i < n) x += reposition(node.children[i], x, k);
  }
  return node.dx = node.value * k;
}

// Stash the old values for transition.
function stash(d) {
  d.x0 = d.x;
  d.dx0 = d.dx;
}

// Interpolate the arcs in data space.
function arcTween(a) {
  var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
  return function(t) {
    var b = i(t);
    a.x0 = b.x;
    a.dx0 = b.dx;
    return arc(b);
  };
}
  
function computeTextRotation(d) {
  var angle = x(d.x + d.dx / 2) - Math.PI / 2;
  return angle / Math.PI * 180;
}
  

var x = d3.scale.linear().range([0, 2 * Math.PI]);
var y = d3.scale.sqrt().range([0, radius]);


</script>