Old school D3 from simpler times

All examples By author By category About

RobertDelgado

Full window Github gist

Project Prototype 3

Built with blockbuilder.org

forked from RobertDelgado's block: Project Prototype 2

<!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; }
    .topMarks {}
    .bottomMarks {}
    .connectingMarks {}
    .annotation{}
    .xAxis, .yAxis {}

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

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 svg = d3.select('body')
      						.selectAll('svg')
      						.data([null]);
      svg = svg.enter()
      				.append('svg')
      				.attr('height', height)
      				.attr('width', width)
      				.merge(svg);
      
      
      var group = svg.selectAll('g').data([null]);
      group = group.enter()
      						.append('g')
      						.attr('height', innerHeight)
      						.attr('width', innerWidth)
      						.attr('transform',`translate(${margin['left']}, ${margin['top'] -10})`)
                  .merge(group);

var annotation = group.selectAll('.annotation').data([null]);
      		annotation = annotation.enter()
          							.append('text')
          							.text("GHG emissions for " + numberOfCountries +" countries that produce the most GHG's  " + year1)
          							.attr('font-size','30-em')
          							.attr('stroke', 'black')
          							.merge(annotation)
          							.attr('transform', 'translate(100, 100)')
          							.attr('font-size', '1.5em')
          							.attr('stroke', 'black')
          							.attr('fill', 'white');      
      
      var topMarks = group.selectAll('.topMarks').data(data);
      topMarks = topMarks.enter()
      						.append('circle')
      						.attr('class','topMarks')
      						.attr('cx', function(d){return xScale(xValue(d)) + xScale.bandwidth()/2;})
      						.attr('cy', function(d){return yScale(yValueTop(d));})
      						.attr('r', function(d){return Math.sqrt(height * d.Population/(1000000*600));})
      						.attr('fill', 'rgba(255,123,50,.2)')
      ;
      
      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));});
          									
          									
      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');;

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