Skip to content

Instantly share code, notes, and snippets.

@arpitnarechania

arpitnarechania/README.md

Last active February 6, 2017 16:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save arpitnarechania/0626103a6e50a6a1c93c26d345f7c11b to your computer and use it in GitHub Desktop.
Save arpitnarechania/0626103a6e50a6a1c93c26d345f7c11b to your computer and use it in GitHub Desktop.
Download ZIP
Basic Shapes - Arc
Raw
README.md

Simple Arcs generator

Raw
index.html
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic Shapes - Arc</title>
<!-- JavaScript Libraries //-->
<script src="http://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>
Raw
main.js
function renderArc(config,first_time){
if(first_time){
var svg = d3.select(config.dom_element).append("svg")
.style("width", config.width + config.margin.left + config.margin.right)
.style("height", config.height + config.margin.top + config.margin.bottom);
var arc = d3.svg.arc()
.innerRadius(config.inner_radius)
.outerRadius(config.outer_radius)
.startAngle(toRadians(config.start_angle))
.endAngle(toRadians(config.end_angle));
svg.append("path")
.attr("transform","translate(" + config.x+ "," + config.y+ ")")
.attr("class", "arc")
.attr("d", arc)
.style("fill",config.fill_color)
.style("stroke",config.stroke_color)
.style("stroke-width",config.stroke_width)
$("#x").val(config.x);
$("#y").val(config.y);
$("#startAngle").val(config.start_angle);
$("#endAngle").val(config.end_angle);
$("#innerRadius").val(config.inner_radius);
$("#outerRadius").val(config.outer_radius);
$("#width").val(config.width);
$("#height").val(config.height);
$("#fillColor").val(config.fill_color);
$("#strokeColor").val(config.stroke_color);
$("#strokeWidth").val(config.stroke_width);
}else{
var dom_element = d3.select("svg")
.style("width", config.width + config.margin.left + config.margin.right)
.style("height", config.height + config.margin.top + config.margin.bottom);
var arc = d3.svg.arc()
.innerRadius(config.inner_radius)
.outerRadius(config.outer_radius)
.startAngle(toRadians(config.start_angle))
.endAngle(toRadians(config.end_angle));
dom_element.select(".arc")
.attr("transform","translate(" + config.x+ "," + config.y+ ")")
.attr("d", arc)
.style("fill",config.fill_color)
.style("stroke",config.stroke_color)
.style("stroke-width",config.stroke_width)
}
}
function toRadians(degs){
return Math.PI*degs/180;
}
Raw
style.css
body{
width: 600px;
}
input {
width:50px;
}
.formElement{
padding:8px;
}
span{
display: inline-block;
width: 150px;
}
svg{
border: 1px solid black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment