Parliament chart test

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d37iydjzbdkvr9.cloudfront.net/arquivos/2018/09/10/d3-parliament-min.js"></script>
     
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    const width = 400
    const height = 500
    
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)

/* set up the parliament */
    var parliament = d3.parliament();
    parliament.width(width).height(height).innerRadiusCoef(0.5);
    parliament.enter.fromCenter(true).smallToBig(true);
    parliament.exit.toCenter(false).bigToSmall(true);

/* register event listeners */
    parliament.on("click", function(d) { alert("You clicked on a seat of " + d.party.name); }); 
    parliament.on("mouseover", function(d) {
    //d3.selectAll('circle').attr('opacity', 0.2);
      d3.select(this).attr('stroke', d => cor(d.party.legend)).attr('stroke-width',4);
    });
    parliament.on("mouseout", function(d) {
      d3.select(this).attr('stroke', d => cor(d.party.legend)).attr('stroke-width',0);
    });
    
    
    const cor = d3.scaleOrdinal()
    
/* add the parliament to the page */
    d3.json("french.json", function(d) {
      
      const partidos = d3.map(d, d => d.legend).keys()
      const cores = ['red', 'blue','green','orange','gray','pink','steelblue']
      cor.domain(partidos)
         .range(cores)
      
      svg.datum(d).call(parliament);
      const bolinhas = d3.selectAll('svg circle')
        .attr('fill', d => cor(d.party.legend)) 
});

</script>
</body>

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

https://d37iydjzbdkvr9.cloudfront.net/arquivos/2018/09/10/d3-parliament-min.js