hyonschu/gist:aaa1fee9673c84dc9118

## 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" ng-controller="MainCtrl">


  <iris-chart data="petalL"></iris-chart>
    <!-- <iris-chart data="sepalW"></iris-chart> -->
  <!-- <iris-chart data='sepalW'></iris-chart> -->
  <script>
    var myApp = angular.module('myApp', []);

    myApp.controller('MainCtrl', function($scope, $http){
          // using success/error callback style
          // $http.get('iris.csv').success(function(data){
          //   $scope = d.sepal;
          // }).error(function(err){
          //   throw err;
          // });
          // using `then()` callback style
          $http.get('iris.csv').then(function(response){
            $scope = response.data;
          }, function(err){
            throw err;
          });
        });


    myApp.directive('irisChart', function(){
        function link (scope, element, attr) {

            var width = 800;
            var height = 450;
            var padding = 30
            var color = d3.scale.category10()
            charts = d3.select("body")
                .append("svg")
                .attr({
                    "height": height,
                    "width": width
                })

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


                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.sepalW)} )
                    .attr("r", (4))
                    .style("fill", function(d) { return color(d.species) })
                    .on("mouseover", function(d) {
                            d3.select(this)
                            .append("svg:title")
                            .text(
                                function(d) { return d.Name
                            })
                        })


                //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>
    <div class = 'change'> click here </div>
    </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" ng-controller="MainCtrl">


	<iris-chart data="petalL"></iris-chart>
	<!-- <iris-chart data="sepalW"></iris-chart> -->
	<!-- <iris-chart data='sepalW'></iris-chart> -->
	<script>
	var myApp = angular.module('myApp', []);

	myApp.controller('MainCtrl', function($scope, $http){
	// using success/error callback style
	// $http.get('iris.csv').success(function(data){
	// $scope = d.sepal;
	// }).error(function(err){
	// throw err;
	// });
	// using `then()` callback style
	$http.get('iris.csv').then(function(response){
	$scope = response.data;
	}, function(err){
	throw err;
	});
	});




	myApp.directive('irisChart', function(){
	function link (scope, element, attr) {

	var width = 800;
	var height = 450;
	var padding = 30
	var color = d3.scale.category10()
	charts = d3.select("body")
	.append("svg")
	.attr({
	"height": height,
	"width": width
	})

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


	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.sepalW)} )
	.attr("r", (4))
	.style("fill", function(d) { return color(d.species) })
	.on("mouseover", function(d) {
	d3.select(this)
	.append("svg:title")
	.text(
	function(d) { return d.Name
	})
	})



	//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>
	<div class = 'change'> click here </div>
	</body>
	</html>