USA_try3.html

---
layout: default
title: USA
---

<style>
  svg {
    background-color: #F7F3E2;
    width: 100%;


  }
#top{
  width: 100%;
  padding: 0;
  background-color: #F7F3E2;
  top:0%;
}
  #year_dropdown {
    list-style: none;
           text-align: center;
           color: #20526B;
           font-size: 24px;
           line-height: 35px;
           height: 37px;
           padding-left: 10px;
           padding-bottom: 10px;
           border-top: 1px solid #ccc;
           position: absolute;
           top: 20%;
           margin-left: 47.5%;
           font-family: 'Open Sans', sans-serif;

  }

  #country_dropdown {
    list-style: none;
           text-align: center;
           color: #20526B;
           font-size: 15px;
           line-height: 35px;
           height: 25px;
           width: 140px;
           padding-left: 10px;
           padding-bottom: 10px;
           border-top: 1px solid #ccc;
           position: absolute;
           top: 670px;
           margin-left: 3%;
           font-family: 'Open Sans', sans-serif;
           font-weight: 800;
           margin-left: 46.5%;

  }

  #USA {

    color: #B0443A;
    font-size: 28px;
    height: 30px;

    padding-bottom: 10px;
    position: absolute;
    top: 21%;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    margin-left: 48.8%;

  }
  body {
      display: block;
      margin: 0;
  }
  #dnc {
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    opacity: 0;
    position: absolute;
    text-align: center;
    top: 35%;
    transition: opacity 0s .2s;
    width: 100%;
    visibility: hidden;
  }
  #dnc.visible {
    opacity: 1;
    visibility: visible;
  }


  .modalDialog {
  	position: absolute;
  	font-family: 'Open Sans', sans-serif;
/*
  	width: 250px;
  	height: 200px;*/
    /*top: 15%;*/

  	z-index: 99999;
  	-webkit-transition: opacity 100ms ease-in;
  	-moz-transition: opacity 100ms ease-in;
  	transition: opacity 100ms ease-in;
    transition: opacity 400ms ease-out;
  	/*opacity: 0;*/
  	pointer-events: none;
  }

  #tooltip {
    position: absolute;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    text-align: center;
    padding: 2px;
  }
</style>

<!-- <div id="openModal" class="modalDialog">
	<div>

		<h2></h2>
		<h3></h3>
	</div>
</div> -->
<div id="tooltip"></div>

<div id ="USA">
    <p> USA </p>

</div>


<h1 id="dnc">Boycotted the Moscow Olympics <br> to protest the Soviet invasion in Afghanistan.</h1>

<image id="top" src="images/top-02.png" width="100%"/>

<div id="controls">
  <select id="year_dropdown"></select>
  <select id="country_dropdown"></select>
</div>

<svg width=500 height=900></svg>





<script>
var raw_data = [],
  yearData,
  currentYear,
  currentCountry,
  nestedData,
  USA_data,
  names;


d3.csv("data/names.csv", function(error, data) {

  names = data.reduce(function(obj, d) {
    obj[d.NOC] = d.Country.replace("*", "");
    return obj;
  }, {});


  console.log(names)




  // currentCountry = yearData[0].values[0].key;
  // }
  // var options = d3.select("#country_dropdown").selectAll("option")
  // .data(yearData[0].values, function(d) {
  //   return d.key;



  d3.csv("data/Olympic.csv", function(error, data) {
    //don't want to filter by US want to filter by date first
    USA_data = data.filter(function(d) {
      return d.NOC === "USA";
    });

    USA_nestedData = d3.nest()
      .key(function(d) {
        return parseFloat(d.Edition);
      })
      .entries(USA_data);



    data = data.filter(function(d) {
      return d.NOC !== "USA";

    })

    nestedData = d3.nest()
      .key(function(d) {
        return parseFloat(d.Edition);
      })
      .key(function(d) {
        return d.NOC;
      })
      .entries(data);


    raw_data = data;

    d3.select("#year_dropdown").selectAll("option")
      .data(nestedData).enter().append("option")
      .attr("value", function(d) {
        d.key
      })
      .text(function(d) {
        return d.key;
      });


    currentYear = nestedData[0].key;
    yearData = nestedData.filter(function(d) {
      return d.key === currentYear;

      // var numKey = parseFloat(d.key);
      // return numKey === currentYear;
    })

    update_year(),
      update_country()




    d3.select("#year_dropdown").on("change", function() {
      // console.log(years[this.selectedIndex].key);
      currentYear = nestedData[this.selectedIndex].key;


      // currentYear = years[this.selectedIndex].key//ousite set default first value
      update_year(),
        update_country();



      draw();
    });

    d3.select("#country_dropdown").on("change", function() {
      // console.log(years[this.selectedIndex].key);
      currentCountry = d3.select(this).node()[this.selectedIndex].value;

      data.sort(function(a, b) {
        return d3.ascending(a.Country, b.Country)
      }); ///outside



      draw();
    });

    draw();


  });
});

function update_year() {
  d3.select("#dnc").classed("visible", currentYear == "1980");
  yearData = nestedData.filter(function(d) {
    return d.key === currentYear;
  })
}



function update_country() {
  yearData[0].values = yearData[0].values.sort(function(a, b) {
    return d3.ascending(names[a.key] || a.key, names[b.key] || b.key);
  });
  if (!currentCountry) {
    currentCountry = yearData[0].values[0].key;
  }
  var options = d3.select("#country_dropdown").selectAll("option")
    .data(yearData[0].values, function(d) {
      return d.key;
    })

  options.enter().append("option")
    .attr("value", function(d) {
      return d.key;
    })
    .text(function(d) {
      return names[d.key] || d.key;
    });
  options.exit().remove()
}




function draw() {

  var year_data = raw_data.filter(function(d) {
    return d.Edition === currentYear && d.NOC === currentCountry; //country key
  });


  var newusa_data = USA_data.filter(function(d) {
    return d.Edition === currentYear; //country key
  });



  var medal_data = d3.nest()
    .key(function(d) {
      return d.Medal;
    })
    .rollup(function(leaves) {
      return leaves.length;
    })
    .entries(year_data);

  medal_data = medal_data.sort(function(a, b) {
    if (a.key == "Gold") {
      a = 1;
    } else if (a.key == "Silver") {
      a = 2;
    } else {
      a = 3;
    }
    if (b.key == "Gold") {
      b = 1;
    } else if (b.key == "Silver") {
      b = 2;
    } else {
      b = 3;
    }
    return a - b;
  })

  medal_data.forEach(function(d) {
    d.country = currentCountry;
  });


  var usa_medal_data = d3.nest()
    .key(function(d) {
      return d.Medal;
    })
    .rollup(function(leaves) {
      return leaves.length;
    })
    .entries(newusa_data);

  usa_medal_data = usa_medal_data.sort(function(a, b) {
    if (a.key == "Gold") {
      a = 1;
    } else if (a.key == "Silver") {
      a = 2;
    } else {
      a = 3;
    }
    if (b.key == "Gold") {
      b = 1;
    } else if (b.key == "Silver") {
      b = 2;
    } else {
      b = 3;
    }
    return a - b;
  })

  usa_medal_data.forEach(function(d) {
    d.country = "USA";
  });

  // console.log(usa_medal_data);

  medal_data = medal_data.concat(usa_medal_data);


  var scale = d3.scale.pow().exponent(.5)
    //where to add and how to add the sum/total of the Medals
    //make it a number not a circle
    .domain([0, 200])
    .range([0, window.innerWidth / 12]);
  //scale so there is an exception. Medals too small at 1896
  //keep the 0 because did not participate in the 1980 olympics
  var xScale = d3.scale.linear()
    .domain([0, 1, 2])
    .range([window.innerWidth / 5, window.innerWidth - window.innerWidth / 5]);
  // console.log(window.innerHeight, window.innerWidth)

  var tooltip = d3.select("div#tooltip")

  var circles = d3.select("svg").selectAll("circle")
    .data(medal_data, function(d, i) {
      return d.key + "_" + d.country;
    });

  circles.enter().append("circle")
    .attr("r", 0)
    .attr("cx", function(d, i) {
      var i = d.key === "Gold" ? 1 : d.key === "Silver" ? 2 : 3;
      return (i % 4) * window.innerWidth / 4;
    })
    .attr("cy", function(d) {
      if (d.country == "USA") {
        return 270;
      } else {
        return 640;
      }
    })
    // .attr("cy", 250)
    .attr("fill", function(d) {
      if (d.key == "Gold") {
        return "#F7CE56";
      } else if (d.key == "Silver") {
        return "#CCCFD1";
      } else {
        return "#B07C4B";
      }
    })
    .style("stroke", function(d) {
      if (d.key == "Gold") {
        return "#A5814C";
      } else if (d.key == "Silver") {
        return "#7F807D";
      } else {
        return "#A55937";
      }
    });
  circles.transition().duration(500)
    .attr("r", function(d) {
      // console.log(d.country, d.key, d.values)
      return scale(d.values)
    })
    .style("stroke-width", function(d) {
      return 5;
    });


  circles.exit().transition().duration(500)
    .attr("r", 0).remove();



  circles.on("mouseover", function(d) {
    r = parseInt(d3.select(this).attr("r"))
    x = parseInt(d3.select(this).attr("cx"))
    imgY = parseInt(d3.select("img#top").style("height").replace("px", ""))
    y = parseInt(d3.select(this).attr("cy")) + imgY + r + 15
    tooltip.text(d.values)
      .style("left", x + "px")
      .style("top", y + "px")
      .style("opacity", 1);
  })
  .on("mouseout", function(d) {
    tooltip.style("opacity", 0);
  })
}


// circles.on("mouseout", function(d) {
//   d3.select(this)
//   d3.select("#openModal").classed("open", false);
// });
</script>