D3.js with Image as legend

by devangkantharia

CSS

path {
  stroke: #fff;
  fill-rule: evenodd;
}

text {
  font-family: Arial, sans-serif;
  font-size: 12px;
}

JavaScript

var width = 550,
  height = 550,
  radius = 250,
  colors = d3.scale.ordinal()
  .range(['#336699 ', '#336699 ', '#ACD1E9', '#ACD1E9', '#ACD1E9']);

var image_width = 40,
  image_height = 40;

var piedata = [{
  label: "test",
  image: "https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png",
  value: 50
}, {
  label: "",
  image: "https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png",
  value: 50
}, {
  label: "Jonathan",
  image: "https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png",
  value: 50
}, {
  label: "Lorenzo",
  image: "https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png",
  value: 50
}, {
  label: "Hillary",
  image: "https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png",
  value: 50
}]


var pie = d3.layout.pie()
  .value(function(d) {
    return d.value;
  })

var arc = d3.svg.arc()
  .outerRadius(120)
  .innerRadius(100)

var svg = d3.select('body').append('svg')
  .attr('width', width)
  .attr('height', height)
  .append('g')
  .attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')');


var g = svg.selectAll(".arc")
  .data(pie(piedata))
  .enter().append("g")
  .attr("class", "arc");

g.append("path")
  .attr("d", arc)
  .style("fill", function(d, i) {
    return colors(i);
  });

g.append("g")
  .attr("transform", function(d) {
    return "translate(" + arc.centroid(d) + ")";
  })
  .append("svg:image")
  .attr("xlink:href", function(d) {
    return d.data.image;
  })
  .attr("width", image_width)
  .attr("height", image_height)
  .attr("x", -100 * image_width / 2)
  .attr("y", -1 * image_height / 2);