JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.js"></script>

JavaScript

var vis = d3.select("body").append("svg")
    .attr("width", 1000)
    .attr("height", 667);

  var  scaleX = d3.scale.linear()
    .domain([-30, 30])
    .range([0, 600]);

  var  scaleY = d3.scale.linear()
    .domain([0, 50])
    .range([500, 0]);

  var data = [
      {
        "code":"BR23", 
        "points": "405,100.5625,331,108.5625,300,120.5625,290,141.5625,283,158.5625,278,171.5625,289,209.5625,304,231.5625,332,255.5625,351,264.5625,383,268.5625,400,266.5625,440,266.5625,462,266.5625,510,257.5625,522,230.5625,530,210.5625,534,183.5625,524,163.5625,512,148.5625,490,134.5625,462,124.5625"
      }, 
      {
        "code":"FR23", 
        "points": "702,164.5625,594,250.5625,689,324.5625,749,261.5625,770,206.5625"
      }
    ];

    vis.selectAll("polygon")
    .data(data)
    .enter().append("polygon")
    .attr("points", function(d, i) {return d.points})
    .attr("fill", "transparent")
    .attr("stroke", "red")
    .attr("stroke-width", 2)
    .style("stroke-dasharray", ("15, 15"))  // <== This line here!!
   .on("click", function(d, i) {
      console.log("d", d);
      d3.select(this).style("fill", "blue");
    });


vis.append('circle')
  .attr('cx', 110)
  .attr('cy', 110)
  .attr('r', 20)
  .attr('stroke', 'black')
  .attr('fill', '#69a3b2')
  .on("click", function(d, i) {
      console.log("d", d);      
  });