Basic Shapes - Arc

Simple Arcs generator

<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic Shapes - Arc</title>

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="form" style="display:inline-block;float:left;">
        <div class="formElement">
            <span >Width</span>
            <input id="width" type="number">
        </div>
        <div class="formElement">
            <span >Height</span>
            <input id="height" type="number">
        </div>
        <div class="formElement">
            <span >X</span>
            <input id="x" type="number">
        </div>
        <div class="formElement">
            <span >Y</span>
            <input id="y" type="number">
        </div>
        <div class="formElement">
            <span>Start Angle</span>
            <input id="startAngle" type="number">
        </div>
        <div class="formElement">
            <span>End Angle</span>
            <input id="endAngle" type="number">
        </div>
        <div class="formElement">
            <span>Inner Radius</span>
            <input id="innerRadius" type="number">
        </div>
        <div class="formElement">
            <span>Outer Radius</span>
            <input id="outerRadius" type="number">
        </div>
        <div class="formElement">
            <span >Stroke Color</span>
            <input id="strokeColor" type="text">
        </div>
        <div class="formElement">
            <span >Fill Color</span>
            <input id="fillColor" type="text">
        </div>
        <div class="formElement">
            <span >Stroke Width</span>
            <input id="strokeWidth" type="number">
        </div>
    </div>

</body>

var config = {
        margin : {top: 50, right: 50, bottom: 50, left: 50},
        x : 125,
        y : 125,
        inner_radius : 75,
        outer_radius : 80,
        start_angle : 15,
        end_angle : 135,
        height: 175,
        width: 250,
        stroke_color : "black",
        fill_color : "red",
        stroke_width : 2,
        dom_element : "#arc"
    };

$("#width").on("input",function(){
        config.width = parseInt($(this).val());
        renderArc(config,false);
    });

$("#height").on("input",function(){
        config.height = parseInt($(this).val());
        renderArc(config,false);
    });

$("#x").on("input",function(){
        config.x = parseInt($(this).val());
        renderArc(config,false);
    });

$("#y").on("input",function(){
        config.y = parseInt($(this).val());
        renderArc(config,false);
    });

$("#innerRadius").on("input",function(){
        config.inner_radius = parseInt($(this).val());
        renderArc(config,false);
    });

$("#outerRadius").on("input",function(){
        config.outer_radius = parseInt($(this).val());
        renderArc(config,false);
    });

$("#startAngle").on("input",function(){
        config.start_angle = parseInt($(this).val());
        renderArc(config,false);
    });

$("#endAngle").on("input",function(){
        config.end_angle = parseInt($(this).val());
        renderArc(config,false);
    });

$("#strokeColor").on("input",function(){
        config.stroke_color = $(this).val();
        renderArc(config,false);
    });

$("#strokeWidth").on("input",function(){
        config.stroke_width = parseInt($(this).val());
        renderArc(config,false);
    });

$("#fillColor").on("input",function(){
        config.fill_color = $(this).val();
        renderArc(config,false);
    });

renderArc(config,true);

</script>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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

https://code.jquery.com/jquery-3.1.1.min.js