hunminkoh/index.html

## index.html

<!DOCTYPE html>
<body>

<script src="http://d3js.org/d3.v3.js"></script>

<script type="text/javascript">

function Point(x,y) {
  this.x = x || 0;
  this.y = y || 0;
};

Point.prototype.x = null;
Point.prototype.y = null;

Point.prototype.add = function(v){
	return new Point(this.x + v.x, this.y + v.y);
};

function equiTriangle (cp, width, color){
  this.type = "equiTriangle";
  this.cp = cp;
  this.cx = cp.x;
  this.cy = cp.y;
  this.w = width;
  this.color = color;
  this.angle = Math.PI/3.0

  this.p1 = new Point(this.cx -this.w, this.cy - this.w/Math.sqrt(3));
  this.p2 = new Point(this.cx, this.cy + this.w*2/Math.sqrt(3));
  this.p3 = new Point(this.cx + this.w, this.cy - this.w/Math.sqrt(3));
}

equiTriangle.prototype.getPoints = function () {
  p1 = this.p1;
  p2 = this.p2;
  p3 = this.p3;
  var pointArray = [p1, p2, p3];

  return pointArray;
};

var svg = d3.select("body").append("svg")
       .attr("width", 1000)
       .attr("height", 667),

scaleX = d3.scale.linear()
      .domain([-25,25])
      .range([250,500]),

scaleY = d3.scale.linear()
      .domain([-25,25])
      .range([750,500]);

//color = d3.scale.category10();
var p1 = new Point(0,0);
var t1 = new equiTriangle(p1, 25, "pink");
var t2 = new equiTriangle(p1, 15, "red");
var t3 = new equiTriangle(p1, 5, "green");
var arrayOfPolygons =  [
  t1, t2, t3
];
var newg = svg.append("g")
newg.selectAll("polygon")
  .data(arrayOfPolygons)
.enter().append("polygon")
  .attr("points",function(d) {
      var pointStr = "";
      console.log(d.getPoints().length);
        for(var i = 0; i<d.getPoints().length; i++){
          console.log([scaleX(d.getPoints()[i].x),scaleY(d.getPoints()[i].y)]);
          pointStr+= [scaleX(d.getPoints()[i].x),scaleY(d.getPoints()[i].y)].join(",");
          pointStr+=" ";
        }
        console.log(pointStr);
        return pointStr;
      })

.attr("fill", function(d){return d.color})
.attr("stroke","#666")
  .attr("stroke-width",2);
</script>

	<!DOCTYPE html>
	<body>

	<script src="http://d3js.org/d3.v3.js"></script>

	<script type="text/javascript">

	function Point(x,y) {
	this.x = x \|\| 0;
	this.y = y \|\| 0;
	};

	Point.prototype.x = null;
	Point.prototype.y = null;

	Point.prototype.add = function(v){
	return new Point(this.x + v.x, this.y + v.y);
	};

	function equiTriangle (cp, width, color){
	this.type = "equiTriangle";
	this.cp = cp;
	this.cx = cp.x;
	this.cy = cp.y;
	this.w = width;
	this.color = color;
	this.angle = Math.PI/3.0

	this.p1 = new Point(this.cx -this.w, this.cy - this.w/Math.sqrt(3));
	this.p2 = new Point(this.cx, this.cy + this.w*2/Math.sqrt(3));
	this.p3 = new Point(this.cx + this.w, this.cy - this.w/Math.sqrt(3));
	}

	equiTriangle.prototype.getPoints = function () {
	p1 = this.p1;
	p2 = this.p2;
	p3 = this.p3;
	var pointArray = [p1, p2, p3];

	return pointArray;
	};

	var svg = d3.select("body").append("svg")
	.attr("width", 1000)
	.attr("height", 667),

	scaleX = d3.scale.linear()
	.domain([-25,25])
	.range([250,500]),

	scaleY = d3.scale.linear()
	.domain([-25,25])
	.range([750,500]);

	//color = d3.scale.category10();
	var p1 = new Point(0,0);
	var t1 = new equiTriangle(p1, 25, "pink");
	var t2 = new equiTriangle(p1, 15, "red");
	var t3 = new equiTriangle(p1, 5, "green");
	var arrayOfPolygons = [
	t1, t2, t3
	];
	var newg = svg.append("g")
	newg.selectAll("polygon")
	.data(arrayOfPolygons)
	.enter().append("polygon")
	.attr("points",function(d) {
	var pointStr = "";
	console.log(d.getPoints().length);
	for(var i = 0; i<d.getPoints().length; i++){
	console.log([scaleX(d.getPoints()[i].x),scaleY(d.getPoints()[i].y)]);
	pointStr+= [scaleX(d.getPoints()[i].x),scaleY(d.getPoints()[i].y)].join(",");
	pointStr+=" ";
	}
	console.log(pointStr);
	return pointStr;
	})

	.attr("fill", function(d){return d.color})
	.attr("stroke","#666")
	.attr("stroke-width",2);
	</script>