Simple Arcs generator
xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic Shapes - Arc</title>
<!-- JavaScript Libraries //-->
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- CSS Style //-->
<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>
<div id="arc" style="display:inline-block;float:right;"></div>
</body>
<script type="text/javascript" src="main.js"></script>
<script>
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