Project Prototype 5

forked from RobertDelgado's block: Project Prototype 2

forked from RobertDelgado's block: Project Prototype 3

forked from RobertDelgado's block: Project Prototype 4

<!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 {}
    .connectingMarks {}
    .annotation{}
    .xAxis, .yAxis {}
    
    .topMarks:hover {
      fill: orange;
    }

</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: 20, bottom: 20, left:50, right:20};
    var innerHeight = height - margin['top'];
    var innerWidth = height - margin['left'];

var xPosition = parseFloat(d3.select(this).attr("cx")) //+ xScale.bandwidth() / 2;
					var yPosition = parseFloat(d3.select(this).attr("cy")) / 2 //+ height / 2;
          console.log(xPosition)

d3.select("#tooltip")
						.style("left", xPosition + "px")
						.style("top", yPosition + "px")
						.select("#value")
						.text(d);

d3.select("#tooltip").classed("hidden", false);

})
			   .on("mouseout", function() {

d3.select("#tooltip").classed("hidden", true);

})
			   .on("click", function() {
			   		sortBars();
			   });

;
      
      var bandwidth = xScale.bandwidth();
      var connectingMarks = group.selectAll('.connectingMarks').data(data);
      		connectingMarks = connectingMarks.enter()
          									.append('rect')
          									.attr('class', 'connectingMarks')
          									.merge(connectingMarks)
          									.attr('x', function(d){return xScale(xValue(d));})
														.attr('y', function(d){return yScale(yValueTop(d));})  
          									.attr('width', function(d){return xScale.bandwidth();})
          									.attr('height', function(d){return innerHeight - yScale(yValueTop(d) - yValueBottom(d));})
          									.append('svg:title')
          									.text(function(d){return "Country: "  + d.Country
                                             							+ "\n" + d.Year + " GHG emissions: "
                                             							+ d.GHG + " tonnes.";});
          									
          									
      var bottomMarks = group.selectAll('.bottomMarks').data(data);
      		bottomMarks = bottomMarks.enter()
          							.append('line')
          							.attr('class', 'bottomMarks')
          							.merge(bottomMarks)
          							.attr('x1', function(d){return(xScale(xValue(d)) + bandwidth/2);})
          							.attr('x2', function(d){return(xScale(xValue(d)) + bandwidth/2);})
          							.attr('y1', function(d){return yScale(yValueBottom(d));})
          							.attr('y2', function(d){return yScale(1500) ;})
          							.attr('stroke','black')
          							.attr('stroke-dasharray','5,2')
          							.append('svg:title')
          							.text(function(d){return "Country: " + d.Country
                                          						+ "\nCumulative GHG emissions: "
                                         							+ d.GHG_Cum; + " tonnes"});

var xAxisG = group.selectAll('.xAxis').data(data);
      	xAxisG = xAxisG.enter()
        					.append('g')
        					.style('font-size', '7px')
        					.style('font', 'Times')
        					.merge(xAxisG)
        					.attr('transform', `translate(0, ${yScale(innerHeight)})`);
      
      var xAxis = d3.axisBottom()
      							.scale(xScale)
                    .ticks(5)
      							.tickSize(width/50 + ' em');
      
     var yAxisG = group.selectAll('.yAxis').data(data);
      	yAxisG = yAxisG.enter()
        					.append('g')
        					.style('font-size', '15px')
        					.style('font', 'Helvetica')
        					.merge(yAxisG)
        					.attr('transform',`translate(${xScale(0)},0)`)
        					;

var yAxis = d3.axisLeft()
      						.scale(yScale)
      						.ticks(5)
      						.tickSize(width/100 + ' em')
      						.tickFormat(d3.format('.0s'))
      						;
      
      
      
      xAxisG.call(xAxis);
      yAxisG.call(yAxis);
        svg.exit().remove()
        group.exit().remove(); 
      	topMarks.exit().remove();
      	connectingMarks.exit().remove();
      	bottomMarks.exit().remove();
      	annotation.exit().remove();
          
          
    }
  
   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, 2013));})

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