hyonschu/gist:d4c078a2eff3d2914711

## gistfile1.txt
<!DOCTYPE html>
<html>
<head>
  <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 = 600
            var height = 300
            var padding = 22
            var color = d3.scale.category10()


            charts = d3.select(element[0])
                .append("svg")
                .attr({
                    "height": height,
                    "width": width
                })
            d3.csv('iris.csv', function(data){
                //console.log(data)

                var xscale = d3.scale.linear().range([0,width]).domain(
                    [ function(d) { return d3.min(d.sepalW) } ,
                      function(d) { return d3.max(d.sepalW) } ]
                      )
                var yscale = d3.scale.linear().range([0,height]).domain([4,8])

                // generating charts
                charts.selectAll('g')
                    .data(data)
                    .enter()
                    .append("circle")
                    .attr("cx", function(d) { return xscale(d.sepalW) } )
                    .attr("cy", function(d) { return height-yscale(+d.sepalL)} )
                    .attr("r", 5)
                    .style("fill", function(d) { return color(d.species) })
            }); // 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>
	<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 = 600
	var height = 300
	var padding = 22
	var color = d3.scale.category10()


	charts = d3.select(element[0])
	.append("svg")
	.attr({
	"height": height,
	"width": width
	})
	d3.csv('iris.csv', function(data){
	//console.log(data)

	var xscale = d3.scale.linear().range([0,width]).domain(
	[ function(d) { return d3.min(d.sepalW) } ,
	function(d) { return d3.max(d.sepalW) } ]
	)
	var yscale = d3.scale.linear().range([0,height]).domain([4,8])

	// generating charts
	charts.selectAll('g')
	.data(data)
	.enter()
	.append("circle")
	.attr("cx", function(d) { return xscale(d.sepalW) } )
	.attr("cy", function(d) { return height-yscale(+d.sepalL)} )
	.attr("r", 5)
	.style("fill", function(d) { return color(d.species) })
	}); // ends d3.csv()

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


	</script>

	</body>
	</html>