Skip to content

Instantly share code, notes, and snippets.

@arpitnarechania

arpitnarechania/README.md

Last active February 5, 2017 14:06
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/624f5a98e9352a6d2c9ec80b392f4578 to your computer and use it in GitHub Desktop.
Save arpitnarechania/624f5a98e9352a6d2c9ec80b392f4578 to your computer and use it in GitHub Desktop.
Download ZIP
Basic Shapes - Triangle
Raw
README.md

Generating a Triangle using D3.js

Raw
index.html
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic Shapes - Triangle</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 >X1</span>
<input id="x1" type="number">
</div>
<div class="formElement">
<span >Y1</span>
<input id="y1" type="number">
</div>
<div class="formElement">
<span >X2</span>
<input id="x2" type="number">
</div>
<div class="formElement">
<span >Y2</span>
<input id="y2" type="number">
</div>
<div class="formElement">
<span >X3</span>
<input id="x3" type="number">
</div>
<div class="formElement">
<span >Y3</span>
<input id="y3" type="number">
</div>
<div class="formElement">
<span >Fill Color</span>
<input id="fillColor" type="text">
</div>
<div class="formElement">
<span >Stroke Color</span>
<input id="strokeColor" type="text">
</div>
<div class="formElement">
<span >Stroke Width</span>
<input id="strokeWidth" type="number">
</div>
<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>
<div id="triangle" 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},
x1: 10,
y1: 10,
x2: 50,
y2: 20,
x3: 30,
y3: 50,
fill_color : "red",
width : 300,
height : 150,
stroke_color : "black",
stroke_width : 2,
dom_element : "#triangle"
};
$("#x1").on("input",function(){
config.x1 = parseInt($(this).val());
renderTriangle(config,false);
});
$("#y1").on("input",function(){
config.y1 = parseInt($(this).val());
renderTriangle(config,false);
});
$("#x2").on("input",function(){
config.x2 = parseInt($(this).val());
renderTriangle(config,false);
});
$("#y2").on("input",function(){
config.y2 = parseInt($(this).val());
renderTriangle(config,false);
});
$("#x3").on("input",function(){
config.x3 = parseInt($(this).val());
renderTriangle(config,false);
});
$("#y3").on("input",function(){
config.y3 = parseInt($(this).val());
renderTriangle(config,false);
});
$("#fillColor").on("input",function(){
config.fill_color = $(this).val();
renderTriangle(config,false);
});
$("#width").on("input",function(){
config.width = parseInt($(this).val());
renderTriangle(config,false);
});
$("#height").on("input",function(){
config.height = parseInt($(this).val());
renderTriangle(config,false);
});
$("#strokeColor").on("input",function(){
config.stroke_color = $(this).val();
renderTriangle(config,false);
});
$("#strokeWidth").on("input",function(){
config.stroke_width = parseInt($(this).val());
renderTriangle(config,false);
});
renderTriangle(config,true);
</script>
</html>
Raw
main.js
function renderTriangle(config,first_time){
var lineData = [{ "x": config.x1, "y": config.y1},{ "x": config.x2, "y": config.y2},
{ "x": config.x2, "y": config.y2},{ "x": config.x3, "y": config.y3},
{ "x": config.x3, "y": config.y3},{ "x": config.x1, "y": config.y1}];
//This is the accessor function we talked about above
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");
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);
//The line SVG Path we draw
var lineGraph = svg.append("path")
.attr("d", lineFunction(lineData))
.style("fill",config.fill_color)
.style("stroke",config.stroke_color)
.style("stroke-width",config.stroke_width)
$("#x1").val(config.x1);
$("#y1").val(config.y1);
$("#x2").val(config.x2);
$("#y2").val(config.y2);
$("#x3").val(config.x3);
$("#y3").val(config.y3);
$("#width").val(config.width);
$("#height").val(config.height);
$("#strokeColor").val(config.stroke_color);
$("#strokeWidth").val(config.stroke_width);
$("#fillColor").val(config.fill_color);
}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);
dom_element.select("path")
.attr("d", lineFunction(lineData))
.style("fill",config.fill_color)
.style("stroke",config.stroke_color)
.style("stroke-width",config.stroke_width)
}
}
Raw
style.css
body{
width: 700px;
}
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