<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Circle Chart with D3JS</title>
  <style>
    body {
      width: auto;
      height: auto;
      font-family: "Roboto", sans-serif;
      background-color: #ddd;
    }

    .widget {
      margin: 0 auto;
      width: 500px; /* Adjusted width to accommodate legend beside the chart */
      margin-top: 20px;
      background-color: #ccc;
      border-radius: 5px;
      box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4);
      height: 400px; /* Adjusted height */
    }

    .header {
      background-color: #29384D;
      height: 40px;
      color: #fff;
      text-align: center;
      line-height: 40px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      font-weight: 400;
      font-size: 1.5em;
      text-transform: uppercase;
      text-shadow: 1px 1px #06060d;
    }

    .chart-container {
      padding: 25px;
    }

    .shadow {
      -webkit-filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.5));
      filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.5));
    }
  </style>
</head>
<body>
  <div class="widget">
    <div class="header">Browser Market Share</div>
    <div id="chart" class="chart-container"></div>
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script>
  <script>
    var dataset = [
        { name: 'Data', percent: 20.10 },
        { name: 'Chrome', percent: 32.51 },
        { name: 'Safari', percent: 13.68 },
        { name: 'Firefox', percent: 8.71 },
        { name: 'Others', percent: 6.01 },
        { name: 'Others1', percent: 6.01 },
        { name: 'Others2', percent: 6.01 },
        { name: 'Others3', percent: 6.01 },
        { name: 'Others4', percent: 6.01 },
        { name: 'Others5', percent: 6.01 }
    ];

    var pie = d3.layout.pie()
      .value(function(d) { return d.percent; })
      .sort(null)
      .padAngle(.03);

    var w = 500, h = 300; // Adjusted width to accommodate legend beside the chart

    var outerRadius = 150; // Adjusted radius to fit within the new layout
    var innerRadius = 100;

    var color = d3.scale.category10();

    var arc = d3.svg.arc()
      .outerRadius(outerRadius)
      .innerRadius(innerRadius);

    var svg = d3.select("#chart")
      .append("svg")
      .attr({
          width: w,
          height: h,
          class: 'shadow'
      }).append('g')
      .attr({
          transform: 'translate(' + (outerRadius + 20) + ',' + (h / 2) + ')' // Centered chart on the left
      });

    var path = svg.selectAll('path')
      .data(pie(dataset))
      .enter()
      .append('path')
      .attr({
          d: arc,
          fill: function(d, i) {
              return color(d.data.name);
          }
      });

    path.transition()
      .duration(1000)
      .attrTween('d', function(d) {
          var interpolate = d3.interpolate({ startAngle: 0, endAngle: 0 }, d);
          return function(t) {
              return arc(interpolate(t));
          };
      });

    var restOfTheData = function() {
        var text = svg.selectAll('text')
            .data(pie(dataset))
            .enter()
            .append("text")
            .transition()
            .duration(200)
            .attr("transform", function(d) {
                return "translate(" + arc.centroid(d) + ")";
            })
            .attr("dy", ".4em")
            .attr("text-anchor", "middle")
            .text(function(d) {
                return d.data.percent + "%";
            })
            .style({
                fill: '#fff',
                'font-size': '10px'
            });

        var legendRectSize = 20;
        var legendSpacing = 7;
        var legendHeight = legendRectSize + legendSpacing;

        var legend = svg.selectAll('.legend')
            .data(dataset) // Use the dataset directly
            .enter()
            .append('g')
            .attr({
                class: 'legend',
                transform: function(d, i) {
                    // Position legend to the right of the chart
                    return 'translate(' + (outerRadius + 40) + ',' + ((i * legendHeight) - (h / 2 - 20)) + ')';
                }
            });

        legend.append('rect')
            .attr({
                width: legendRectSize,
                height: legendRectSize,
                rx: 20,
                ry: 20
            })
            .style({
                fill: function(d) { return color(d.name); },
                stroke: function(d) { return color(d.name); }
            });

        legend.append('text')
            .attr({
                x: 30,
                y: 15
            })
            .text(function(d) {
                return d.name;
            }).style({
                fill: '#237',
                'font-size': '14px'
            });

        // Add logo inside the circle
        svg.append("svg:image")
            .attr({
                "xlink:href": "https://via.placeholder.com/100", // URL of the logo image
                x: -50, // Adjust x position
                y: -50, // Adjust y position
                width: 100,
                height: 100
            });
    };

    setTimeout(restOfTheData, 1000);
  </script>
</body>
</html>
