D3 Examples - Parcial Bonus

xxxxxxxxxx
 
<!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>
​
    