Refactor Project with pan & zoom2

forked from RobertDelgado's block: Refactor Project with pan & zoom

forked from RobertDelgado's block: Refactor Project with pan & zoom2

<!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 {}
    .bottomMarks {}
    .bottomMarks:hover{stroke:gray; stroke-width:.15em;}
    .connectingMarks {}
    .annotation{}
    .xAxis, .yAxis {}
	.floatingLabel {}
	.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 = 960;
    var margin = {top: 30, bottom: 100, left:50, right:20};
    var innerHeight = height - margin['top'] - margin['bottom'];
    var innerWidth = height - margin['left'] - margin['right'];

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);
}

//for zooming
function resetted() {
  svg.transition()
      .duration(750)
      .call(zoom.transform, d3.zoomIdentity);
}
	
	
    function render(data, year1)
    {
      var numberOfCountries = 10;
      data = data.sort(function(x,y){return(x.Final_Rank - y.Final_Rank);});
      data = data.filter(function(d){return d.Final_Rank <= numberOfCountries;});
      var xValue = d => d.Country;//function(d){return d.Country;}
      var xScale = d3.scaleBand().padding(.90);
      		xScale.domain(data.map(xValue))
          .range([0,innerWidth]);
      
      var yScale = d3.scaleLinear().domain([0,d3.max(data, d => d.GHG_Cum) + 1000])
      							.range([innerHeight,0]);
      
      
			data = data.filter(function(d){return d.Year == year1; });
      
      //console.log(data);
      
     var yValueBottom = d => d.GHG_Cum - d.GHG;
     var yValueTop = d  => d.GHG_Cum
      
      
     var body = d3.select('body');
     var svg = generalUpdate(body, {obj:'svg'}, [null], {height:height,width:width});
		 svg = attributes(svg,{height:height,width:width} );

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

var floatingLabel = svg
      	.selectAll('.floatingLabel')
      	.data([null]);
				
				
      floatingLabel = floatingLabel.enter()
      		.append('g')
      				.attr("class", "floatingLabel")
    					.style("display", "none");
		floatingLabel.append("rect")
			.attr("width", 60)
			.attr("height", 20)
			.attr("fill", "white")
			.style("opacity", .5);
			
		var floatingText = floatingLabel.append("text")
			.attr("x", 30)
			.attr("dy", "1.2em")
			.style("text-anchor", "middle")
			.attr("font-size", "12px")
			.attr("font-weight", "bold");
			
		var popMarker = floatingText.append('tspan');
		var cumGHGMarker = floatingText.append('tspan');

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

group = generalEnter(group, {obj: 'g'}, {height:innerHeight
                                          , width: innerWidth
                                          , transform: `translate(${margin['left']+20}, ${margin['top'] -60})`  });
										  
			group = attributes(group, {height:innerHeight
                                          , width: innerWidth
                                          , transform: `translate(${margin['left'] + 20}, ${margin['top'] -10})`  });
      
    ///For zooming  
     
	function zoomed() {
	  group.attr("transform", d3.event.transform);
	  //xAxisG.call(xAxis.scale(d3.event.transform.rescaleX(x)));
	  //yAxisG.call(yAxis.scale(d3.event.transform.rescaleY(y)));
	}

///For zooming 
	 var zoom = d3.zoom()
    .scaleExtent([1, 40])
    .translateExtent([[-100, 0], [width + 9000, height]])
    .on("zoom", zoomed);

var xAxis = d3.axisBottom()
      							.scale(xScale)
                    .ticks(5)
      							.tickSize(width/50 + ' em');

</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