Parcial Bonus

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .bars{
      z-index:-1
    }
  </style>
</head>

<body>
  <script>
d3.csv("dataparcialcsv.csv", function(d){

dataset = d.map(function(d) { return [ d["Entity"], d["METHOD OF LEAK"], 																					Number(d["records lost"].replace(/,/g, '')), 																				2004+Number(d["YEAR"])]; });
  		var dataset_=[];
  		var _dataset = [];
      var years = {};
      for(i=0;i<dataset.length;i++){
        var entry = dataset[i];
        var year = entry[3]
        if(!(year in years)){
          for(j=0;j<dataset.length;j++ ){          
        		var _entry = dataset[j];
        		var _year = _entry[3]
           	if(year==_year){
           		var item = {
              	"entity": _entry[0],
        				"method": _entry[1],
        				"records": _entry[2],
              	"year": _entry[3]
    						};              
          		_dataset.push(item);
        		}
        	}
          var data={
            "data":_dataset
          } 
        	dataset_.push(data);
        	_dataset = [];
        	years[year]=true;
        }
      }
  		var mayor = 0;
  		var tem = 0;
  		var year=0;
 			var 
  		for(i=0;i<dataset_.length;i++){
       	for(j=0;j<dataset_[i].data.length;j++){
          tem = dataset_[i].data[j].records;
          if(tem>mayor){
            mayor = tem;
          }
          year = dataset_[i].data[j].year;
        } 
        var item ={
          'year':year,
          'mayor':mayor
        }
      }
  	//console.log(dataset_[2]) 
  	//	var barsData = [2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 
                     //2013, 2014, 2015, 2016, 2017]
      var BAR_HEIGHT = 30;
      var width = 960;
      var height = 500;
      var margin = {top: 20, right: 20, bottom: 70, left: 40};
      var wScale = d3.scaleLinear()
			.range([0, width]);
  
			var hScale = d3.scaleLinear()
			.range([0, height]);
               
      var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
       
      wScale.domain([0,100000000]);
      hScale.domain([2004, 2017]);
      
    	var bars = svg.selectAll(".bars")
			.data(barsData);
    
  		var barsEnter = bars.enter()
  		.append("rect")
    	.attr("class", "bars")
    	.attr("width", 0)
      .style('z-index',-1);
 
      bars.merge(barsEnter)
  		.attr("x", 0)
    	.attr("y", function(d, i) { 
        return (BAR_HEIGHT*(i-1))      
      })
    	.attr("width", function(d,i) { 
        return 40;     
      })   
    	.attr("height", function(d,i) { 
        return BAR_HEIGHT-1         
      })
      .style("fill", "#EEEEEE");

var circles = svg.selectAll(".circle")
			.data(dataset);

var circlesEnter = circles.enter()
  		.append("circle")
    	.attr("class", "circle")
    	.attr("width", 0);
  
   		circles.merge(circlesEnter)
    	.attr("r",5)
    	.style("fill",function(d){  
        
      	if(d[1]=='hacked'){
          return 'red'
        }else if(d[1]=='leak'){
            return 'yellow'
				}    
        else if(d[1]=='inside job'){
            return '#4CAF50'
				} 
        else if(d[1]=='lost / stolen media'){
            return 'green'
				} 
        else if(d[1]=='lost / stolen computer'){
            return '#2196F3'
				}
        else if(d[1]=='accidentally published'){
            return 'blue'
				}  
        else if(d[1]=='poor security'){
            return '#795548'
				}else{
          console.log(d[1])
          return '#9C27B0'
        }

}) 
   		.attr('cx',function(d,i){
        if(!(isNaN(d[2]))){
          return wScale(d[2]);  
        }else{       
          return 0;
        }
  	}) 
   	.attr('cy',function(d,i){
        
          if(d[3]==2004){
            return ((BAR_HEIGHT*1))/2;
          }
          if(d[3]==2005){
            return (BAR_HEIGHT/2)+(BAR_HEIGHT*1);
          }
          if(d[3]==2006){
            return (BAR_HEIGHT/2)+(BAR_HEIGHT*2);
          }
          if(d[3]==2007){
            return (BAR_HEIGHT/2)+(BAR_HEIGHT*3);
          }
          if(d[3]==2008){
            return (BAR_HEIGHT/2)+(BAR_HEIGHT*4);
          }
          if(d[3]==2009){
            return (BAR_HEIGHT/2)+(BAR_HEIGHT*5);
          }
          if(d[3]==2010){
            return (BAR_HEIGHT/2)+(BAR_HEIGHT*6);
          }
          if(d[3]==2011){
            return (BAR_HEIGHT/2)+(BAR_HEIGHT*7);
          }
        	if(d[3]==2012){
            return (BAR_HEIGHT/2)+(BAR_HEIGHT*8);
          }
        	if(d[3]==2013){
            return (BAR_HEIGHT/2)+(BAR_HEIGHT*9);
          }
        	if(d[3]==2014){
            return (BAR_HEIGHT/2)+(BAR_HEIGHT*10);
          }
        	if(d[3]==2015){
            return (BAR_HEIGHT/2)+(BAR_HEIGHT*11);
          }
        	if(d[3]==2016){
            return (BAR_HEIGHT/2)+(BAR_HEIGHT*12);
          }
          
  	})  
})
        
        
  </script>
</body>

https://d3js.org/d3.v4.min.js