D3 Examples - Data Visualization experiment showing profits and employment over time. US Data.

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      $(function(){
        
        var chartWidth = 816,
            chartHeight = 200,
            padding = 20,
            maxEarnings = 0,
            maxEmploy = 0,
            minEarnings = 0,
            minEmploy = 0;
        
        
        
        
        
        $.getJSON("data.json", function(jsondata) {
          //Calculate Job Change
          for (var i = 1; i < jsondata.length; i++){
            jsondata[i].employmentdiff = [];
            for (var j = 1; j < jsondata[i].employment.length; j++){
              //jsondata[i].employmentdiff.push(jsondata[i].employment[j]-jsondata[i].employment[j-1]);
              jsondata[i].employmentdiff.push((jsondata[i].employment[j]-jsondata[i].employment[j-1])/jsondata[i].employment[j-1]);
            }           
          }
          console.log(jsondata[1]);
          
          
          
          //Find Max/Min Earnings and Employment
          for (var i = 1; i < jsondata.length; i++){
            var thisdata = jsondata[i];
            if (maxEarnings < d3.max(thisdata.earnings)) {
              maxEarnings = d3.max(thisdata.earnings);
            }
            if (minEarnings > d3.min(thisdata.earnings)) {
              minEarnings = d3.min(thisdata.earnings);
            }
            if (maxEmploy < d3.max(thisdata.employmentdiff)) {
              maxEmploy = d3.max(thisdata.employmentdiff);
            }
            if (minEmploy > d3.min(thisdata.employmentdiff)) {
              minEmploy = d3.min(thisdata.employmentdiff);
            }
            
            
          }
          console.log(maxEarnings);
          
          var mindate = new Date(1949,01,01),
              maxdate = new Date(2011,01,01);
          
          var xScale = d3.time.scale()
              .domain([mindate, maxdate])    // values between for month of january
              .range([padding, chartWidth-padding*2]);   // map these the the chart width = total width minus padding at both sides
          
          var xAxis = d3.svg.axis()
              .orient("bottom")
              .scale(xScale)
              .tickSize(0);
          
          var yjobs = d3.scale.linear()
              .domain([0, maxEmploy])
              .range([0,chartHeight]);
          
          var yEarnings = d3.scale.linear()
              .domain([minEarnings, maxEarnings])
              .range([0, chartHeight]);
          
          var colorjob = d3.scale.linear()
              .domain([minEmploy, 0, maxEmploy])
              .range(["red", "#ddd", "green"]);
          
          for (var i = 1; i < jsondata.length; i++){
            var thisdata = jsondata[i];
            
            
            
            
            
            var chart = d3.select('body')
                .append('svg')
                .attr('class', 'chart')
                .attr('width', chartWidth+padding*2)
                .attr('height', chartHeight+padding*2)
                .append('g')
                .attr('transform','translate(10,10)');
            
            
            chart.selectAll('.circlesEarnings').data(thisdata.earnings)
              .enter()
              .append('rect')
              .attr('class','circlesEarnings')
              .attr('y', function(d) { return chartHeight-yEarnings(0); })
              .attr('width',2)
              .attr('height', function(d) { return yEarnings(d) - yEarnings(0); })
              .attr('x', function(d,i) { return i*3+padding; })
              .attr('height', 0)
              .style('fill', function(d,i) { return colorjob(thisdata.employmentdiff[Math.floor(i/4)]);})
              
              .transition()
              .duration(function(d, i) {return 1000; })
              .delay(function(d, i) {return i*5; })
              .attr('height', function(d) { 
                if (d < 0) {
                  return yEarnings(0) - yEarnings(d); 
                } else {
                  return yEarnings(d) - yEarnings(0); 
                }
              })
              .attr('y', function(d) { 
                if (d < 0) {
                  return  chartHeight-yEarnings(0);
                } else {
                  return chartHeight-yEarnings(d);
                }
              })
              
            
            
            
            chart.append("g")
              .attr("class", "xaxis")   // give it a class so it can be used to select only xaxis labels  below
              .attr("transform", "translate(0," + (parseInt(chartHeight - yEarnings(0))+.5) + ")")
              .attr("stroke-width",1)
              .call(xAxis);
            
            
            chart.select('.xaxis').selectAll('text').each(function(d, i) { 
              if (thisdata.earnings[i*4] <= 0 && thisdata.earnings[i*4+1] <= 0) {
                d3.select(this).attr('transform', 'translate(0, -14)'); 
               
              
              }
            });
            
            
            
            
            chart.append('text')
              .text(thisdata.industry)
              .attr('x',10)
              .attr('y',10);
            
            
            
            
            
          }   
        });
      });
    </script>
    <style>
      .domain { 
        fill: none; 
        stroke: black; 
        stroke-width; 1; 
              } 
      .xaxis text {
        font-size:10px;
        font-family:Arial;
        fill:#aaa;
        
      }
      .circlesEarnings {
        fill:green;
      }
      
      .labels {
        font-size:10px;
      }
      line {
        stroke:black;
      }
    </style>
  </head>
  <body>
    
  </body>
</html>
    