hyonschu/gist:3cdf068dea9e959c501d

## gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    .yaxis path,
    .yaxis line,
    .xaxis path,
    .xaxis line {
    fill: none;
    stroke: #222;
    shape-rendering: crispEdges;
    }
    .yaxis,
    .xaxis {
    font-family: sans-serif;
    font-size: 13px;
    fill: #222;
    }

    .titlex {
    font-family: sans-serif;
    font-size: 14px;
    fill: black;

    }


    </style>
    <script src="angular.min.js"></script>
    <script src="d3.v3.min.js" charset="utf-8"></script>
</head>
<body ng-app="myApp">
  <iris-chart>
  <script>
    var myApp = angular.module('myApp', []);
    myApp.directive('irisChart', function(){
        function link (scope, element, attr) {
            var width = 800;
            var height = 450;
            var innerWidth = width-20;
            var innerHeight = height+20;
            var padding = 20
            var color = d3.scale.category10()
            charts   = d3.select("body")
                .append("svg")
                .attr({
                    "height": height,
                    "width": width
                })

            // charts = main.append("svg")
            //     .attr({
            //         x: 20,
            //         y: -20,
            //         width: innerWidth,
            //         height: innerHeight
            //     })
            d3.csv('iris.csv', function(data){
                //console.log(data[10]);


                xbuff = 1.05;
                ybuff = 1.15;
                xmax = d3.extent(data, function(d) { return d.sepalL });
                ymax = d3.extent(data, function(d) { return d.petalL });


                var xscale = d3.scale.linear()
                    .range([padding,width+padding])
                    .domain([(xmax[0]/xbuff), xmax[1]])

                var yscale = d3.scale.linear()
                    .range([padding,height-padding])
                    .domain([ymax[1], ymax[0]/ybuff])

                // var rScale = d3.scale.linear()
                //      .domain([0, d3.max(data, function(d) { return d.sepalL; })])
                //      .range([3, 5]);

                // generating charts
                charts.selectAll('g')
                    .data(data)
                    .enter()
                    .append("circle")
                    .attr("cx", function(d) { return xscale(d.sepalL) } )
                    .attr("cy", function(d) { return yscale(d.petalL)} )
                    .attr("r", (4))
                    .style("fill", function(d) { return color(d.species) })

                    .on("mouseover", function(d) {
                            d3.select(this)
                            .append("svg:title")
                            .text(
                                function(d) {
                                    if (d.Effect == "")
                                        {return d.Name}
                                    else
                                        {return d.petalL + "," + d.sepalL; };

                            })
                        })


                //define X axis
                var xAxis = d3.svg.axis()
                  .scale(xscale)
                  .orient("bottom")
                  .ticks(10)

                // define Y axis
                var yAxis = d3.svg.axis()
                  .scale(yscale)
                  .orient("left")
                  .ticks(5)

                //Create X axis
                charts.append("g")
                    .attr("class", "xaxis")
                    .attr("transform", "translate(0," + (height -  padding) + ")")
                    .call(xAxis);

                //Create Y axis
                charts.append("g")
                    .attr("class", "yaxis")
                    .attr("transform", "translate(" + padding + ",0)")
                    .call(yAxis);
            }); // ends d3.csv()

        } // ends function link()
        return {
            link: link,
            restrict: 'E'
            //scope: { data: '=' }
        } // ends return
    }) // ends myApp.directive


    </script>

        </body>
        </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style type="text/css">
	.yaxis path,
	.yaxis line,
	.xaxis path,
	.xaxis line {
	fill: none;
	stroke: #222;
	shape-rendering: crispEdges;
	}
	.yaxis,
	.xaxis {
	font-family: sans-serif;
	font-size: 13px;
	fill: #222;
	}

	.titlex {
	font-family: sans-serif;
	font-size: 14px;
	fill: black;

	}


	</style>
	<script src="angular.min.js"></script>
	<script src="d3.v3.min.js" charset="utf-8"></script>
	</head>
	<body ng-app="myApp">
	<iris-chart>
	<script>
	var myApp = angular.module('myApp', []);
	myApp.directive('irisChart', function(){
	function link (scope, element, attr) {
	var width = 800;
	var height = 450;
	var innerWidth = width-20;
	var innerHeight = height+20;
	var padding = 20
	var color = d3.scale.category10()
	charts = d3.select("body")
	.append("svg")
	.attr({
	"height": height,
	"width": width
	})

	// charts = main.append("svg")
	// .attr({
	// x: 20,
	// y: -20,
	// width: innerWidth,
	// height: innerHeight
	// })
	d3.csv('iris.csv', function(data){
	//console.log(data[10]);


	xbuff = 1.05;
	ybuff = 1.15;
	xmax = d3.extent(data, function(d) { return d.sepalL });
	ymax = d3.extent(data, function(d) { return d.petalL });


	var xscale = d3.scale.linear()
	.range([padding,width+padding])
	.domain([(xmax[0]/xbuff), xmax[1]])

	var yscale = d3.scale.linear()
	.range([padding,height-padding])
	.domain([ymax[1], ymax[0]/ybuff])

	// var rScale = d3.scale.linear()
	// .domain([0, d3.max(data, function(d) { return d.sepalL; })])
	// .range([3, 5]);

	// generating charts
	charts.selectAll('g')
	.data(data)
	.enter()
	.append("circle")
	.attr("cx", function(d) { return xscale(d.sepalL) } )
	.attr("cy", function(d) { return yscale(d.petalL)} )
	.attr("r", (4))
	.style("fill", function(d) { return color(d.species) })

	.on("mouseover", function(d) {
	d3.select(this)
	.append("svg:title")
	.text(
	function(d) {
	if (d.Effect == "")
	{return d.Name}
	else
	{return d.petalL + "," + d.sepalL; };

	})
	})



	//define X axis
	var xAxis = d3.svg.axis()
	.scale(xscale)
	.orient("bottom")
	.ticks(10)

	// define Y axis
	var yAxis = d3.svg.axis()
	.scale(yscale)
	.orient("left")
	.ticks(5)

	//Create X axis
	charts.append("g")
	.attr("class", "xaxis")
	.attr("transform", "translate(0," + (height - padding) + ")")
	.call(xAxis);

	//Create Y axis
	charts.append("g")
	.attr("class", "yaxis")
	.attr("transform", "translate(" + padding + ",0)")
	.call(yAxis);
	}); // ends d3.csv()

	} // ends function link()
	return {
	link: link,
	restrict: 'E'
	//scope: { data: '=' }
	} // ends return
	}) // ends myApp.directive


	</script>

	</body>
	</html>