Polar Plot with Custom Shaded Region

This is a prototype for a specific Path with Sharp Edges and Curve. I tried to create custom Path.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.axis text {
        font: 10px sans-serif;
    }

.axis line,
    .axis circle {
        fill: none;
        stroke: rgba(132, 132, 132, 0.4);
        /*stroke-dasharray: 4,4;*/
    }

.axis :last-of-type circle {
        stroke: #333;
        /*stroke-dasharray: none;*/
    }

.line {
        fill: rgba(255, 0, 0, 0.5);
        stroke: rgba(255, 0, 0, 0.8);
        stroke-width: 2px;
    }

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

/*var data = d3.range(0, 2 * Math.PI, .01).map(function(t) {
        return [t, Math.sin(2 * t) * Math.cos(2 * t)];
    });*/

var designData = [[172, 200],[2.86, 5.06]];
    var maxVal = 16;
    var data = [
        [maxVal*Math.cos(designData[0][0]*Math.PI/180), maxVal*Math.sin(designData[0][0]*Math.PI/180)],
        [maxVal*Math.cos(designData[0][1]*Math.PI/180), maxVal*Math.sin(designData[0][1]*Math.PI/180)],
        [designData[1][1]*Math.cos(designData[0][1]*Math.PI/180), designData[1][1]*Math.sin(designData[0][1]*Math.PI/180)],
        [designData[1][0]*Math.cos(designData[0][0]*Math.PI/180), designData[1][0]*Math.sin(designData[0][0]*Math.PI/180)]
    ];

var width = 960,
        height = 600,
        radius = Math.min(width, height) / 2 - 30;
    var r = d3.scale.linear()
        .domain([0, maxVal])
        .range([0, radius]);

var path1 = "M" + r(data[0][0])+","+r(data[0][1])+" "+
        "A"+ r(maxVal)+","+r(maxVal)+" 0 0,1 "+ r(data[1][0])+","+r(data[1][1])+" "+
        "L" + r(data[2][0])+","+r(data[2][1])+" "+
        "L" + r(data[3][0])+","+r(data[3][1])+" Z";

var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var gr = svg.append("g")
        .attr("class", "r axis")
        .selectAll("g")
        .data(r.ticks(8).slice(1))
        .enter().append("g")
        .attr("transform", "rotate(0)");

gr.append("circle")
        .attr("r", r);

gr.append("text")
        .attr("y", function(d) { return -r(d) - 4; })
        .attr("transform", "rotate(45)")
        .style("text-anchor", "middle")
        .text(function(d) { return d; });

var ga = svg.append("g")
        .attr("class", "a axis")
        .selectAll("g")
        .data(d3.range(0, 360, 30))
        .enter().append("g")
        .attr("transform", function(d) {
            return "rotate(" + (d-90) + ")"; });

ga.append("line")
        .attr("x2", radius);

ga.append("text")
        .attr("x", (radius + 6))
        .attr("dy", ".35em")
        .style("text-anchor", function(d) { return d > 180 && d < 360 ? "end" : null; })
        .attr("transform", function(d) { return d > 180 && d < 360 ? "rotate(180 " + (radius + 6) + ",0)" : null; })
        .text(function(d) {
            return d + "°"; });

svg.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", path1)
        .attr("transform", function(d) {
            return "rotate(" + (-90) + ")"; });
</script>

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