The Decline of the Grapefruit

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>The Decline of the Grapefruit:Fruits Availability/Capita in the US, 1970-2012</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
    <style type="text/css">

body {
        background-color: white;
        font-family: Helvetica, Arial, sans-serif;
      }

h1 {
        font-family: Cambria, Georgia, serif; font-size: 24px;
        margin-left: 200px; color: dimgray; line-height: 20px;
      }
            h2 {
        font-family: Helvetica, Ariel, sans-serif; font-size: 14px;
        margin-left: 200px; color: dimgray; line-height: 12px;
      }

blockquote {margin-left: 200px;}

p {
        font-size: 10px;
                color: dimgray;
        margin: 10px 0 0 0;
      }
        p.sidebar {
            font-size: 12px;
            line-height: 14px;
            color:gray;
            margin-right: 510px;
            margin-left: 200px;
            
        }
        a {
            color: #FF9933;
        }

svg {
        background-color: white;
          margin-left: 200px;
      }

circle:hover {
        fill: blue;
      }

path {
        stroke: gray;
        stroke-width: 0.5;
      }

g.highlight_Grapefruit path {
        stroke: #FF9933;
        stroke-width: 4;
      }

path:hover {
        stroke: #ff4444;
        stroke-width: 4;
      }

.axis path,
      .axis line {
        fill: none;
        stroke: gray;
        stroke-width: 1;
        shape-rendering: crispEdges;
      }

.axis text {
        font-family: sans-serif;
        font-size: 11px;
      }
            text.label {
        font-size: 12px;
      }

</style>
  </head>
  <body>
      <img align="left" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Citrus_paradisi_(Grapefruit,_pink)_white_bg.jpg" alt="Grapefruit" width="200">  
 <h1>The Decline of the Grapefruit</h1>
        <h2>Fruits availability in the United States, pounds per capita by type, 1970-2012</h2>
<p class=sidebar> A Christmas gift of grapefruits harks to the days of the Great Depression, says Slate correspondent Katy Waldman. It's a tradition, she says, that should be abolished. In <b><a  href="https://www.slate.com/articles/life/holidays/2012/12/grapefruit_is_disgusting_no_one_should_eat_it_let_alone_give_it_as_a_holiday.html">Waldman's words,</a></b> grapefruits are impossible to eat, disgusting, and even murderous. (Yes murderous, because they apparently inhibit an enzyme in our guts that metabolizes certain substances.)<br /><br />
      The decline of availability of grapefruit since 1970 might be explained by Waldman's treatise against grapefruit. If enough people agree with her and demand drops, as it appears to be doing, so too will supply.<br /><br />           
          If you're one of those who love grapefruit, perhaps it's time to stand up for the poor vilified fruit.</p>
      
      
     
    <script type="text/javascript">

//Dimensions and padding
      var w = 1100;
      var h = 400;
      var padding = [ 10, 50, 20, 30 ];  //Top, right, bottom, left

//Set up date formatting and years
      var dateFormat = d3.time.format("%Y");

//Set up scales
      var xScale = d3.time.scale()
                .range([ padding[3], w - padding[1] - padding[3] ]);

var yScale = d3.scale.linear()
                .range([ padding[0], h - padding[2] ]);

//Configure axis generators
      var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("bottom")
              .ticks(30)
              .tickFormat(function(d) {
                return dateFormat(d);
              });

var yAxis = d3.svg.axis()
              .scale(yScale)
              .orient("left");

//Configure line generator
      var line = d3.svg.line()
        .x(function(d) {
          return xScale(dateFormat.parse(d.year));
        })
        .y(function(d) {
          return yScale(+d.amount);
        });

//Create the empty SVG image
      var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

//Load data
      d3.csv("fruits-availablity-pounds-per-capita-by-year-transpose.csv", function(data) {

var years = ["1970", "1971", "1972", "1973", "1974", "1975", "1976", "1977", "1978", "1979", "1980", "1981", "1982", "1983", "1984", "1985", "1986", "1987", "1988", "1989", "1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012"];

//Create a new, empty array to hold our restructured dataset
        var dataset = [];

//Loop once for each row in data
        for (var i = 0; i < data.length; i++) {

//Create new object with this country's name and empty array
          dataset[i] = {
            fruit: data[i].Fruit,
            pounds: []
          };

//Loop through all the years
          for (var j = 0; j < years.length; j++) {

// If value is not empty
            if (data[i][years[j]]) {
              //Add a new object to the emissions data array
              //for this country
              dataset[i].pounds.push({
                year: years[j],
                amount: data[i][years[j]]
              });
            }

}

//Uncomment to log the original data to the console
        // console.log(data);

//Uncomment to log the newly restructured dataset to the console
        // console.log(dataset);

//Set scale domains
        xScale.domain([
          d3.min(years, function(d) {
            return dateFormat.parse(d);
          }),
          d3.max(years, function(d) {
            return dateFormat.parse(d);
          })
        ]);

yScale.domain([
          d3.max(dataset, function(d) {
            return d3.max(d.pounds, function(d) {
              return +d.amount;
            });
          }),
          0
        ]);

//Make a group for each country
        var groups = svg.selectAll("g")
          .data(dataset)
          .enter()
          .append("g")
          .classed("highlight_Grapefruit", function(d) {
             return d.fruit === "Grapefruit";
          });

//Append a title with the country name (so we get easy tooltips)
        groups.append("title")
          .text(function(d) {
            return d.fruit;
          });

//Within each group, create a new line/path,
        //binding just the emissions data to each one
        groups.selectAll("path")
          .data(function(d) {
            return [ d.pounds ];
          })
          .enter()
          .append("path")
          .attr("class", "line")
          .attr("d", line)
          .attr("fill", "none")
          .attr("stroke-width", 2);

//Axes
        svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + (h - padding[2]) + ")")
          .call(xAxis);

svg.append("g")
          .attr("class", "y axis")
          .attr("transform", "translate(" + (padding[3]) + ",0)")
          .call(yAxis);

})
      //End data load function

</script>
 
      <blockquote><p>Source: Calculated by ERS/USDA based on data from <a href="https://www.ers.usda.gov/data-products/food-availability-(per-capita)-data-system/food-availability-documentation.aspx"> various sources.</a> Data last updated Feb. 1, 2014.</p></blockquote>
     
  </body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js