Refactor Project zzz3

forked from RobertDelgado's block: Refactor Project

forked from RobertDelgado's block: Refactor Project zzz

forked from RobertDelgado's block: Refactor Project zzz2

<!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; }
        body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .xAxisText, .yAxisText{font-size: 30}
    .popObj {}
    .outerGroup {}
    .popObj1990 {}
    .popObj1991 {}
    .popObj1992 {}
    .popObj1993 {}
    .popObj1994 {}
    .popObj1995 {}
    .popObj1996 {}
    .popObj1997 {}
    .popObj1998 {}
    .popObj1999 {}
    .popObj2000 {}
    .popObj2001 {}
    .popObj2002 {}
    .popObj2003 {}
    .popObj2004 {}
    .popObj2005 {}
    .popObj2006 {}
    .popObj2007 {}
    .popObj2008 {}
    .popObj2009 {}
    .popObj2010 {}
    .popObj2011 {}
    .popObj2012 {}
    .popObj2013 {}
    .popGroup {}
    .stem1990 {}
    .stem1991 {}
    .stem1992 {}
    .stem1993 {}
    .stem1994 {}
    .stem1995 {}
    .stem1996 {}
    .stem1997 {}
    .stem1998 {}
    .stem1999 {}
    .stem2001 {}
    .stem2002 {}
    .stem2003 {}
    .stem2004 {}
    .stem2005 {}
    .stem2006 {}
    .stem2007 {}
    .stem2008 {}
    .stem2009 {}
    .stem2010 {}
    .stem2011 {}
    .stem2012 {}
    .stem2013 {}

.floatingLabel {}
    .Year {}

.textMarker{}
	
	
	
	      #chart {
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
      }
	  
	  
	  
   .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>

//var height = 500;
   //var width = 960;

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

return(output)
	
	};
	
  function generalEnter(obj, elt)
  {
    var output = obj.enter().append(elt.obj);
	if(elt.hasOwnProperty('cl'))
		output = output.attr('class', elt.cl);
  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);
}
    
var chartDiv = document.getElementById("chart");

var yValueBottom = d => d.GHG_Cum - d.GHG;
     var yValueTop = d  => d.GHG_Cum
      
      
     var body = d3.select('div');
     /*var svg = generalUpdate(body, {obj:'svg'}, [null]);
		 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 svg = body.selectAll('svg').data([null]);
	  svg = svg.enter().append('svg');
	  svg = svg.merge(svg)
				.attr('height', height)
				.attr('width', width);
				
	  svg.exit().remove();
	  
	  /*var graphTitle = generalUpdate(svg,{obj: 'text', cl: '.graphTitle'}, [null]);
	  graphTitle = generalEnter(graphTitle, {obj: 'text', cl: '.graphTitle'});
	  graphTitle = graphTitle.merge(graphTitle);
	  graphTitle = graphTitle.text(Math.ceil(year))
							.attr('fill', 'black')
							.attr('font-size', '4em')
							.attr('y', 50)
							.attr('x', 200);*/
							
	 var graphTitle = svg.selectAll('text').data([null]);
	 graphTitle = graphTitle.enter().append('text')
					.attr('class', '.graphTitle');
	 graphTitle = graphTitle.merge(graphTitle)
					.text(Math.ceil(year))
					.attr('fill', 'black')
					.attr('font-size', '4em')
					.attr('y', 50)
					.attr('x', 200);
	  
	  graphTitle.exit().remove();
      
      
      /*var outerGroup = generalUpdate(svg, {obj: 'g'}, [null]);
      outerGroup = generalEnter(outerGroup, {obj: 'g', cl:'.outerGroup'});
      outerGroup = attributes(outerGroup, {height: innerHeight
                                           , width: innerWidth
                                           , transform: `translate(${margin['left']}, ${margin['top'] -100})`});
      outerGroup = outerGroup.merge(outerGroup);*/
	  
	  var outerGroup  = svg.selectAll('.outerGroup').data([null]);
	  outerGroup = outerGroup.enter()
						.append('g')
						.attr('class', 'outerGroup');
						
	  outerGroup = outerGroup.merge(outerGroup)
						.attr('height', innerHeight)
						.attr('width', innerHeight)
						.attr('transform', `translate(${margin['left']}, ${margin['top'] -100})`);

outerGroup.exit().remove();
	  
	  
      
	  /*var xAxisG = generalUpdate(outerGroup, {obj: 'g', cl:'.xAxisG'}, [null]);
	  xAxisG = generalEnter(xAxisG, {obj: 'g', cl:'.xAxisG'});
	  xAxisG = xAxisG.merge(xAxisG);
	  xAxisG.append('text')
			.text('Country')
			.attr('stroke','black')
			.attr('transform',`translate(${innerWidth/2},${innerHeight/10})`);
			
			
	  xAxisG = xAxisG.attr('transform', `translate(0,${innerHeight})`)*/
	  var xAxisG = outerGroup.selectAll('.xAxisG').data([null]);
	  xAxisG = xAxisG.enter().append('g')
					.attr('class', 'xAxisG');
	  xAxisG = xAxisG.merge(xAxisG);
	  xAxisG.append('text')
					 .text('Country')
					 .attr('stroke', 'black')
					.attr('transform',`translate(${innerWidth/2},${innerHeight/10})`);
					
					
	  xAxisG = xAxisG.attr('transform', `translate(0,${innerHeight})`);
	  
	  xAxisG.exit().remove();
	  
	  var xAxis = d3.axisBottom(xScale);

/* var yAxisG = generalUpdate(outerGroup, {obj: 'g', cl:'.yAxisG'}, [null]);
	  yAxisG = generalEnter(yAxisG, {obj: 'g', cl:'.yAxisG'});
	  yaxisG = xAxisG.merge(yAxisG);
	  //yAxisG.attr('transform', 'rotate(-90)');
	  yAxisG.append('text')
	  				.text('GHG emissions (tonnes)')
					.attr('stroke','black')
					.attr('transform', 'rotate(-90)')
					.attr('x',-innerHeight/2.5)
					.attr('y', -55);*/
					
	var yAxisG = outerGroup.selectAll('.yAxisG').data([null]);
	yAxisG = yAxisG.enter()
				.append('g')
				.attr('class', 'yAxisG')
				
	yAxisG = yAxisG.merge(yAxisG);
	
	yAxisG.append('text')
	  				.text('GHG emissions (tonnes)')
					.attr('stroke','black')
					.attr('transform', 'rotate(-90)')
					.attr('x',-innerHeight/2.5)
					.attr('y', -55);				
					
	yAxisG.exit().remove();
					
	  
	  var yAxis = d3.axisLeft(yScale);
	  
      
      
     var topYear = Math.max(Math.min(2013, Math.ceil(year)), 1990);
     var linkData = data.filter(function(d){return(d.Year == topYear);})
      
      //console.log(linkData);

popObj.on('mouseover', function(d){
        d3.select(this).select('circle').attr('fill', 'rgba(0,0,255,.2)');
        d3.select(this).select('text')
          .text(d => "Pop: " + Math.round(d.Population/1000000) + "M , Cum GHG: " + Math.round(d.GHG_Cum/1000) + 'K tonnes')
        	.attr('y',-40)
        	.attr('x', 50)
          .style('display',null);
          
        //var thisYear = d3.select(this).attr('cx');
        //console.log(d3.select(this).data()[0]);

})
        .on('mouseout', function(d){
          //d3.select(this).select('circle').attr('fill', 'rgba(10, 10, 10, .1)');
		  
		  d3.select(this).select('circle').attr('fill', 'rgba(10, 10, 10, .1)');
          d3.select(this).select('text').style('display','none');
        })
     ;
      
      
      /*popObj = popObj.append('text')
      								.text('Hello')
      								.style('display','none');*/
      
      popObj.exit().remove();      
      
	  
	var countryData = data.filter(function(d){return(d.Year == year);});
		countryData = countryData.sort(function(a,b){return a.Year - b.Year;})

var yScaleSide = d3.scaleLinear().domain([0,12000])
									 .range([innerHeight/2.5,0]);
									 
	var xScaleSide = d3.scaleLinear().domain([1990, 2013])
									.range([0,innerWidth/2.5]);
	
	
	var line = d3.line()
		.curve(d3.curveLinear)
		.x(function(d){ //console.log(d.Year); 
		return xScaleSide(d.Year);})
		.y(function(d){ return yScaleSide(d.GHG); });

var yAxisGLine = generalUpdate(sideVizG, {obj: 'g', cl:'.yAxisGLine'}, [null]);
	  yAxisGLine = generalEnter(yAxisGLine, {obj: 'g', cl:'.yAxisGLine'});
	  yaxisGLine = yAxisGLine.merge(yAxisGLine);
	  //yAxisG.attr('transform', 'rotate(-90)');
	  yAxisGLine.append('text')
	  				.text('GHG emissions (tonnes)')
					.attr('stroke','black')
					.attr('transform', `rotate(-90)`)
					.attr('x',-innerHeight/20)
					.attr('y', -45);  
					
	yAxisGLine.exit().remove();
	
	var yAxisLine = d3.axisLeft(yScaleSide);

var bandwidthFactor = 1.08
     var stemObjBottom = {};
     for(var yr = 1990; yr < year; yr++)
     {
       stemObjBottom[yr] = outerGroup.selectAll('.stem'  + yr).data([null]);
       stemObjBottom[yr] = stemObjBottom[yr].enter().append('g')
         						.attr('class','stem' + yr);
       stemObjBottom[yr]
	   .merge(stemObjBottom[yr])
		
       stemObjBottom[yr].exit().remove();

}
    for(var yr = 1990; yr < year; yr++)
     {
       
       var yearData = data.filter(function(d){return(d.Year == yr);})

var circleObjs = stemObjBottom[yr].selectAll('circle').data(yearData);
       circleObjs =circleObjs.enter().append('circle')
       									.attr('r',3)
       									//.attr('fill','rgba(0,0,0,.2)')
										.attr('fill', function(d){return colorScale(d.Country);})
       									.attr('cx',d => xScale(xValue(d)) + xScale.bandwidth()/2)
       									.attr('cy', d =>{return yScale(d.GHG_Cum);});

circleObjs.exit().remove();
	  
      var linkObj = stemObjBottom[yr].selectAll('.link').data(yearData);
      linkObj = linkObj.enter()
      				.append('line')
						.attr('x1',function(d){return(xScale(d.Country) + xScale.bandwidth()/2);})
      					.attr('x2',function(d){return(xScale(d.Country) + xScale.bandwidth()/2);})
      					.attr('y1', function(d){return(yScale(d.GHG_Cum));})
      					.attr('y2', function(d){return(yScale(d.GHG_Cum - d.GHG));})
      					.attr('stroke-dasharray', '5,4')
      					.attr('stroke', 'black')
						.attr('stroke', function(d){return colorScale(d.Country);})
      					.attr('stroke-width', 1);
       
       
       stemObjBottom[yr].on('mouseover',function(d){
        var className = "stem" + yr
        d3.select(this).selectAll('circle')
          //.attr("fill", "blue")
        	.attr('r',6);
         
        d3.select(this).selectAll('line')
        	.attr('stroke-width', 3)
        	//.attr('stroke', 'blue')
        	.attr('stroke-dasharray','none');
        	//.attr('r',d=>{return(Math.sqrt(d.Population/(1000000)));})
			
			
			
        var tempData = d3.select(this).selectAll('circle').data();
        
		/*floatingTSpan = floatingText.selectAll('tspan').data(tempData);
         		floatingTSpan = floatingTSpan.enter().append('tspan')
				floatingTSpan = floatingTSpan.merge(floatingTSpan);
				floatingTSpan = floatingTSpan
									.attr('x', 0)
									.attr('dy', '1.4em')
            						.text(function(d){
              return(d.Country + ', GHG: ' + Math.round(d.GHG/1000) + ' K tonnes' );})
									.attr('stroke', 'black')
									.attr('stroke-width', 2)
            						.attr('fill', 'black')
            						.attr('font-size', '1.5em');
									
				floatingTSpan.exit().remove();*/
       })       
       .on('mouseout',function(d){
        var className = "stem" + yr;
		var country = d3.select(this).selectAll('circle').data();
		//console.log(country);
		//var color = colorScale(d3.select(this).data().Country);
		 
        d3.select(this).selectAll('circle')
			//.attr('fill', function(d){return(colorScale(d.Country));})
          //.attr("fill", 'rgba(0,0,0,.2)')
        	.attr('r',3);
       	d3.select(this).selectAll('line')
        	.attr('stroke-width', 1)
        	//.attr('stroke', 'black')
			//.attr('stroke',color)
        	.attr('stroke-dasharray', '5,4');

})
      stemObjBottom[yr].exit().remove();

};

xAxisG.call(xAxis)
	 .selectAll('.tick text')
	 .attr('transform','rotate(-45)');
	 
	 yAxisG.call(yAxis);
	 xAxisGLine.call(xAxisLine)
	 .selectAll('.tick text')
	 .attr('transform','rotate(-45)');
	 
	 yAxisGLine.call(yAxisLine);
    
     /*var stemObjTop = generalUpdate(outerGroup,{obj:"rect", cl:".stem" + Math.ceil(year)}, fYearData);
     stemObjTop = generalEnter(stemObjTop, {obj:"rect", cl:".stem" + Math.ceil(year)});
     stemObjTop = stemObjTop.merge(stemObjTop);
     stemObjTop = attributes(stemObjTop, {width: xScale.bandwidth() * bandwidthFactor
                                         , height:function(d){return(yScale( (1-factor) * d.GHG));}
                                         , x: d=>xScale(xValue(d))
                                         , y: function(d){return(yScale((d.GHG_Cum - d.GHG) + factor * d.GHG ));}
                                         , stroke: "black"
                                         , fill: "none"});
      
      
      stemObjTop.exit().remove();*/

/*var popObj = generalUpdate(outerGroup, {obj:"g", cl:".popObj"}, fYearData);
     popObj = generalEnter(popObj, {obj:"g", cl:".popObj"})
     popObj = popObj.merge(popObj);
     popObj = attributes(popObj,{transform: function(d){return( 
      									'translate('+ (xScale(d.Country)+ xScale.bandwidth()/2) + ','  + yScale(d.GHG_Cum - d.GHG + factor * d.GHG)  + ')');}
                                , stroke: "black"
                                , 'stroke-dasharray': '5,5'}
                                );*/

}

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