TMDB Movies by Country - Donut Chart

This donut chart shows the number of movies by country from TMDB 5000 Movie Dataset. Preprocessed using python. Also added mouseover tooltip to show the number count.

Forked from Curran's Donut Chart.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
    <title>Pie Chart</title>
    <style>
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .legendCells text {
        fill: #8E8883;
        font-size: 25pt;
        font-family: sans-serif;
      }
      .legend-label {
        fill: #635F5D;
        font-size: 45pt;
        font-family: sans-serif;
      }
      .toolTip {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        position: absolute;
        display: none;
        width: auto;
        height: auto;
        background: none repeat scroll 0 0 rgba(192,192,192,0.95);
        border: 0 none;
        border-radius: 2px 2px 2px 2px;
        box-shadow: -3px 3px 15px #888888;
        color: black;
        font: 12px sans-serif;
        padding: 10px;
        text-align: center;
    }
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      const pieValue = d => d.count;
      const colorValue = d => 
        d.count > 50 ? d.country : 'Other';
      const colorValue2 = d => 
        d.count < 50 ? d.country : 'Other';
      const colorLabel = 'Country';
      const margin = { left: 20, right: 400, top: 1, bottom: 1 };

const svg = d3.select('svg');
      const width = svg.attr('width');
      const height = svg.attr('height');
      const innerWidth = 
            width - margin.left - margin.right;
      const innerHeight = 
            height - margin.top - margin.bottom;

const pie = d3.pie().value(pieValue);
      const arc = d3.arc()
        .innerRadius(innerHeight / 4)
        .outerRadius(innerHeight / 2);

colorLegendG.append('text')
          .attr('class', 'legend-label')
          .attr('left', 43)
          .attr('right', -40)
      		.attr('y', -20)
          .text(colorLabel);

const colorScale = d3.scaleOrdinal()
        .range(d3.schemeCategory10);

const colorLegend = d3.legendColor()
        .scale(colorScale)
        .shape('square');
      
             
			var div = d3.select("body")
      		.append("div")
      		.attr("class", "toolTip");

d3.json('country_counts.json', data => {
        //console.log(data)
       	colorScale.domain(data.map(colorValue));

const arcs = pie(data);

var focus = svg.append("g")
          .attr("class", "focus")
          .style("display", "none");

pieG.selectAll('path')
          .data(arcs)
          .enter()
          .append('path')
          .attr('d', arc)
          .attr('fill', 
                d => colorScale(colorValue(d.data)))
      	  .on("mousemove", function(d){
            div.style("left", d3.event.pageX-40+"px");
            div.style("top", d3.event.pageY-5+"px");
            div.style("display", "inline-block");
            div.html((d.data.country)+"<br>"+(d.data.count));
        	})
          .on("mouseout", function(d){
              div.style("display", "none");
          });
        colorLegendG.call(colorLegend)
          .selectAll('.cell text')
            .attr('dy', '0.2em');

}
      );
    </script>
  </body>
</html>

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

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js