D3 Examples - Project Prototype

xxxxxxxxxx
 
<!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; } 
    .scatterMark {}
    .graphGroup{}
    .xAxis, .yAxis {font-size: 30}
    .xAxisText, .yAxisText {}
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var margin = {top:5, bottom:5, left: 5, right: 5};
    var width = 960;
    var height = 500;
    var innerWidth = width - margin['left'];
    var innerHeight = height - margin['top'];
    
​
    
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
​
    
    
    var outerGroup = svg.append('g')
                .attr('height', height)
                .attr('width', width)
                .attr('transform', 'translate(' + margin['left'] + ',' + margin['top'] + ')');
    
    var row = d => {d.Year = + d.Year;
                   d['Total GHG'] = +d['Total GHG'];
                   return(d);
                   };
    
    
    
    var render = function(data
                                            , countries
                                            , year1
                                            , year2
                                            , coOrds
                                            , offset
                          )
    {
      
      
      //var maxYr = d3.max(data.map(function(d){return(d.Year);}))
      
      var maxY = d3.max(data.map(function(d){return(d["Total GHG"]);}))      
      var xScale = d3.scaleLog().domain([.04, maxY]).range([coOrds.x1, coOrds.x2]);
        var yScale = d3.scaleLog().domain([maxY, .04]).range([coOrds.y1,coOrds.y2]);
​
      console.log(maxY)
      
      data = data.filter(function(d){return(d.Year == year1 || d.Year == year2);});
      //data = data.filter(function(d){return((!isNaN(d["Total GHG"])));})
      
      
            data = d3.nest()
                        .key(function(d){return(d.Country); })
                        .key(function(d){return(d.Year);}).sortKeys(d3.ascending)
                        .rollup(function(arr){return(d3.sum(arr, d => {return(d["Total GHG"]);}));})
                        .entries(data)
            
        
      
      var graphGroup = outerGroup.selectAll('.graphGroup').data([null]);
            graphGroup = graphGroup.enter()
                                        .append('g')
                                        .merge(graphGroup)
                                            .attr('transform', `translate(${offset.x},${offset.y} )`) //pass offset parameters here
      
      var updatePhase = graphGroup.selectAll('.scatterMark').data(data);
      var updatePhase = updatePhase.enter()
                                            .append('circle')
                                                .attr('class','.scatterMark')
                                                .attr('r', 3)
                                            .merge(updatePhase)
                                                .attr('cx', function(d){return(
                                xScale(  
                                d['values'].filter(d => parseInt(d.key) == year1)[0]['value']
                                )
                          
                            );})
                                                .attr('cy', function(d){return(
                             yScale(
                                    d['values'].filter(d => parseInt(d.key) == year2)[0]['value']
                                )
                            
                                );})
                                                .attr('fill',
                                function(d)
                                    {
                                        if(countries.indexOf(d['key']) >= 0)
                                    return('red');
                                        else
                                        return("rgba(0,100,0,0.3)");   
                            }
                               
                                )
      
    ;
      
      
      var xAxisG = graphGroup.selectAll('.xAxis').data([null]);
      xAxisG = xAxisG.enter()
                .append('g')
                .attr('class', 'xAxis')
                .attr('transform', `translate(${xScale(0)},${yScale(maxY)})`);
      var xAxis = d3.axisBottom()
                            .scale(xScale)
                            .tickPadding(2)
                            .ticks(5)
                            .tickFormat(d3.format('.0s'));
​
        var xAxisText = xAxisG.selectAll('.xAxisText').data([null]);
        xAxisText = xAxisText.enter()
                                    .append('text')
                                    .attr('class','xAxisText')
                                    .text(year1)
                                    .attr('stroke','black')
                                    .attr('fill', 'black')
                                    .merge(xAxisText)
                                      .attr('x', xScale(maxY)/2.24)
                                            .attr('y', yScale(maxY)+39)
                                        .attr('font-size', width/50);
      
      
      var yAxisG =  graphGroup.selectAll('.yAxis').data([null]);
      yAxisG = yAxisG.enter()
                        .append('g')
                        .attr('class', 'yAxis')
                        .merge(yAxisG)
//                          .attr('transform', 'rotate(-90)');
      
      var yAxis = d3.axisLeft()
                        .scale(yScale)
                        .tickPadding(2)
                        .ticks(5)
                        .tickFormat(d3.format('.0s'))
                        ;
      
​
        var yAxisText = yAxisG.selectAll('.yAxisText').data([null]);
        yAxisText = yAxisText.enter()
                                    .append('text')
                                    .attr('class','yAxisText')
                                    .text(year2)
                                    .attr('stroke','black')
                                    .attr('fill', 'black')
                                    .merge(yAxisText)
                                      .attr('x', xScale(-50))
                                            .attr('y', yScale(maxY/2.5))
                                        .attr('font-size', width/50);
      
      
            
      xAxisG.call(xAxis);
      yAxisG.call(yAxis);
      
      //console.log(data[0]['values'].filter(d => parseInt(d.key) == year1)[0]['value'])
      
      
    };
    
    var coordinates = {x1:  0, x2: 200, y1:0, y2:200};
    var  offset = {x: 94, y:98};
    d3.csv('Data2.csv', row, function(d){return(render(d,['Albania', 'Zimbabwe', 'Zambia', ' United States', 'China'],2012, 2013, coordinates, offset));});
​
    
//    coordinates = {x1:  0, x2: 200, y1:0, y2:200};
//    offset = {x: 100, y:100};    
//        d3.csv('Data2.csv', row, function(d){return(render(d,['Albania', 'Zimbabwe', 'Zambia', ' United States', 'China'],2003, 2009, coordinates, offset));});
    
   
​
  </script>
</body>
​
    