pie chart repos by language

forked from vjwilson's block: pie chart browser usage

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="search-block">
    <label for="username">GitHub Username</label>
    <input name="username" id="username" value="vjwilson">
    <button type="button" id="search">Graph Repos</button>
  </div>
  <div class="github-link" id="github-link">
  </div>
  <div class="container">
  </div>
  <script>
    const container = d3.select('.container')
    const svg = container.append("svg")
      .attr("width", 960)
      .attr("height", 500);
    const width = svg.attr("width");
    const height = svg.attr("height");
    const radius = Math.min(width, height) / 2;
    
    const searchBox = document.getElementById('username');
    const triggerBtn = document.getElementById('search');
    let username = searchBox.value;
    const githubLink = document.getElementById('github-link');
    
    triggerBtn.addEventListener('click', function(e) {
      username = searchBox.value.trim();
      graphRepos(username);
    });
       
    searchBox.addEventListener('keypress', function(e) {
      const code = e.which;
      if (code === 13) {
        username = searchBox.value.trim();
        graphRepos(username);
      }
    });
 
    graphRepos(username);

const totals = repos.reduce((sums, repo) => {
            sums[repo.language] = (sums[repo.language] || 0) + 1;
            return sums;
          }, {});

const int = Object.entries(totals);

const newData = int.map((sum) => {
            return {
              language: sum[0],
              count: sum[1]
            };
          });

const color = d3.scaleOrdinal(['#4daf4a','#377eb8','#ff7f00','#984ea3','#e41a1c']);

// Generate the pie
          const pie = d3.pie().value(function(d) {
              return d.count;
          });

// Generate the arcs
          const arc = d3.arc()
                      .innerRadius(0)
                      .outerRadius(radius - 50);
          const label = d3.arc()
                        .outerRadius(radius - 5)
                        .innerRadius(radius - 35);

//Generate groups
          const arcs = g.selectAll(".arc")
                      .data(pie(newData))
                      .enter()
                      .append("g")
                      .attr("class", "arc")

//Draw arc paths
          arcs.append("path")
              .attr("fill", function(d) {
                  return color(d.data.language);
              })
          		.attr('stroke', 'white')
              .attr("d", arc);

arcs.append("text")
             .attr("transform", function(d) {
                      return "translate(" + label.centroid(d) + ")";
              })
              .attr('text-anchor', 'middle')
              .attr('font-size', '14px')
             .text(function(d) {
                return d.data.language + ' (' + d.data.count + ')';
              });

const newLink = document.createElement('a');
        	newLink.setAttribute('href', `https://github.com/${user}?tab=repositories`);
        	newLink.setAttribute('target', '_blank');
        	newLink.setAttribute('rel', 'noopener noreferrer');
        	newLink.setAttribute('target', '_top');
        	const newContent = document.createTextNode(`View repos for ${user}`);
        	newLink.appendChild(newContent);
        
        	githubLink.append(newLink);

svg.append("g")
           .attr("transform", "translate(" + 40 + "," + (height / 2) + ")rotate(270)")
           .append("text")
           .text("Public Repos by Language")
           .attr("class", "title")
           .attr('font-size', '24px')
           .attr('text-anchor', 'middle');
        })
        .catch(function(error) {
          var p = document.createElement('p');
        	p.classList.add('error')
          p.appendChild(
            document.createTextNode('Error: ' + error.message)
          );
          document.body.insertBefore(p, container.node());
        });

}  
    
  </script>
</body>

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