Refactor Project zzz

forked from RobertDelgado's block: Refactor Project

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3-legend/1.1.0/d3-legend.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .topMarks {}
    .topMarks1990 {}
    .topMarks1991 {}
    .topMarks1992 {}
    .topMarks1993 {}
    .topMarks1994 {}
    .topMarks1995 {}
    .topMarks2001 {}
    .bottomMarks {}
    .bottomMarks1990 {}
    .bottomMarks1991 {}
    .bottomMarks2001 {}
    .bottomMarks:hover{stroke:gray; stroke-width:.15em;}
    .connectingMarks {}
    .connectingMarks1990 {}
    .connectingMarks2001 {}
    .annotation{}
    .xAxis, .yAxis {}
    .xAxis1990, .yAxis1990 {}
    .xAxis2001, .yAxis2001 {}
	.floatingLabel {}
    .floatingLabel1990 {}
    .floatingLabel2001{}
	.graphContainer {}

.textMarker{}
   .tooltip{
  position: absolute;           
  text-align: center;           
  width: 60px;                  
  height: 28px;                 
  padding: 2px;             
  font: 12px sans-serif;        
  background: lightsteelblue;   
  border: 0px;      
  border-radius: 8px;           
  pointer-events: none; 
    }

</style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!

var height = 500;
    var width = 10000;
    var margin = {top: 20, bottom: 20, left:50, right:20};
    var innerHeight = height - margin['top'];
    var innerWidth = height - margin['left'];

function generalUpdate(obj, elt, data,  attributes)
	{
			var className  = ((elt.hasOwnProperty('cl'))? elt.class: elt.obj);
			var output = obj.selectAll(className)
							.data(data);

return(output)
	
	};
	
  function generalEnter(obj, elt, attributes)
  {
    var output = obj.enter().append(elt.obj);
	if(elt.hasOwnProperty('class'))
		output = output.attr('class', elt.class);
    return(output)
  };  
    
	
function attributes(obj, attributes)
{
var output = obj;
	for(var name in attributes)
    {
		if( attributes.hasOwnProperty(name))
		{
            output = output.attr(name, attributes[name]);
        };
    };
	return(output);
}

function render(data)
    {

svg = generalEnter(svg, {obj: 'svg'} ); //Why do I need this here and not after svg declaration?
	  svg = attributes(svg,{height:height,width:width} );

var exitFunct = function(objs)
{
	for(name in objs)
    {
      if(objs.hasOwnProperty(name))
       {
         objs[name].exit().remove();
       }
    }
  
  
  
}

var group = generalUpdate(svg, {obj:'g', cl: '.graphContainer'},[null]);
		group = attributes(group, {height:graphHeight
                                          , width: graphWidth
                                          , transform:translateString})
                               //`translate(${margin['left']}, ${margin['top'] -10})`  });

group = generalEnter(group, {obj: 'g'}, {height:graphHeight
                                          , width: graphWidth
                                          , transform:translateString});

group = attributes(group, {height:graphHeight
                                          , width: graphWidth
                                 					, transform: translateString});

var yAxis = d3.axisLeft()
      						.scale(yScale)
      						.ticks(5)
      						.tickSize(width/100 + ' em')
      						.tickFormat(d3.format('.0s'))
      						;
      
      
      
      xAxisG.call(xAxis);
      yAxisG.call(yAxis);
  
  		return({svgObj : svg, groupObj: group, topMarksObj: topMarks, connectingMarksObj: connectingMarks, bottomMarksObj: bottomMarks, annotationObj: annotation});

//svg.call(zoom);
  
  
  
  
}
    var obj2001 = makeChart(data, 2001, 'translate(20, -50)');
    var obj1990 = makeChart(data, 1995, 'translate(550, -40)');
      
        ///For zooming  
     
	function zoomed() {
	  svg.attr("transform", d3.event.transform);
	  //gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
	  //gY.call(yAxis.scale(d3.event.transform.rescaleY(y)));
	}

//for zooming
  function resetted() {
    svg.transition()
        .duration(750)
        .call(zoom.transform, d3.zoomIdentity);
  }

///For zooming 
	 var zoom = d3.zoom()
    .scaleExtent([1, 40])
    .translateExtent([[-100, 0], [width + 9000, height]])
    .on("zoom", zoomed);
	
	
	
      
    exitFunct(obj2001);
    exitFunct(obj1990);
    }
  
   var rows = function(d){
     d.Country = d.Country;
     d.Year = +d.Year;
     d.GHG = +d.GHG;
     d.GHG_Cum = +d.GHG_Cum;
     d.Population = +d.Population;
     d.Final_Rank = +d.Final_Rank;
     return(d);};
   
d3.csv('Data3.csv', rows, function(array){return(render(array));})

</script>
</body>

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

https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.1.0/d3-legend.js