maggie-lee · December 17, 2015 10:28
diff --git a/ccrpi.csv b/ccrpi.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <style>
 body {
  font: 10px sans-serif;
 }

 .grid .tick {
  stroke: #E5F5E0; 
  opacity: 0.1;
 }

 .grid path {
  stroke-width: 0;
 }

 .sidebar{}

 .dot {}

 .canvas {
  background-color: #E5F5E0;
  overflow: scroll;
 }

 div.tooltip {   
  position: absolute;           
  text-align: center;           
  width: 60px;                  
  height: 60px;                 
  padding: 2px;             
  font: 10px sans-serif;        
  background: #A1D99B;   
  border: 0px;      
  border-radius: 8px;           
  pointer-events: none;         
 }

 </style>
  <head>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
  </head>
  <body>
    <div id="main" height=650>
  	<script>
 //light green #E5F5E0
 //middle green #A1D99B
 //dark green #31A354
 //start with some variables
 var margin = {top: 20, right: 10, bottom: 20, left: 10};
 var width = 650 - margin.left - margin.right,
    height = 650 - margin.top - margin.bottom;
 console.log("ok line 33");

 //read in some data 
 d3.csv("ccrpi.csv", function(error, data) {

          data.forEach(function(d) {
            d.systemId = +d.SystemId,
            d.system = d.SystemName,
            d.schoolId = +d.SchoolId,
            d.schoolName = d.SchoolName,
            d.grades = d.GradeConfiguration,
            d.gradeCluster = d.GradeCluster,
            d.aPoints = +d.AchievementPoints, // score out of 70
            d.prPoints = +d.ProgressPoints,  //score out of 15
            d.agPoints = +d.AchievementGapPoints, // score out of 15
            d.cPoints = +d.TotalChallengePoints, //max 10
            d.score = +d.CCRPIScore
          })
  
 //filters:
       var filtered = data.filter(function(el) {
        return el.gradeCluster == "H" && //filter in high schools only
        isNaN(el.schoolId) == false && // filter out school system averages
        isNaN(el.score) == false ; //filter out "N/A"s

       });

 // and start drawing
          var svg = d3.select("body").append("svg")
            .attr("class", "canvas")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .style("overflow", "scroll")
        .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var x = d3.scale.linear()
            .range([0, 400])
            .domain([0, 1]);
        var y = d3.scale.linear()
            .range([height, 0])
            .domain(d3.extent(filtered, function (d) {return d.score;}));   
        var xAxis = d3.svg.axis()
          .scale(x)
          .orient("bottom");

        var div = d3.select("body").append("div")   
          .attr("class", "tooltip")               
          .style("opacity", 0);


        var dots = svg.selectAll(".dot")
            .data(filtered)
            .enter().append("circle")
             .attr("class", "dot")
            .attr("fill", "#31A354")
            .attr("stroke", "DimGray")
            .attr("opacity", 0.5)
            .attr("r", 4.5)
            .attr("cy", height/2)
            .attr("cx", function () {return x(Math.random());} )
            .attr("class", "dot")
            .attr("fill", "#31A354")
            .attr("stroke", "DimGray")
            .attr("opacity", 0.5)
            .attr("class", function (d) {return d.system + " dot";})
          .on("mouseover", function(d) {      
            div.transition()        
                .duration(200)      
                .style("opacity", .9);      
            div .html("<b>" + d.system + "</b></br>" + d.schoolName + "</br>" + d.score)  
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY - 28) + "px");    
            }) 
           .on("mouseout", function(d) {       
            div.transition()        
                .duration(500)      
                .style("opacity", 0);   });

          dots.transition()
            .transition()
            .duration(1500)
            .attr("cy", function (d) {return (y(d.score)); })

       
        //  now out of "filtered", we need an json object of just system names, no duplicates, to make the sidebar
        var sidebarArrayMaker = function (some_Array)
        {
        var sidebarArray = [];
        
        var len = some_Array.length;
        for (var i = 0; i < len; i++) {
        var obj = {
        system: some_Array[i].system,
        sortable: true,
        resizeable: true
        };
        sidebarArray.push(obj);
        };

        for( var i=0; i<sidebarArray.length-1; i++ ) {
        if ( sidebarArray[i].system == sidebarArray[i+1].system) 
        {
        delete sidebarArray[i];
        }
        }
        sidebarArray = sidebarArray.filter( function( el ){ return (typeof el !== "undefined"); } );

        {return sidebarArray}
      };
      //ok we've made an array of objects to use of as the sidebar:
      sidebarArray = (sidebarArrayMaker(filtered)); 
      console.log(sidebarArray);

        var systems = svg.selectAll(".rectangles")
          .data(sidebarArray)
          .enter().append("text") 
          .attr("x", 460)           
          .attr("y", function (d , i) {return i*12;})
          .attr("height", 10)
          .attr("width", 100)
          .style("font-size", "12px") 
          .style("text-anchor", "start")
          .text(function (d) {return d.system;})
          .attr("class", function (d) {return d.system + " sidebar";})
          .on("click", function(d) {
          d3.selectAll(".sidebar").style("fill", "#31A354"); 
          d3.selectAll(".dot").style("fill", "#31A354");
          d3.selectAll("." + d.system).style("fill", "red");
          })
          .on("mouseout", function (d) {
            console.log("mouse upped");

        });
          
 });



 //Some school names have been abbreviated because they are so long.
 //x axis is percentage, not raw points
 //thanks to d3Vinno on YouTube http://www.youtube.com/user/d3Vienno
 //thanks to the d3js community and this link expecially for one-to-many mappings http://stackoverflow.com/questions/11206015/clicking-a-node-in-d3-from-a-button-outside-the-svg/11211391#11211391

    </script>
  </div>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<style>
	body {
	font: 10px sans-serif;
	}

	.grid .tick {
	stroke: #E5F5E0;
	opacity: 0.1;
	}

	.grid path {
	stroke-width: 0;
	}

	.sidebar{}

	.dot {}

	.canvas {
	background-color: #E5F5E0;
	overflow: scroll;
	}

	div.tooltip {
	position: absolute;
	text-align: center;
	width: 60px;
	height: 60px;
	padding: 2px;
	font: 10px sans-serif;
	background: #A1D99B;
	border: 0px;
	border-radius: 8px;
	pointer-events: none;
	}

	</style>
	<head>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	</head>
	<body>
	<div id="main" height=650>
	<script>
	//light green #E5F5E0
	//middle green #A1D99B
	//dark green #31A354
	//start with some variables
	var margin = {top: 20, right: 10, bottom: 20, left: 10};
	var width = 650 - margin.left - margin.right,
	height = 650 - margin.top - margin.bottom;
	console.log("ok line 33");

	//read in some data
	d3.csv("ccrpi.csv", function(error, data) {

	data.forEach(function(d) {
	d.systemId = +d.SystemId,
	d.system = d.SystemName,
	d.schoolId = +d.SchoolId,
	d.schoolName = d.SchoolName,
	d.grades = d.GradeConfiguration,
	d.gradeCluster = d.GradeCluster,
	d.aPoints = +d.AchievementPoints, // score out of 70
	d.prPoints = +d.ProgressPoints, //score out of 15
	d.agPoints = +d.AchievementGapPoints, // score out of 15
	d.cPoints = +d.TotalChallengePoints, //max 10
	d.score = +d.CCRPIScore
	})

	//filters:
	var filtered = data.filter(function(el) {
	return el.gradeCluster == "H" && //filter in high schools only
	isNaN(el.schoolId) == false && // filter out school system averages
	isNaN(el.score) == false ; //filter out "N/A"s

	});

	// and start drawing
	var svg = d3.select("body").append("svg")
	.attr("class", "canvas")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.style("overflow", "scroll")
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var x = d3.scale.linear()
	.range([0, 400])
	.domain([0, 1]);
	var y = d3.scale.linear()
	.range([height, 0])
	.domain(d3.extent(filtered, function (d) {return d.score;}));
	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);


	var dots = svg.selectAll(".dot")
	.data(filtered)
	.enter().append("circle")
	.attr("class", "dot")
	.attr("fill", "#31A354")
	.attr("stroke", "DimGray")
	.attr("opacity", 0.5)
	.attr("r", 4.5)
	.attr("cy", height/2)
	.attr("cx", function () {return x(Math.random());} )
	.attr("class", "dot")
	.attr("fill", "#31A354")
	.attr("stroke", "DimGray")
	.attr("opacity", 0.5)
	.attr("class", function (d) {return d.system + " dot";})
	.on("mouseover", function(d) {
	div.transition()
	.duration(200)
	.style("opacity", .9);
	div .html("<b>" + d.system + "</b></br>" + d.schoolName + "</br>" + d.score)
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY - 28) + "px");
	})
	.on("mouseout", function(d) {
	div.transition()
	.duration(500)
	.style("opacity", 0); });

	dots.transition()
	.transition()
	.duration(1500)
	.attr("cy", function (d) {return (y(d.score)); })


	// now out of "filtered", we need an json object of just system names, no duplicates, to make the sidebar
	var sidebarArrayMaker = function (some_Array)
	{
	var sidebarArray = [];

	var len = some_Array.length;
	for (var i = 0; i < len; i++) {
	var obj = {
	system: some_Array[i].system,
	sortable: true,
	resizeable: true
	};
	sidebarArray.push(obj);
	};

	for( var i=0; i<sidebarArray.length-1; i++ ) {
	if ( sidebarArray[i].system == sidebarArray[i+1].system)
	{
	delete sidebarArray[i];
	}
	}
	sidebarArray = sidebarArray.filter( function( el ){ return (typeof el !== "undefined"); } );

	{return sidebarArray}
	};
	//ok we've made an array of objects to use of as the sidebar:
	sidebarArray = (sidebarArrayMaker(filtered));
	console.log(sidebarArray);

	var systems = svg.selectAll(".rectangles")
	.data(sidebarArray)
	.enter().append("text")
	.attr("x", 460)
	.attr("y", function (d , i) {return i*12;})
	.attr("height", 10)
	.attr("width", 100)
	.style("font-size", "12px")
	.style("text-anchor", "start")
	.text(function (d) {return d.system;})
	.attr("class", function (d) {return d.system + " sidebar";})
	.on("click", function(d) {
	d3.selectAll(".sidebar").style("fill", "#31A354");
	d3.selectAll(".dot").style("fill", "#31A354");
	d3.selectAll("." + d.system).style("fill", "red");
	})
	.on("mouseout", function (d) {
	console.log("mouse upped");

	});

	});



	//Some school names have been abbreviated because they are so long.
	//x axis is percentage, not raw points
	//thanks to d3Vinno on YouTube http://www.youtube.com/user/d3Vienno
	//thanks to the d3js community and this link expecially for one-to-many mappings http://stackoverflow.com/questions/11206015/clicking-a-node-in-d3-from-a-button-outside-the-svg/11211391#11211391

	</script>
	</div>
	</body>
	</html>