xxxxxxxxxx<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); var datalabel = svg.selectAll("text") .data(dataset.filter(function(d) { return d.fruit === "Grapefruit"; })) .enter() .append("text") .attr("x", w - padding[1] - padding[3] + 5) .attr("y", function(d) { return yScale( d.pounds[42].amount ); // year [6] -> 2013 }) .attr("fill", "black") .attr("font-size", "14px") .attr("font-family", "Verdana") .attr("font-style", "italic") .text(function(d) { return d.fruit }); //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