jkeohan/data_regions.csv

## data_regions.csv

          
            Location
            2002
            2003
            2004
            2005
            2006
            2007
            2008
            2009
            2010
            2011
            2012
            Region

            
              Australia
              6.2
              6
              5.8
              5.7
              5.8
              5.8
              5.8
              4.6
              4.8
              5.1
              4.6
              Oceana

            
              Austria
              21.3
              18.7
              19.7
              21
              22.1
              24.1
              25.3
              27.8
              27.2
              26.6
              29.5
              Europe

            
              Belgium
              1.3
              1.5
              1.6
              2
              2.3
              2.7
              3.1
              3.8
              4.2
              4.9
              5.1
              Europe

            
              Brazil
              39.4
              42
              42.3
              42.9
              43.3
              44.4
              44.5
              45.8
              44
              42.7
              42.2
              Latin America

            
              Canada
              16.9
              15.6
              15.6
              15.9
              15.7
              16.2
              16.8
              17.5
              17.1
              18
              17.9
              North America

            
              Chile
              26.2
              24.8
              24.2
              25.1
              25.3
              23.5
              24.4
              26.1
              22
              23.1
              24.1
              Latin America

            
              China
              18.4
              16.2
              14.5
              13.7
              12.8
              12.5
              12.6
              12.1
              11.4
              10.7
              9.8
              Asia

            
              Czech Republic
              3.7
              3.4
              3.8
              4
              4.2
              4.7
              4.9
              5.8
              6.3
              6.9
              7.5
              Europe

            
              Denmark
              11
              11.9
              13.6
              15
              14.2
              16.1
              16.7
              17.8
              20
              22.2
              24.4
              Scandinavia

            
              Estonia
              11.7
              11.2
              11.4
              11.4
              10.5
              10.7
              11.9
              15.2
              15.3
              14.8
              14.5
              Europe

            
              Finland
              22.4
              21.3
              23.4
              23.6
              23.3
              23.5
              25.8
              24
              25.4
              26.1
              29.1
              Scandinavia

            
              France
              5.8
              5.8
              5.8
              5.7
              5.9
              6.3
              7.1
              7.5
              7.9
              7.2
              7.9
              Europe

            
              Germany
              3.2
              3.8
              4.4
              5
              5.8
              7.9
              8
              8.8
              9.9
              10
              10.7
              Europe

            
              Greece
              4.9
              5.3
              5.3
              5.4
              5.9
              5.7
              5.6
              6.4
              7.7
              7.9
              8.7
              Europe

            
              Hungary
              3.4
              3.5
              3.6
              4.3
              4.5
              5.1
              6
              7.4
              7.6
              7.6
              8
              Europe

            
              Iceland
              75
              75.2
              74.8
              75.9
              78.4
              81.6
              81.3
              81.8
              82.5
              83.8
              84.7
              Scandinavia

            
              India
              33.2
              32.9
              31.7
              31.2
              30.4
              29.9
              28.9
              26.8
              26.5
              26.5
              26.4
              Asia

            
              Indonesia
              37.3
              37.4
              35.5
              34.9
              34.7
              35.3
              36.2
              34.8
              33.9
              33.6
              33.4
              Asia

            
              Ireland
              1.8
              1.7
              2
              2.5
              2.9
              3.2
              3.9
              4.6
              4.7
              6.2
              6.1
              Europe

            
              Israel
              3.6
              3.5
              3.8
              4
              3.7
              3.7
              4.7
              5
              5
              4.9
              4.8
              Middle East

            
              Italy
              5.8
              6
              6.6
              6.3
              6.9
              6.7
              7.7
              9.7
              10.6
              11.9
              13.2
              Europe

            
              Japan
              3.2
              3.4
              3.3
              3.2
              3.4
              3.2
              3.3
              3.4
              3.9
              4.2
              4.2
              Asia

            
              Korea
              0.4
              0.5
              0.5
              0.5
              0.6
              0.6
              0.6
              0.7
              0.7
              0.7
              0.7
              Asia

            
              Luxembourg
              1.1
              1
              1.2
              1.6
              1.8
              3.1
              3.1
              3.3
              3.1
              2.9
              3.2
              Europe

            
              Mexico
              10.2
              10.2
              10.4
              10.3
              9.9
              9.9
              10
              9.5
              9.8
              9.3
              8.7
              Latin America

            
              Netherlands
              1.9
              1.8
              2.1
              2.7
              3
              3
              3.5
              4
              3.8
              4.3
              4.3
              Europe

            
              New Zealand
              29.8
              29.7
              31.3
              31.6
              32
              32.2
              32.9
              35.8
              38.9
              40.4
              38.3
              Oceana

            
              Norway
              49.5
              38.2
              40
              48.5
              42.6
              46.5
              44.9
              40.9
              36.1
              42.8
              46.9
              Scandinavia

            
              Poland
              4.7
              4.6
              4.7
              4.8
              4.8
              5
              5.7
              6.7
              7.2
              7.8
              8.8
              Europe

            
              Portugal
              13.7
              16.9
              14.7
              13.1
              17.1
              17.7
              17.7
              19.9
              23.3
              22.3
              21.2
              Europe

            
              Russia
              2.8
              2.7
              2.9
              2.9
              2.8
              2.9
              2.6
              2.8
              2.5
              2.4
              2.3
              Asia

            
              Slovak Republic
              4
              3.5
              4
              4.3
              4.5
              5.3
              5.1
              6.8
              7.4
              7.4
              7.6
              Europe

            
              Slovenia
              10.5
              10.3
              11.5
              10.6
              10.5
              10.1
              11
              14.2
              14.7
              13.1
              13.9
              Europe

            
              South Africa
              12.1
              11.3
              10.5
              10.7
              11
              10.2
              9.7
              10.1
              10.3
              10.5
              10.6
              Africa

            
              Spain
              5.4
              6.9
              6.3
              5.9
              6.5
              7
              7.6
              9.7
              11.7
              11.7
              11.9
              Europe

            
              Sweden
              25.3
              24.5
              25
              28.8
              28.7
              30.5
              31.5
              34.8
              33.9
              32.1
              35.6
              Scandinavia

            
              Switzerland
              16.8
              16.8
              16.4
              16
              15.5
              17.8
              17.8
              17.8
              19
              18.1
              20.5
              Europe

            
              Turkey
              13.5
              12.9
              13.3
              12
              11.1
              9.6
              9.5
              10.2
              11.1
              10
              10.2
              Asia

            
              United Kingdom
              1.2
              1.2
              1.5
              1.8
              1.9
              2.2
              2.6
              3.2
              3.3
              4.1
              4.5
              Europe

            
              United States
              4
              4.3
              4.4
              4.5
              4.8
              4.7
              5.1
              5.4
              5.6
              6.1
              6.3
              North America

            
              European Union
              5.7
              5.9
              6.3
              6.5
              6.9
              7.6
              8.2
              9.2
              10
              10.2
              10.5
              Europe

            
              World
              12.7
              12.6
              12.4
              12.4
              12.4
              12.5
              12.7
              13.1
              13
              13
              13
              World

## index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <!-- // <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> -->
    <script src="http://d3js.org/d3.v3.js"></script>
    <script type="text/javascript" src="reusable.d3.charts.js"></script>


    <link rel="stylesheet"  href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="renewable.css">
    <link href="http://fonts.googleapis.com/css?family=Lato:400,600" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Lato:400,600" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Lato:400,600" rel="stylesheet" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>

  </head>
  <body>
    <div class="nav clearfix">
      <div class="container" id="fitwidth">
        <ul class="pull-left border">
            <li class="mainLogo"><a href="http://d3js.org/" target="_blank"><img src="https://raw.githubusercontent.com/jkeohan/portfolio/master/images/d3js.jpg" alt="D3"></a></li>
            <li class="mainLogo" id="ocd"><a href="https://data.oecd.org/energy/renewable-energy.htm" target="_blank"><img src="https://raw.githubusercontent.com/jkeohan/portfolio/master/images/logo-oecd-embed%402x.png"></a></li>
        </ul>
        <ul class="pull-left chart-types">
          <li><a href="index.html#section1">Scatterplot</a></li>
          <li><a href="index.html#section2">Bar Graph</a></li>
          <li><a href="index.html#section3">Line Chart</a></li>
        </ul>
      </div>
    </div>

    <div class="hero-shot"></div>
    <div class="main-content">
      <div class="containter main">
        <h1>D3 Charts on Renewable Energy</h1>
        <p class="intro">This site was created to demo several D3 charts and graphs developed while taking the <a href="http://journalismcourses.org/D3.html">Data Visualization and Inforgaphics with D3</a> online course provided by JournalismCourses.org. The course consisted of 6 modules and was desinged to introduce data vizualization best practices and then building several charts and graphs using D3. The data set was provided by OECD and consisted of the percentage of Renewable Energy production of 41 countries from 2002 to 2012</p>

        <span>Source: </span><a href="https://data.oecd.org/energy/renewable-energy.htm#indicator-chart">https://data.oecd.org/energy</a>
        <hr class="divider">
      </div>
      <a name="section1"></a>
      <div class="container main">
        <h1><span class="number">1 </span>Scatter Plot on Regional Growth</h1>
        <div class="row">
          <div class="col-md-8" id="reduceWidth" style="margin-bottom:40px">
            <div class="switch">
              <form>
                <label>Regions<input type="radio" name="choice" value="Regions" class="radio_buttons" checked></label>
                <label>Countries<input type="radio" name="choice" value="Countries" class="radio_buttons"></label>
              </form>
            </div>
            <div class="regionalstats" ></div>
          </div>
          <div class="col-md-4" id="expandWidth">

             <div class="panel panel-success">
              <div class="panel-heading"><h3>Functional Components</h3></div>
                <div class="panel-body">
                <p>Some of the d3.methods used in the importing and formatting data used to render the scatterplot included:</p>

                <table>
                  <tr class="section1">
                    <td>d3.csv</td>
                    <td>d3.map</td>
                    <td>d3.set</td>
                    <td>d3.keys</td>
                  </tr>
                  <tr class="section1">
                    <td>d3.mean</td>
                    <td>d3.nest</td>
                    <td>d3.extent</td>
                    <td>d3.transition</td>
                  </tr>
                </table>
                <br>
                <p>Additional functionality included:
                <ul>
                  <li>Radio Buttons that transition regions/countries</li>
                  <li>Resuable Legend Module</li>
                </ul>
                <p>This component was created following best practices outlined by Chris Viau in his book: <a href="http://bleedingedgepress.com/our-books/developing-a-d3-js-edge/">Developing a D3.js Edge"</a> and is called using <code>d3.models.legend()</code>.</p>
                <pre>
                <code>
  var rlegend = d3.models.legend()
    .fontSize(15)
    .width(width-160)
    .height(height)
    .inputScale(colorScale)
  svg.call(rlegend)
                </code></pre>
              </div>
             </div>
         </div>
        <hr class="divider">
      </div>
      <a name="section2"></a>
      <div class="container main" id="section2">
        <h1><span class="number">2 </span>Bar Graph On Country Growth</h1>
        <div class="row">
          <div class="col-md-8" id="reduceWidth">
            <div class="playAll"></div>
            <div class="buttonContainer"></div>
            <div class="clearfix"></div>
            <div class="countrystats"></div>
          </div>
          <div class="col-md-4" id="expandWidth">
            <div class="panel panel-success">
              <div class="panel-heading"><h3>Functional Components</h3></div>
                <div class="panel-body">
                <p>Some of the d3.methods used in the importing and formatting data used to render the scatterplot included:</p>

                <table>
                  <tr class="section1">
                    <td>d3.csv</td>
                    <td>d3.map</td>
                    <td>d3.set</td>
                    <td>d3.keys</td>
                  </tr>
                  <tr class="section1">
                    <td>d3.nest</td>
                    <td>d3.max</td>
                    <td>d3.extent</td>
                    <td>d3.transition</td>
                  </tr>
                </table>
                <br>
                <p>Additional functionality includes the ablility to sequentially cycle through the years by adding an "on click" eventreceiver to <code>"PLAY ALL YEARS"</code> button.</p>
                <pre><code> playAll.on("click", function() {
  svg.append("text")
    .attr("class", "loading")
    .text("Loading ...").attr("font-size",20)
    .attr("x",function() { return width/2; })
    .attr("y",function() { return height/2-5; });

   var i = 0;
   playInterval = setInterval(function() {

    update(years[i]);
    i++;
    if(i > years.length - 1) {
      clearInterval(playInterval);}
    }, 2000);
 });
         </code></pre>
              </div>
             </div>
            </div>
        </div>
        <hr class="divider">
      </div>
        <a name="section3"></a>
        <div class="container main" id="section3">
          <h1><span class="number">3 </span>Line Chart On Country Growth</h1>
          <div class="row">
            <div class="col-md-8" id="reduceWidth">
              <div class="lineChart"></div>
              <div class="sideBar"></div>
            </div>
            <div class="col-md-4" id="expandWidth">
              <div class="panel panel-success">
                <div class="panel-heading"><h3>Functional Components</h3></div>
                  <div class="panel-body">
                  <p>Some of the d3.methods used in the importing and formatting data used to render the scatterplot included:</p>

                  <table>
                    <tr class="section1">
                      <td>d3.csv</td>
                      <td>d3.map</td>
                      <td>d3.set</td>
                      <td>d3.keys</td>
                    </tr>
                    <tr class="section1">
                      <td>d3.nest</td>
                      <td>d3.sort</td>
                      <td>d3.filter</td>
                      <td>d3.transition</td>
                    </tr>
                  </table>
                  <br>
                  <p>Additional functionality includes:
                  <ul>
                    <li>Sliding tooltip</li>
                    <li>Table displaying year data</li>
                    <li>Line highlighted on mouseover</li>
                  </ul>
                    </p>
                </div>
             </div>
          </div>
        </div>
    </div>

    <script type="text/javascript" src="section1.js"></script>
    <script type="text/javascript" src="section2.js"></script>
    <script type="text/javascript" src="section3.js"></script>
  </body>
</html>

## renewable.css


/*** Start Navigation ***/
.nav {
	/*1. images overflowed below the nav...R=added overflow hidden and revmoved set height
		There is
	*/
/*	height:50px;*/
	background-color: #85b433;
	border-bottom: 10px solid #FFB266;
	opacity:.8;
}
.nav a {
  color: #244774;
  font-family: 'Poiret One';
  font-size: 25px;
  font-weight: bold;
  padding: 14px 10px;
  /*text-transform: uppercase;*/
  text-decoration: none;
}
.nav li{
/* 1. display: inline shortens the border to 1/4; */
/* 2. display: block: stacks the li's; */
	display:inline-block;
}
.pull-left.border li+li {
	border-left: 3px solid #FFB266;
/*	height:50px;*/
}
.nav .pull-left img {
		max-height:50px;
}
.nav ul {
	/*1. ul with images had margin-bottom:10px set by bootstrap css. clearing that option then
	changed it to 14px but I couldn't find where that was configured.
	Grayed out rules are the unset rules, which use a special default stylesheet that is
	 applied to all elements(the rules that make the element renderable, because all styles have to have a value).
	*/
	margin:auto;
}
.nav ul.chart-types{
	margin-top:8px;
	/*margin-left:20px;*/
}
/*** End Navigation ***/

/*** Start Hero-Shot ***/
.hero-shot {
		background-image: url(https://cloud.githubusercontent.com/assets/9553453/12076272/fecf1ecc-b171-11e5-9372-c649e4f5b787.jpg);
		width:auto;
		height:400px;
  	background-repeat: no-repeat;
  	background-size: 100%;
	}
/*** End Hero-Shot ***/

/*** Start Main-Content ***/
#fitwidth{
	max-width: 970px !important;
}
.main-content{
	margin-left:5%;
	margin-right:5%;
	margin-top:-5%;
	background: white;
	padding-top:10px;
	padding-left:5px;
	padding-right: 5px;
}
.main-content .main{
	width:100%;
}
.divider{
	width:200px;
	margin-top:40px;
	margin-bottom:20px;
	border: 3px solid #85b433;
	clear:both;
	}
.number {
  width: 40px;
  background-color: #85b433;;
  color: #fff;
  height: 40px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  margin-top: -10px;
  font-weight: 300;
  line-height: 1.5em;
  font-size: 0.8em;
}
.intro {
	font-size: 18px;
}
/*** End Main-Content ***/

/**** Start D3 Specific ****/
.Axis line {
	stroke: #000;
	stroke-width: .1;
}
.Axis path {
	display:none;
}
.Axis text {
	font-size: 10px;
}
/**** Start Scatterplot ****/

#reduceWidth{
	max-width: 60%;
}
#expandWidth{
	width: 40% ;
}
.panel {
	width: 420px;
}
.panel-heading{
	text-align: center;
}
.panel-heading h3{
	color:black;
	margin:0px;
}

pre code{
	font-size: 13px !important;
}
/**** Start Radio Button ****/
.switch {
	position: absolute;
	top: 20px;
	left: 70px;
}
.switch label:last-of-type{
	margin-left:15px;
}
.switch input {
	margin-left:5px;
}
.switch label{
	font-weight: normal;
	font-size:15px;
}
/**** End Radio Button ****/

/**** Start Tooltip ****/
.d3tooltip {
  position: absolute;
	padding: 5px;
  /*pointer-events: none;*/
  border: 1px solid green;
  border-radius: 12px;
	line-height: 20px;
  opacity: .07;
  background-color:white;
}
.d3tooltiphr {
	margin:2px 0;
}
.regionName{
	font-size:12px;
	font-weight: bold;
	text-align: center;
	display:block;
	margin-bottom:-20px;

}
.value {
	font-size:12px;
	font-weight: bold;
	margin-top:-10px;
}
.key {
	font-size:12px;
}
/**** End Tooltip ****/

/**** Start Table ****/

table{
	margin:auto;
	/*width:50%;*/
}
tr.section1{
	border:white;
	border-bottom: 1px solid #E7E7E7;

}
tr.section1:last-of-type{
	border:white;
}
tr.section1 td{
		border-right:1px solid #E7E7E7;;
			font-size:15px !important;
}
tr.section1 td:last-of-type{
		border-right:white;
}
/**** End Table ****/

/*** End Scatterplot ***/

/*** Start Bar Graph ***/

.allContent {
	width:1000px;
}
.barGraph-title h2{
	text-align: center;
}
.barGraphText{
	position:absolute;
	top:0px;
	right:200px;
}
.enter, .update{
	font-weight: normal;
	font-size:13px;
}
.playAll {
	margin-left:20px;
	margin-bottom:5px;
	cursor:pointer;
}
.buttonContainer {
		margin:10px auto;
		display: inline-block;
		text-align: center;
		width:100%;
		overflow:hidden;
}
.button {
	display: inline-block;
	margin-left: 10px;
	font-size: 15px;
	border: 1px solid black;
	padding:5px;
	cursor:pointer;
}
.button.selected {
	font-weight: bold;
	border: 3px solid green;
	color:#296629;
}
.clearfix {
	clear:both;
}
#section2 .col-md-4{
	padding-top:10px;
}
/*** End Bar Graph ***/

/*** Start Line Graph ***/
path:hover {
	fill: #EED6A5;
}
.axis path,
.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}
.axis text {
	font-family: sans-serif;
	font-size: 11px;
}
.line {
stroke: black;
/*			stroke-width: 10px;*/
opacity: 0.7;
fill: none;
}
.line:hover {
/*	stroke: green;*/
/*			stroke-width:5px;*/
	opacity:1;
}
.label{
	font-size: small;
	font-family: avenir;
}
/**** Start Tooltip ****/
.s3tooltip {
position: absolute;
padding: 5px;
pointer-events: none;
border: 1px solid green;
border-radius: 12px;
line-height: 20px;
opacity: .07;
background-color:white;

}
.tooltipTail {
		position: absolute;
	/*	width: 0;
		height: 0; */
		border-top: 8px solid transparent;
		border-bottom: 8px solid transparent;
/*		border-right:25px solid green; */
	}
.tooltipTail.hidden{
	display:none;
	opacity:0;
}
.tooltipTail.show{
	opacity:1;
}
/**** End Tooltip ****/

/**** Start Table ****/
#modal {
  position:absolute;
  left: 50px;
  top:0px;
  z-index:1;
  background: white;
  border: 1px black solid;
  /*5px solid rgba(255, 255, 255, .5);*/
  /*box-shadow: 10px 10px 5px #888888;*/
  width:210px;
}
table{
	width:200px;
	margin:auto;
}
tr {
  border: 1px gray solid;
    width:200px;
    opacity:1;
}
td {
  font-size: 8px;
  padding-right:15px;
  padding-left:10px;
  text-align: center;
/*    min-width: 125px;*/
}
td.data {
    font-weight: 900;
  }
.sideBar{
	height:400px;
	position: absolute;
  top: 40px;
  right: 370px;

}
.fcomponents {
	clear:both;
}

/**** End Table ****/

/*** End Line Graph ***/

## reusable.d3.charts.js
d3.models = {};

//var rlegend = d3.edge.legend().fontSize(15)
//svg.datum(yearMean).call(rlegend)

d3.models.legend = function () {

	var fontSize = 15;
	var width = 650;
	var height = 400;
	var legendValues;

	var dispatch = d3.dispatch("mouseOver", "mouseOut");

	function render(selection) {
		//console.log(selection)
		selection.each(function(_data) {
			//console.log(_data)
			var legend = selection.selectAll("legend").data(legendValues).enter().append("g")
				.attr("class", "legend")
				.attr("transform", function (d, i) { return "translate(0," + i * 20 + ")"})

			 legend.append('rect')
			 		.attr({ x:width+5, y:5, width: 10, height: 10 })
          .style("fill", function (d, i) { return d.color;
        })

        legend.append('text')
        	.attr({ x: width+25, y: 15})
		  		.text(function (d, i) { return d.text})
		      .attr("class", "textselected")
		      .style("text-anchor", "start")
		      .style("font-size", fontSize)
		      .on("mouseover",dispatch.mouseOver)
		      .on("mouseout", dispatch.mouseOut)
		})//_selection.each()
	}//render()

	render.fontSize = function(_x) {
		if (!arguments.length) return fontSize;
		fontSize = _x;
		return this;
	}
	render.width = function(_x) {
		if (!arguments.length) return width;
		width = _x;
		return this;
	}
	render.height = function(_x) {
		if (!arguments.length) return height;
		height = _x;
		return this;
	}
	render.inputScale = function(_x) {
     if (!arguments.length) return inputScale;
        scale = _x;
        legendValues = [];
       	scale.domain().forEach(function (el) {
        var cellObject = {color: scale(el), text: el}
        legendValues.push(cellObject)
        //console.log(legendValues)
    	})

		return this;
  }

	d3.rebind(render, dispatch, "on")
	return render
}

## section1.js
( function () {
var m = {top:50,bottom:60,left:70,right:150};
var width = 650 - m.left - m.right;
var height = 500 - m.top - m.bottom;
var currentYear = "2002";
var tooltip;
var grouped = true;

var svg = d3.select(".regionalstats").append('svg')
	.attr("width",width + m.left + m.right)
	.attr("height", height + m.top + m.bottom)
	.append('g').attr("transform","translate(" + m.left + "," + m.top + ")")//.attr("transform","translate(50,50)")

//Create scales
var yScale = d3.scale.linear().range([height,0]);
var xScale = d3.scale.linear().range([0,width]);
var radiusScale = d3.scale.sqrt().range([6,20])
//var radiusScale = d3.scale.linear().range([6,20])
var colorScale = d3.scale.category10()

//Create axises
var yAxis = d3.svg.axis().scale(yScale).orient("left")
	.innerTickSize(-width)
	.tickFormat(function(d) { return d + "%" } );
var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
	.innerTickSize(-height)
	.tickFormat(function(d) { return d + "%" } );

	svg.append("g").attr("class","y Axis")//.attr("transform","translate(40,0)")
	.append("text")//.style("text-anchor","start")
  		.attr({ class: "ylabel", y: -60, x: -290, dy: ".71em" })
  		.attr("transform", "rotate(-90)")
  		.text("2012 Renewable Energy Output").style("font-size",20)

	svg.append('g').attr("class","x Axis").attr("transform","translate(0," + height + ")")
	.append("text").style("text-anchor", "middle")
  		.attr({  class: "xlabel", x: width/2 , y: 50})
  		.text("2002 Renewable Energy Output").style("font-size",20)
//API call for csv data and all formatting of data
d3.csv("data_regions.csv", function(data) {
	//d3.nest to rollup Region and mean of years
	var regions = d3.set(data.map(function(d) { return d.Region } ) )
		.values().filter(function(d) { return !(d == "World")}).sort(d3.acscending)
	colorScale.domain(regions)

	var rlegend = d3.models.legend().fontSize(15).width(width).height(height).inputScale(colorScale)
	svg.call(rlegend)

	var yearMean = d3.nest().key(function(d) { return d["Region"] } ).sortKeys(d3.ascending)
	  	.rollup(function(v) {
	  		//console.log(v)// [Object, Object]  each obj is a row of data
	  		return { mean: mean(v), countries: v.map(function(c) { return c.Location} ) }
	 			} )
			.entries(data)

	function mean(val) {
		var obj = {};
		var keys = d3.keys(data[0]).filter(function(key) { return !(key == "Location" || key == "Region") })
		keys.forEach(function(year) {
			var y = d3.mean(val, function(m) { return +m[year]
			} )
			obj[year] = d3.format(".2f")(y)
		})
		return obj
	}

	colorize(yearMean)

	function colorize (yearMean) {
		yearMean.forEach( function(d,i) {
			d.color = colorScale(d.key);
		})
	}

	var yearMeanNoWorld = yearMean.filter(function(d) { return !(d.key == "World") })

	//Converted yearMean object to format consistent with csv import.
	var formatYear = (function () {
		var array = []
		yearMean.forEach(function(d) {
			var obj = {};
			obj["Region"] = d.key
			obj["countries"] = d.values.countries
			//d3.entries will create new array with key\value property names
			d3.entries(d.values.mean).forEach(function(item) {
				obj[item.key] = item.value
			})
			obj["color"] = d.color
			array.push(obj)
		})
		return array
	}
	)()

	//Add radio buttons
	var radio_buttons = d3.selectAll('.radio_buttons')
		.on("click", function() {
			var value = this.value
			if(value == "Regions") { regionChart(data,yearMean,currentYear,formatYear) }
			else { countryChart(data,currentYear,yearMean,formatYear) }
		}	)
	//Call the chart
	regionChart(data,yearMean,currentYear,formatYear)
})//end csv

function countryChart(data,year,yearMean,formatYear) {
	grouped = false;
	var yearMean = formatYear
	var filterOutWorld = data.filter(function(d,i) { return !(d["Location"] == "World")} )
	var locations = (data.filter(function(d) { return !(d.Location == "World") } ) ).map(function(d)  { return d.Location } )
	var regions = d3.set(data.map(function(d) {  return d.Region } ) ).values().sort(d3.acscending)

		// yScale.domain([0,d3.max(yearMean, function(d) { return +d["2012"] + 7 } ) ] )//.range([height,0])
		// xScale.domain([0,d3.max(yearMean, function(d) { return +d[year] + 4  } ) ] )//.range([0,width])
	//radiusScale.domain(d3.extent(yearMean, function(d) {  return +d.values.countries.length } ) )

	var circles = svg.selectAll("circle").data(filterOutWorld)

	circles.enter().append("circle")
		.attr("cy", function(d) {
				var val;
				yearMean.forEach(function(obj) { if(d.Region == obj.Region) {
				val = +obj["2012"]
				}})
				return yScale(val)
		})
		.attr("cx", function(d) {
				var val;
				yearMean.forEach(function(obj) { if(d.Region == obj.Region) {
				val = +obj[year]
				}})
				return xScale(val)
		})
			.attr("r", function(d) { d.radius = 5; return 5 })
		.attr("class",function(d) { return d.Location + " " + "Country" })
		.style("fill",function(d) {
				var val;
				yearMean.forEach(function(obj) { if(d.Region == obj.Region) {
				val = obj.color
				d.color = val
				}})
				return val
		})
		.style("opacity",.8)
		.on("mouseover", mouseOver)
		.on("mouseout", mouseOut)
		.append('title')

	circles.attr("cy", function(d) {
				var val;
				yearMean.forEach(function(obj) { if(d.Region == obj.Region) {
				val = +obj["2012"]
				}})
				return yScale(val)
		})
		.attr("cx", function(d) {
				var val;
				yearMean.forEach(function(obj) { if(d.Region == obj.Region) {
				val = +obj[year]
				}})
				return xScale(val)
		})
		.attr("r", function(d) { d.radius = 5; return 5 })
		.attr("class",function(d) { return d.Location + " " + "Country" })
		.style("fill",function(d) {
				var val;
				yearMean.forEach(function(obj) { if(d.Region == obj.Region) {
						val = obj.color
				d.color = val
				}})
				return val
		})
		.style("opacity",.8)
		.on("mouseover", mouseOver)
		.on("mouseout", mouseOut)
		.append('title')

	yScale.domain([0,d3.max(data, function(d) { return +d["2012"] + 7 } ) ] )//.range([height,0])
	xScale.domain([0,d3.max(data, function(d) { return +d[year] + 4  } ) ] )//.range([0,width])

	circles.transition().duration(2000)
		.attr("cy", function(d,i) { return yScale(+d["2012"]) })
		.attr("cx", function(d,i) { return xScale(+d[year]) })
		.attr("r",5)

	d3.selectAll(".Region").transition().duration(2000).attr("r",0).remove()

	//Update Axises
	svg.select(".x.Axis").transition().duration(2000).call(xAxis);
	svg.select(".y.Axis").transition().duration(2000).call(yAxis);

}

function regionChart(data,yearMean,year,formatYear) {
	grouped = true
	var yearMean = formatYear.filter(function(d) { return !(d.Region == "World") })
	//yearMean =  yearMean.filter(function(d) { return (d.Region == "Latin America" ) })
	var filterOutWorld = data.filter(function(d,i) { return !(d["Location"] == "World")} )
	var locations = (data.filter(function(d) { return !(d.Location == "World") } ) ).map(function(d)  { return d.Location } )
	var regions = d3.set(data.map(function(d) {  return d.Region } ) ).values().sort(d3.acscending)

		yScale.domain([0,d3.max(yearMean, function(d) { return +d["2012"] + 7 } ) ] )//.range([height,0])
		xScale.domain([0,d3.max(yearMean, function(d) { return +d[year] + 4  } ) ] )//.range([0,width])
		radiusScale.domain(d3.extent(yearMean, function(d) {  return +d.countries.length } ) )

		var circles = svg.selectAll("circle").data(yearMean)

		circles.enter().append("circle")
			.attr("class",function(d) { return d.Region})
			.attr("r",20)

		circles
			//if x/y defined here then the newly added regions are
			//jumpted into position.  Not for a smooth transition
			//.attr("cy", function(d,i) { return yScale(+d["2012"]) })
			//.attr("cx", function(d,i) { return xScale(+d[year]) })
			.attr("radius",5)
			.attr("class",function(d) { return d.Region + " " + "Region"})
			//.style("fill",function(d,i) { return d.color})
			.style("fill",function(d,i) {
				return d.color})
			//.style("opacity",0)
			.on("mouseover", mouseOver)
			.on("mouseout", mouseOut)
			.append('title')

		circles.transition().duration(3000).style("opacity",.8)
			.attr("r", function(d) { d.radius = radiusScale(+d.countries.length)
				return radiusScale(+d.countries.length)})
				.attr("cy", function(d,i) { return yScale(+d["2012"]) })
			.attr("cx", function(d,i) { return xScale(+d[year]) })

		d3.selectAll(".Country").transition().duration(3000)
				.attr("cy", function(d) {
					var val;
					yearMean.forEach(function(obj) { if(d.Region == obj.Region) {
					val = +obj["2012"]
				}})
				return yScale(val)
		})
		.attr("cx", function(d) {
				var val;
				yearMean.forEach(function(obj) { if(d.Region == obj.Region) {
				val = +obj[year]
			}})
				return xScale(val)
		}).style("opacity",0).remove()

		svg.select(".x.Axis").transition().duration(2000).call(xAxis);
		svg.select(".y.Axis").transition().duration(2000).call(yAxis);
}

	function mouseOver(d) {

		var c = d3.select(this)
	 //	var cColor = d.color
		var cx = +c.attr("cx")
	 	var cy = +c.attr("cy")
		c.call(displayToolTip,d,cx,cy)

		var radiusOver = c.node().r.animVal.value;
			c.transition().duration(250)
			.attr("stroke-width",20)
			.attr("stroke", "rgba(230,230,230, .8)")
			.attr("r", d.radius + 10)

		var line1 = svg.append("line").datum(d)
		line1.call(createLine1)

		var line2 = svg.append("line").datum(d)
		line2.call(createLine2)
	}

	function mouseOut(d) {

		var c = d3.select(this)
		c.transition().duration(250)
			.attr("stroke-width",0)
			.attr("stroke", "rgba(230,230,230, .8)")
			.attr("r",d.radius )

		d3.selectAll(".line1").transition().duration(250).style("opacity",0).remove()
		d3.selectAll(".line2").transition().duration(250).style("opacity",0).remove()

		tooltip.transition().duration(250).style('opacity',0).remove()
	}

	function createLine1() {
				this
				.attr("x1",xScale(0) )
				.attr("y1", yScale(+this.datum()["2012"] )  )
				.attr("x2", xScale(+this.datum()[currentYear]) )
				.attr("y2", yScale(+this.datum()["2012"]) )
				.attr("stroke-width", 1)
				.attr("stroke", this.datum()["color"] ) //d3.select(this).style("fill")  )
				.style("opacity",1)
				.attr("class","line1")
	}

	function createLine2(){
			this
				.attr("x1", xScale(+this.datum()[currentYear])  )
				.attr("y1", height )
				.attr("x2", xScale(+this.datum()[currentYear]) )
				.attr("y2", yScale(+this.datum()["2012"]))
				.attr("stroke-width", 1)
				.attr("stroke", this.datum()["color"]  )
				.style("opacity",1)
				.attr("class","line2")
				//.attr("r",radiusOver + 10)
	}
	function displayToolTip(selection,d,cx,cy) {

			tooltip = d3.select(".regionalstats").append("div").attr("class","d3tooltip")
			tooltip.style("font-size", 10)
			tooltip.style("border" , "3px solid " + d.color )
				.transition().duration(250).style("opacity",1)

			if(grouped) {

				tooltip.html(
				'<span class="regionName">' + d.Region + '</span><br/>' +
				'<hr  class="d3tooltiphr" style="border: 1px solid ' +  d.color + ' " ' +  '>' +
				'<span class="key">2002:</span> <span class="value">' + +d["2002"] + '%</span><br/>'  +
				'<span class="key">2012:</span> <span class="value">' + +d["2012"] + '%</span><br/>' +
				'<hr class="d3tooltiphr" style="border: 1px solid ' +  d.color + ' " ' +  '>' +
				'<span class="key">Countries:</span>  <span class="value">' + d.countries.length + '</span>')
					.style("left", function() {
				 if ((cx + 100) > width ) { return (cx -30) + "px" }
					else { return (cx + 100) + "px" }
				} )
				.style("top", (cy) + "px")
			}

			else {
					tooltip.html(
				'<span class="regionName">' + d.Location + '</span><br/>' +
				'<hr  class="d3tooltiphr" style="border: 1px solid ' +  d.color + ' " ' +  '>' +
				'<span class="key">2002:</span> <span class="value">' + +d["2002"] + '%</span><br/>'  +
				'<span class="key">2012:</span> <span class="value">' + +d["2012"] + '%</span><br/>')
				//'<hr class="d3tooltiphr" style="border: 1px solid ' +  color + ' " ' +  '>')
					.style("left", function() {
				 if ((cx + 100) > width ) { return (cx -30) + "px" }
					else { return (cx + 100) + "px" }
				} )
				.style("top", (cy) + "px")
			}

			return tooltip
	}
})()
//1. xAxis width for Region is 441px but for Country is 399px
//RESOLUTION:
//2. After adding panel and id=expandwidth, id=reducewidth to section2 the hr divider
//wasn't applying the 40px margin-top and was placed directly under section1 col-md-8
//RESOLUTION; This has something to do with Margin refers to another's element position not including its margins. You cannot sum margins.
//as per http://stackoverflow.com/questions/14891152/css-margin-overlap-instead-of-giving-distance
//Decided to add a 40px margin to section 1 col-md-8

## section2.js
(function() {

	var margin = {top:10,right:0,bottom:10,left:40},
				width = 650 - margin.left - margin.right,
				height = 800 - margin.top - margin.bottom
	var colorScale = d3.scale.category10()
	var tempColor;
	var playInterval;
	var years = [2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012]
	var year = 2002;
	var data;

	//var source = d3.select("body")
	var barGraphTitle = d3.select(".barGraph-title")
	var playAll = d3.select(".playAll")
	var buttonYears = d3.select(".buttonContainer")
	var svg = d3.select('.countrystats').append("svg")
		.attr("width", width + margin.left + margin.right)
		.attr("height", height + margin.top + margin.bottom)
		.append("g")//.attr({ width: width, height: height, transfom: "translate(20,50)"})
	var worldTotal;

			// setup x
			var xValue = function(d) { return d[year];}, // data -> value
	    	xScale = d3.scale.linear().range([0,width - 160]).domain([0,100]), // value -> display
	    	xMap = function(d) { return xScale(xValue(d));}, // data -> display
	    	xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickSize(height);


	    	// setup y
			var yValue = function(d) { return d.Location;}, // data -> value
		    yScale = d3.scale.ordinal().rangeBands([0, height], .1), // value -> display
		    yMap = function(d) { return yScale(yValue(d));}, // data -> display
		    yAxis = d3.svg.axis().scale(yScale).orient("left");

			barGraphTitle.insert("h2").text("Renewable Energy (%) of Total Energy Generation")
			barGraphTitle.insert("h2").attr("class", "worldTotal").text("World Total: " )
			playAll.text("▶ PLAY ALL YEARS");

			svg.append('g').attr("class", "x Axis").attr("transform","translate(120,0)").call(xAxis)


//CSV.......
      d3.csv("data_regions.csv", function(data) {

      	var region = d3.set(data.map(function(d) { return d.Region } ) )
					.values().filter(function(d) { return !(d == "World")}).sort(d3.acscending)

				colorScale.domain(region)

      	var regions = d3.nest().key(function(d) { return d["Region"]})
      		.sortKeys(d3.ascending)
      		.entries(data)
      		.filter(function(d) { return !(d.key == "World")})

      	function colorize (regions) {
					regions.forEach( function(d,i) {
						d.color = colorScale(d.key);
					})
				}

				colorize(regions)

				var rlegend = d3.models.legend().fontSize(15).width(width-100).height(height).inputScale(colorScale)
				svg.datum(regions).call(rlegend)
      	data = data
      	worldVal = data

      	var buttons = buttonYears.selectAll("div").data(years).enter().append("div")
				.text(function(d) { return d})
				.attr("class", function(d) { if( d === year ) return "button selected"; else return "button" } )
				.on("click", function(d) { clearInterval(playInterval); update(d) })

         playAll.on("click", function() {
         	 svg.append("text")
	    			.attr("class", "loading")
				    .text("Loading ...").attr("font-size",20)
				    .attr("x", function () { return width/2; })
				    .attr("y", function () { return 30; });

           var i = 0;
           playInterval = setInterval(function() {

            update(years[i]);
            i++;
            if(i > years.length - 1) { clearInterval(playInterval);}
           }, 2000);
          });

        update(year,regions)
//UPDATE FUNCITON......
        function update(year,regions) {


        	xScale.domain([0,100])

      		//svg.append('g').attr("class", "x axis").attr("transform","translate(250,0)").call(xAxis)

        	svg.selectAll(".loading").remove()

        	total = worldVal.filter(function(d) { var total = d["Location"] === "World"; return total})

        	worldTotal = total[0][year]

        	barGraphTitle.select(".worldTotal").html("World Total: "  + worldTotal + "%")

      		d3.select(".selected").classed("selected", false)
      		buttons.attr("class", function(d) { if (d === year ) return "button selected"; else return "button"})
      		//REMOVE WORLD VALUE
      		data = data.filter(function(d) { return !(d["Location"] === "World") })
      		data.sort(function(a, b) {return d3.ascending(+a[year], +b[year]);});
         // console.log(data.map(function(d) {return d.Location}))

	      	yScale.domain(data.map(function(d) { return d.Location}))

	      	//Data Join
		      var rect = svg.selectAll("rect").data(data, function(d) { return d.Location})
	      	var text = svg.selectAll("text").data(data, function(d) { return d.Location})
	      	var label = svg.selectAll(".label").data(data, function(d) { return d.Location})

		      //Update
	      	rect.transition().duration(1000)
	      		.attr("y", function(d,i) { return yScale(d.Location) })
	      		.attr("width", function(d) { return xScale(+d[year])})
	      		//.attr("fill", function(d,i) { return color(i) })

	      	text.transition().duration(1000).style("opacity", 9)
	      		.attr("y", function(d,i) { return yScale(d.Location) + 12 } )
	      			.text(function(d) { return d["Location"] })

	      	label.transition().duration(1000).style("opacity", 9)
	      		.attr("y", function(d,i) { return yScale(d.Location) + 12 } )
	      		.attr("x", function(d,i) { return xScale(+d[year]) + 130})
	      		.text(function(d) { return +d[year]})

		      //Enter
	      	rect.enter().append('rect')
	      		.attr("x",120)
	      		.attr("width", function(d) { return xScale(+d[year])})
	      		.attr("y", function(d,i) { return yScale(d.Location) })
	      		.attr("height", yScale.rangeBand())
	      		.attr("fill", function(d,i) {
      				var val;
							regions.forEach(function(obj) {
								if(d.Region === obj.key) {
									val = obj.color }
							})
							return val
	      		})
	      		.on("mouseover", mouseover)
	      		.on("mouseout", mouseout)

	      	text.enter().append("text")
	      		.attr("x", 110)
	      		.attr("y", function(d,i) { return yScale(d.Location) + 12 } )
	      		.attr("font-size", 15)
	      		.attr("text-anchor", "end")
	      		.attr("font-weight", "bold")
	      		.attr("class","enter")
	      		.text(function(d) { return d["Location"] })
	      		// .text(function(d) { return d["Location"] + " " + +d[year] + "%"})

	      	label.enter().append("text")
	      		.attr("class", "label")
	      		.attr("x", function(d,i) { return xScale(+d[year]) + 130})
	      		.attr("y", function(d,i) { return yScale(d.Location) + 12})
	      		.attr("fill", "black")
	      		.attr("font-size" ,15)
	      		.text(function(d) { return +d[year]})

	      function mouseover (d) { tempColor = this.style.fill;
          d3.select(this).style('opacity', .5).style('fill', 'steelblue')}

        function mouseout (d) {
        	d3.select(this).style('opacity', 1).style('fill', tempColor)}
		       }
			});
	})()

## section3.js
	(function () {
	//Dimensions and padding
				var margin = {top:20,right:30,bottom:50,left:50}
			var w = 700- margin.left - margin.right;
			var h = 600 - margin.top - margin.bottom;
			var tooltipcolor;
			var iceland_active = true;

			var padding = [ 20, 10, 50, 50 ];  //Top, right, bottom, left
			var colorScale = d3.scale.category10()

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

			//Set up scales
			var xScale = d3.time.scale()
				.range([ margin.left, w - margin.left - margin.right]);

			var yScale = d3.scale.linear()
				.range([ margin.top, h - margin.bottom ]);

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

			var yAxis = d3.svg.axis().scale(yScale)
				.orient("left")
				.tickFormat(function(d) { return d + "%" } );

			//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 main SVG
			var svg = d3.select(".lineChart").append("svg")
				.attr("width", w + margin.left + margin.right)
				.attr("height", h)
				.append("g")

			var tooltip = d3.select(".lineChart").append("div")
				.attr("class","s3tooltip")

			var tooltipTail = d3.select(".lineChart").append('div')
					.attr("class","tooltipTail hidden")

			var sideBar = d3.select(".sideBar").append("div").attr("id", "modal")
			  .style("color", "black")

			//Load data
			d3.csv("data_regions.csv", function(data) {

				//d3.text("tooltip.html", function(data) { d3.select(".sideBar").append("div").attr("id", "modal").html(data)})

				var regions = d3.nest().key(function(d) { return d["Region"]}).sortKeys(d3.ascending).entries(data)
      	regions = regions.filter(function(d) { return !(d.key == "World")})

    	 	var region = d3.set(data.map(function(d) { return d.Region } ) )
				.values().filter(function(d) { return !(d == "World")}).sort(d3.acscending)

      	colorScale.domain(region)

      	function colorize (regions) {
					regions.forEach( function(d,i) {
						d.color = colorScale(d.key);
					})
				}

				colorize(regions)

				var years = d3.keys(data[0]).filter( function(key) { return key != "Location" && key != "Region" } )

				//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 Location name and empty array
					dataset[i] = {
						location: data[i].Location,
						region: data[i].Region,
						headlines: []
					};

					//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].headlines.push({
								year: years[j],
								amount: data[i][years[j]]

							});
						}
					}
				}

					//Converted data into new array of hashes {location:China,region:Asis,year:2002,value:12}
				var circleData = (function() {
					var array = [];
					var keys = d3.keys(data[0]).filter(function(key) { return !(key == "Location" || key == "Region") });
					data.forEach(function(d) {
						keys.forEach(function(year) {

							obj = {
								location:d.Location,
								region:d.Region,
								year:dateFormat.parse(year),
								value:+d[year]
							}
							array.push(obj)
						})
					})
					return array
				}
				)()

				//console.log(circleData)

				//tooltip1(iceland[0])

				xScale.domain(d3.extent(years, function(d) { return dateFormat.parse(d)}))
				yScale.domain([ d3.max(dataset, function(d) { return d3.max(d.headlines, function(d) {
							return +d.amount; });
					}),
					0
				]);

				//Make a group for each Nationality
				var groups = svg.selectAll("g").data(dataset).enter()
					.append("g")

				var text = groups.append("text")
					.attr("class", "label")
					.attr("x", w - 40 )

				//Within each group, create a new line/path,
				//binding just the headlines data to each one
				//.data(dataset) //using this format will warp the line color and append World as the
				//title for every line
				groups.selectAll("path").data(function(d) { return [d]}).enter().append("path")
					.style("stroke",
						function(d,i) {
      				var val;
							regions.forEach(function(obj) {
								if(d.region === obj.key) {
									val = obj.color }
							})
							d.color = val
							return val
	      		})
					.style("stroke-width", 3)
					.style("opacity",.4)
					.attr("id",function(d) { return d.region})
					.attr("class", function(d) {
							switch (d.region) {
								case "Oceana": return "line Oceana"
								case "Europe": return "line Europe"
								case "North America": return "line NA"
								case "Asia": return "line Asia"
								case "Middle East": return "line ME"
								case "Latin America": return "line LA"
								default: return "line"
							}
					})
					.on("mouseover", function(d) {
						tooltip1(d);
						mouseOver.call(this,d,d.color)
							//mouseOver(d,d.color)
					})
					.on("mouseout", function(d) {
						mouseout(d)
					})
					.attr("d", function(d) { return line(d.headlines)} )
					//.append("title").text(function(d) {return d.location})

		var points = svg.selectAll("circle").data(circleData)

		points.enter().append("circle")
					.attr("cx", function(d) {
						return xScale(d.year)})
					.attr("cy", function(d) { return yScale(d.value)})
					.attr("r", 0)
					.attr("class", "points")
					.style("fill", function(d) { return colorScale(d.region)} )
					.style("stroke","white")
					.style("stroke-width",2)
					.attr("id", function(d) { return d.location})
					.on("mouseover",circlemouseOver)
					.on("mouseout",circlemouseOut)
						//.append("title").text(function(d) { return d.value})


				if(iceland_active) {
				var iceland = dataset.filter(function(d) { return d.location == "Iceland"})
				mouseOver(iceland[0],"#7f7f7f")
				//circlemouseOver(iceland[0])
				tooltip1(iceland[0])
				iceland_active = false;
				}

				function circlemouseOver(d) {
					//console.log(d)
					var location = d.location
					path = d3.selectAll("path").filter(function(d) { return d["location"] === location})
					path.style("stroke-width", 10)
					//console.log(path)
					var circles = d3.selectAll("circle").filter(function(c) {
						return c.location == d.location
					}).attr("r",5).attr("fill",function(d) { return d.color})
					// lp.transition().style("stroke-width",10)
			// 		lp.style("stroke")


			// 		c = d3.select(this)
			// 			c.transition().duration(250)
			// .attr("stroke-width",20)
			// .attr("stroke", "rgba(230,230,2s30, .8)")
			// .attr("r", 10)
				}

				function circlemouseOut(d) {
				var location = d.location
					path = d3.selectAll("path").filter(function(d) { return d["location"] === location})
					path.style("stroke-width", 3)
						var circles = d3.selectAll("circle").filter(function(c) {
					return c.location == d.location
				}).attr("r",0)
				}

				function mouseOver(d,color) {
					if(iceland_active) {
						console.log("inside")
						//mouseout(iceland[0])
					}else {	path = d3.selectAll("path").filter(function(d) { return d["location"] === "Iceland"})
									path.style("stroke-width", 3)
									var circles = d3.selectAll("circle").filter(function(c) {return c.location == "Iceland" } ).attr("r",0)
					}


					// var year = d3.time.format("%Y")
					// var xDate = xScale.invert(d3.mouse(this)[0])


					// var xDate = x.invert(d3.mouse(this)[0]), //<-- give me the date at the x mouse position
	   		 	// bisect = d3.bisector(function(d) { return d.date; }).left, //<-- set up a bisector to search the array for the closest point to the left
	   			// idx = bisect(s.values, xDate); //<-- find that point given our mouse position

					var location = d.location
					path = d3.selectAll("path").filter(function(d) {
						return d["location"] === location})
					path.style("stroke-width", 10)
					sideBar.html(
								"<table> <tr>" +
								        "<th></th>" +
								   " </tr>" +
								    "<tr><td>Country</td>" + "<td>" + d.location  + "</td></tr>" +
								     "<tr><td>Region</td>" + "<td>" + d.region  + "</td></tr>" +
								     "<tr><td>2002</td>" + "<td>" + d.headlines[0].amount  + "</td></tr>" +
								     "<tr><td>2003</td>" + "<td>" + d.headlines[1].amount   + "</td></tr>" +
								     "<tr><td>2004</td>" + "<td>" + d.headlines[2].amount   + "</td></tr>" +
								     "<tr><td>2005</td>" + "<td>" + d.headlines[3].amount   + "</td></tr>" +
								     "<tr><td>2006</td>" + "<td>" + d.headlines[4].amount  + "</td></tr>" +
								     "<tr><td>2007</td>" + "<td>" + d.headlines[5].amount   + "</td></tr>" +
								     "<tr><td>2008</td>" + "<td>" + d.headlines[6].amount   + "</td></tr>" +
								     "<tr><td>2009</td>" + "<td>" + d.headlines[7].amount   + "</td></tr>" +
								     "<tr><td>2010</td>" + "<td>" + d.headlines[8].amount  + "</td></tr>" +
								     "<tr><td>2011</td>" + "<td>" + d.headlines[9].amount   + "</td></tr>" +
								     "<tr><td>2012</td>" + "<td>" + d.headlines[10].amount   + "</td></tr>" +
								"</table>"
								)
	// 				).style("background-color","rgba(214, 233, 198,0.5)" )
	// //.style("border","solid 10px " + c)
	// //.style("background-color", "#d6e9c6" )
	// 				var circles = d3.selectAll("circle").filter(function(c) {
	// 					return c.location == d.location
	// 				}).attr("r",5).attr("fill",function(d) { return d.color})


					.style("background-color","rgba(214, 233, 198,0.5)" )
						.style("border","solid 10px " + color)
	//.style("background-color", "#d6e9c6" )
					var circles = d3.selectAll("circle").filter(function(c) {
						return c.location == d.location
					}).attr("r",5).attr("fill",function(d) { return d.color})

				}

				// function getSortedKeys(obj) {
			 //    var keys = []; for(var val in obj) keys.push(val);
			 //    //console.log(keys)
			 //    return keys.sort(function(a,b){return obj[a]-obj[b]});
				// }

				function mouseout(d){
					var location = d.location
					path = d3.selectAll("path").filter(function(d) { return d["location"] === location})
					path.style("stroke-width", 3)
					//d3.selectAll("path").transition().style("stroke-width", 3)
					var circles = d3.selectAll("circle").filter(function(c) {
						return c.location == d.location
					}).attr("r",0)
							ttooltip.transition().duration(500).style("opacity",0)
					d3.select(".tooltipTail").classed("hidden",true)
				}

				function tooltip1 (d){
					var yl = yScale(+d.headlines[d.headlines.length -1 ].amount)
					tooltipTail(d)
					text.attr("y", yScale(+d.headlines[d.headlines.length -1 ].amount) + 4 )

					tooltip.style("opacity",0)
	  				tooltip.style("border" , "3px solid " + d.color).transition().duration(1000).style("opacity",1)
    				tooltip.html(
						'<span class="countryName">' + d.location + '</span><br/>') //+
						// '2012: <span class="value">' + d. + '%</span><br/>'  +
						// "2012"+ ": " + '<span class="value">' + "2010" + '%</span>')
						//positions tooltip on bottom of page
						// .style("left", (d3.event.pageX - 30) + "px")
						// .style("top", (d3.event.pageY -50 ) + "px")
					 	.style("left", w - 35 + "px")
						.style("top", yl -18 + "px")
					}

				function tooltipTail (d) {
					var currentYear = d.headlines
					var tailX = w -70;
					var tailY = yScale(+d.headlines[d.headlines.length -1 ].amount)
				  var tail = d3.select(".tooltipTail").classed("hidden",false)
				  .style("border-right" , "25px solid " + d.color)
				  	.transition().duration(1000)
						.style("left", tailX + 5 + "px")
						.style("top", tailY -8 + "px")
				}


				//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)
                // Add rotated "Number of Headlines" unit of measure text to x-axis
              .append("text")
              .attr("class", "label")
              .attr("transform", "rotate(-90)")
              .attr("x", -20)
              .attr("y", 5)
              .attr("dy", ".91em")
              .style("text-anchor", "end")
              .text("Percent of Engery Generation ");


			});
})()
			//End USA data load function
//1. Tooltip is positioned at top of page
//RESOLUTION: changed code to select(".tooltip") instead of body
//2. After adding Panel sideBar div positioned top left of page
//RESOLUTION:
Location	2002	2003	2004	2005	2006	2007	2008	2009	2010	2011	2012	Region
Australia	6.2	6	5.8	5.7	5.8	5.8	5.8	4.6	4.8	5.1	4.6	Oceana
Austria	21.3	18.7	19.7	21	22.1	24.1	25.3	27.8	27.2	26.6	29.5	Europe
Belgium	1.3	1.5	1.6	2	2.3	2.7	3.1	3.8	4.2	4.9	5.1	Europe
Brazil	39.4	42	42.3	42.9	43.3	44.4	44.5	45.8	44	42.7	42.2	Latin America
Canada	16.9	15.6	15.6	15.9	15.7	16.2	16.8	17.5	17.1	18	17.9	North America
Chile	26.2	24.8	24.2	25.1	25.3	23.5	24.4	26.1	22	23.1	24.1	Latin America
China	18.4	16.2	14.5	13.7	12.8	12.5	12.6	12.1	11.4	10.7	9.8	Asia
Czech Republic	3.7	3.4	3.8	4	4.2	4.7	4.9	5.8	6.3	6.9	7.5	Europe
Denmark	11	11.9	13.6	15	14.2	16.1	16.7	17.8	20	22.2	24.4	Scandinavia
Estonia	11.7	11.2	11.4	11.4	10.5	10.7	11.9	15.2	15.3	14.8	14.5	Europe
Finland	22.4	21.3	23.4	23.6	23.3	23.5	25.8	24	25.4	26.1	29.1	Scandinavia
France	5.8	5.8	5.8	5.7	5.9	6.3	7.1	7.5	7.9	7.2	7.9	Europe
Germany	3.2	3.8	4.4	5	5.8	7.9	8	8.8	9.9	10	10.7	Europe
Greece	4.9	5.3	5.3	5.4	5.9	5.7	5.6	6.4	7.7	7.9	8.7	Europe
Hungary	3.4	3.5	3.6	4.3	4.5	5.1	6	7.4	7.6	7.6	8	Europe
Iceland	75	75.2	74.8	75.9	78.4	81.6	81.3	81.8	82.5	83.8	84.7	Scandinavia
India	33.2	32.9	31.7	31.2	30.4	29.9	28.9	26.8	26.5	26.5	26.4	Asia
Indonesia	37.3	37.4	35.5	34.9	34.7	35.3	36.2	34.8	33.9	33.6	33.4	Asia
Ireland	1.8	1.7	2	2.5	2.9	3.2	3.9	4.6	4.7	6.2	6.1	Europe
Israel	3.6	3.5	3.8	4	3.7	3.7	4.7	5	5	4.9	4.8	Middle East
Italy	5.8	6	6.6	6.3	6.9	6.7	7.7	9.7	10.6	11.9	13.2	Europe
Japan	3.2	3.4	3.3	3.2	3.4	3.2	3.3	3.4	3.9	4.2	4.2	Asia
Korea	0.4	0.5	0.5	0.5	0.6	0.6	0.6	0.7	0.7	0.7	0.7	Asia
Luxembourg	1.1	1	1.2	1.6	1.8	3.1	3.1	3.3	3.1	2.9	3.2	Europe
Mexico	10.2	10.2	10.4	10.3	9.9	9.9	10	9.5	9.8	9.3	8.7	Latin America
Netherlands	1.9	1.8	2.1	2.7	3	3	3.5	4	3.8	4.3	4.3	Europe
New Zealand	29.8	29.7	31.3	31.6	32	32.2	32.9	35.8	38.9	40.4	38.3	Oceana
Norway	49.5	38.2	40	48.5	42.6	46.5	44.9	40.9	36.1	42.8	46.9	Scandinavia
Poland	4.7	4.6	4.7	4.8	4.8	5	5.7	6.7	7.2	7.8	8.8	Europe
Portugal	13.7	16.9	14.7	13.1	17.1	17.7	17.7	19.9	23.3	22.3	21.2	Europe
Russia	2.8	2.7	2.9	2.9	2.8	2.9	2.6	2.8	2.5	2.4	2.3	Asia
Slovak Republic	4	3.5	4	4.3	4.5	5.3	5.1	6.8	7.4	7.4	7.6	Europe
Slovenia	10.5	10.3	11.5	10.6	10.5	10.1	11	14.2	14.7	13.1	13.9	Europe
South Africa	12.1	11.3	10.5	10.7	11	10.2	9.7	10.1	10.3	10.5	10.6	Africa
Spain	5.4	6.9	6.3	5.9	6.5	7	7.6	9.7	11.7	11.7	11.9	Europe
Sweden	25.3	24.5	25	28.8	28.7	30.5	31.5	34.8	33.9	32.1	35.6	Scandinavia
Switzerland	16.8	16.8	16.4	16	15.5	17.8	17.8	17.8	19	18.1	20.5	Europe
Turkey	13.5	12.9	13.3	12	11.1	9.6	9.5	10.2	11.1	10	10.2	Asia
United Kingdom	1.2	1.2	1.5	1.8	1.9	2.2	2.6	3.2	3.3	4.1	4.5	Europe
United States	4	4.3	4.4	4.5	4.8	4.7	5.1	5.4	5.6	6.1	6.3	North America
European Union	5.7	5.9	6.3	6.5	6.9	7.6	8.2	9.2	10	10.2	10.5	Europe
World	12.7	12.6	12.4	12.4	12.4	12.5	12.7	13.1	13	13	13	World

	<!DOCTYPE html>
	<html lang="en" ng-app="myApp">
	<head>
	<meta charset="utf-8">
	<!-- // <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> -->
	<script src="http://d3js.org/d3.v3.js"></script>
	<script type="text/javascript" src="reusable.d3.charts.js"></script>


	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
	<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
	<link rel="stylesheet" href="renewable.css">
	<link href="http://fonts.googleapis.com/css?family=Lato:400,600" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:400,600" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:400,600" rel="stylesheet" type="text/css">
	<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>

	</head>
	<body>
	<div class="nav clearfix">
	<div class="container" id="fitwidth">
	<ul class="pull-left border">
	<li class="mainLogo"><a href="http://d3js.org/" target="_blank"><img src="https://raw.githubusercontent.com/jkeohan/portfolio/master/images/d3js.jpg" alt="D3"></a></li>
	<li class="mainLogo" id="ocd"><a href="https://data.oecd.org/energy/renewable-energy.htm" target="_blank"><img src="https://raw.githubusercontent.com/jkeohan/portfolio/master/images/logo-oecd-embed%402x.png"></a></li>
	</ul>
	<ul class="pull-left chart-types">
	<li><a href="index.html#section1">Scatterplot</a></li>
	<li><a href="index.html#section2">Bar Graph</a></li>
	<li><a href="index.html#section3">Line Chart</a></li>
	</ul>
	</div>
	</div>

	<div class="hero-shot"></div>
	<div class="main-content">
	<div class="containter main">
	<h1>D3 Charts on Renewable Energy</h1>
	<p class="intro">This site was created to demo several D3 charts and graphs developed while taking the <a href="http://journalismcourses.org/D3.html">Data Visualization and Inforgaphics with D3</a> online course provided by JournalismCourses.org. The course consisted of 6 modules and was desinged to introduce data vizualization best practices and then building several charts and graphs using D3. The data set was provided by OECD and consisted of the percentage of Renewable Energy production of 41 countries from 2002 to 2012</p>

	<span>Source: </span><a href="https://data.oecd.org/energy/renewable-energy.htm#indicator-chart">https://data.oecd.org/energy</a>
	<hr class="divider">
	</div>
	<a name="section1"></a>
	<div class="container main">
	<h1><span class="number">1 </span>Scatter Plot on Regional Growth</h1>
	<div class="row">
	<div class="col-md-8" id="reduceWidth" style="margin-bottom:40px">
	<div class="switch">
	<form>
	<label>Regions<input type="radio" name="choice" value="Regions" class="radio_buttons" checked></label>
	<label>Countries<input type="radio" name="choice" value="Countries" class="radio_buttons"></label>
	</form>
	</div>
	<div class="regionalstats" ></div>
	</div>
	<div class="col-md-4" id="expandWidth">

	<div class="panel panel-success">
	<div class="panel-heading"><h3>Functional Components</h3></div>
	<div class="panel-body">
	<p>Some of the d3.methods used in the importing and formatting data used to render the scatterplot included:</p>

	<table>
	<tr class="section1">
	<td>d3.csv</td>
	<td>d3.map</td>
	<td>d3.set</td>
	<td>d3.keys</td>
	</tr>
	<tr class="section1">
	<td>d3.mean</td>
	<td>d3.nest</td>
	<td>d3.extent</td>
	<td>d3.transition</td>
	</tr>
	</table>
	<br>
	<p>Additional functionality included:
	<ul>
	<li>Radio Buttons that transition regions/countries</li>
	<li>Resuable Legend Module</li>
	</ul>
	<p>This component was created following best practices outlined by Chris Viau in his book: <a href="http://bleedingedgepress.com/our-books/developing-a-d3-js-edge/">Developing a D3.js Edge"</a> and is called using <code>d3.models.legend()</code>.</p>
	<pre>
	<code>
	var rlegend = d3.models.legend()
	.fontSize(15)
	.width(width-160)
	.height(height)
	.inputScale(colorScale)
	svg.call(rlegend)
	</code></pre>
	</div>
	</div>
	</div>
	<hr class="divider">
	</div>
	<a name="section2"></a>
	<div class="container main" id="section2">
	<h1><span class="number">2 </span>Bar Graph On Country Growth</h1>
	<div class="row">
	<div class="col-md-8" id="reduceWidth">
	<div class="playAll"></div>
	<div class="buttonContainer"></div>
	<div class="clearfix"></div>
	<div class="countrystats"></div>
	</div>
	<div class="col-md-4" id="expandWidth">
	<div class="panel panel-success">
	<div class="panel-heading"><h3>Functional Components</h3></div>
	<div class="panel-body">
	<p>Some of the d3.methods used in the importing and formatting data used to render the scatterplot included:</p>

	<table>
	<tr class="section1">
	<td>d3.csv</td>
	<td>d3.map</td>
	<td>d3.set</td>
	<td>d3.keys</td>
	</tr>
	<tr class="section1">
	<td>d3.nest</td>
	<td>d3.max</td>
	<td>d3.extent</td>
	<td>d3.transition</td>
	</tr>
	</table>
	<br>
	<p>Additional functionality includes the ablility to sequentially cycle through the years by adding an "on click" eventreceiver to <code>"PLAY ALL YEARS"</code> button.</p>
	<pre><code> playAll.on("click", function() {
	svg.append("text")
	.attr("class", "loading")
	.text("Loading ...").attr("font-size",20)
	.attr("x",function() { return width/2; })
	.attr("y",function() { return height/2-5; });

	var i = 0;
	playInterval = setInterval(function() {

	update(years[i]);
	i++;
	if(i > years.length - 1) {
	clearInterval(playInterval);}
	}, 2000);
	});
	</code></pre>
	</div>
	</div>
	</div>
	</div>
	<hr class="divider">
	</div>
	<a name="section3"></a>
	<div class="container main" id="section3">
	<h1><span class="number">3 </span>Line Chart On Country Growth</h1>
	<div class="row">
	<div class="col-md-8" id="reduceWidth">
	<div class="lineChart"></div>
	<div class="sideBar"></div>
	</div>
	<div class="col-md-4" id="expandWidth">
	<div class="panel panel-success">
	<div class="panel-heading"><h3>Functional Components</h3></div>
	<div class="panel-body">
	<p>Some of the d3.methods used in the importing and formatting data used to render the scatterplot included:</p>

	<table>
	<tr class="section1">
	<td>d3.csv</td>
	<td>d3.map</td>
	<td>d3.set</td>
	<td>d3.keys</td>
	</tr>
	<tr class="section1">
	<td>d3.nest</td>
	<td>d3.sort</td>
	<td>d3.filter</td>
	<td>d3.transition</td>
	</tr>
	</table>
	<br>
	<p>Additional functionality includes:
	<ul>
	<li>Sliding tooltip</li>
	<li>Table displaying year data</li>
	<li>Line highlighted on mouseover</li>
	</ul>
	</p>
	</div>
	</div>
	</div>
	</div>
	</div>

	<script type="text/javascript" src="section1.js"></script>
	<script type="text/javascript" src="section2.js"></script>
	<script type="text/javascript" src="section3.js"></script>
	</body>
	</html>


	/* Start Navigation */
	.nav {
	/*1. images overflowed below the nav...R=added overflow hidden and revmoved set height
	There is
	*/
	/* height:50px;*/
	background-color: #85b433;
	border-bottom: 10px solid #FFB266;
	opacity:.8;
	}
	.nav a {
	color: #244774;
	font-family: 'Poiret One';
	font-size: 25px;
	font-weight: bold;
	padding: 14px 10px;
	/text-transform: uppercase;/
	text-decoration: none;
	}
	.nav li{
	/* 1. display: inline shortens the border to 1/4; */
	/* 2. display: block: stacks the li's; */
	display:inline-block;
	}
	.pull-left.border li+li {
	border-left: 3px solid #FFB266;
	/* height:50px;*/
	}
	.nav .pull-left img {
	max-height:50px;
	}
	.nav ul {
	/*1. ul with images had margin-bottom:10px set by bootstrap css. clearing that option then
	changed it to 14px but I couldn't find where that was configured.
	Grayed out rules are the unset rules, which use a special default stylesheet that is
	applied to all elements(the rules that make the element renderable, because all styles have to have a value).
	*/
	margin:auto;
	}
	.nav ul.chart-types{
	margin-top:8px;
	/margin-left:20px;/
	}
	/* End Navigation */

	/* Start Hero-Shot */
	.hero-shot {
	background-image: url(https://cloud.githubusercontent.com/assets/9553453/12076272/fecf1ecc-b171-11e5-9372-c649e4f5b787.jpg);
	width:auto;
	height:400px;
	background-repeat: no-repeat;
	background-size: 100%;
	}
	/* End Hero-Shot */

	/* Start Main-Content */
	#fitwidth{
	max-width: 970px !important;
	}
	.main-content{
	margin-left:5%;
	margin-right:5%;
	margin-top:-5%;
	background: white;
	padding-top:10px;
	padding-left:5px;
	padding-right: 5px;
	}
	.main-content .main{
	width:100%;
	}
	.divider{
	width:200px;
	margin-top:40px;
	margin-bottom:20px;
	border: 3px solid #85b433;
	clear:both;
	}
	.number {
	width: 40px;
	background-color: #85b433;;
	color: #fff;
	height: 40px;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	margin-top: -10px;
	font-weight: 300;
	line-height: 1.5em;
	font-size: 0.8em;
	}
	.intro {
	font-size: 18px;
	}
	/* End Main-Content */

	/** Start D3 Specific **/
	.Axis line {
	stroke: #000;
	stroke-width: .1;
	}
	.Axis path {
	display:none;
	}
	.Axis text {
	font-size: 10px;
	}
	/** Start Scatterplot **/

	#reduceWidth{
	max-width: 60%;
	}
	#expandWidth{
	width: 40% ;
	}
	.panel {
	width: 420px;
	}
	.panel-heading{
	text-align: center;
	}
	.panel-heading h3{
	color:black;
	margin:0px;
	}

	pre code{
	font-size: 13px !important;
	}
	/** Start Radio Button **/
	.switch {
	position: absolute;
	top: 20px;
	left: 70px;
	}
	.switch label:last-of-type{
	margin-left:15px;
	}
	.switch input {
	margin-left:5px;
	}
	.switch label{
	font-weight: normal;
	font-size:15px;
	}
	/** End Radio Button **/

	/** Start Tooltip **/
	.d3tooltip {
	position: absolute;
	padding: 5px;
	/pointer-events: none;/
	border: 1px solid green;
	border-radius: 12px;
	line-height: 20px;
	opacity: .07;
	background-color:white;
	}
	.d3tooltiphr {
	margin:2px 0;
	}
	.regionName{
	font-size:12px;
	font-weight: bold;
	text-align: center;
	display:block;
	margin-bottom:-20px;

	}
	.value {
	font-size:12px;
	font-weight: bold;
	margin-top:-10px;
	}
	.key {
	font-size:12px;
	}
	/** End Tooltip **/

	/** Start Table **/

	table{
	margin:auto;
	/width:50%;/
	}
	tr.section1{
	border:white;
	border-bottom: 1px solid #E7E7E7;

	}
	tr.section1:last-of-type{
	border:white;
	}
	tr.section1 td{
	border-right:1px solid #E7E7E7;;
	font-size:15px !important;
	}
	tr.section1 td:last-of-type{
	border-right:white;
	}
	/** End Table **/

	/* End Scatterplot */

	/* Start Bar Graph */

	.allContent {
	width:1000px;
	}
	.barGraph-title h2{
	text-align: center;
	}
	.barGraphText{
	position:absolute;
	top:0px;
	right:200px;
	}
	.enter, .update{
	font-weight: normal;
	font-size:13px;
	}
	.playAll {
	margin-left:20px;
	margin-bottom:5px;
	cursor:pointer;
	}
	.buttonContainer {
	margin:10px auto;
	display: inline-block;
	text-align: center;
	width:100%;
	overflow:hidden;
	}
	.button {
	display: inline-block;
	margin-left: 10px;
	font-size: 15px;
	border: 1px solid black;
	padding:5px;
	cursor:pointer;
	}
	.button.selected {
	font-weight: bold;
	border: 3px solid green;
	color:#296629;
	}
	.clearfix {
	clear:both;
	}
	#section2 .col-md-4{
	padding-top:10px;
	}
	/* End Bar Graph */

	/* Start Line Graph */
	path:hover {
	fill: #EED6A5;
	}
	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}
	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}
	.line {
	stroke: black;
	/* stroke-width: 10px;*/
	opacity: 0.7;
	fill: none;
	}
	.line:hover {
	/* stroke: green;*/
	/* stroke-width:5px;*/
	opacity:1;
	}
	.label{
	font-size: small;
	font-family: avenir;
	}
	/** Start Tooltip **/
	.s3tooltip {
	position: absolute;
	padding: 5px;
	pointer-events: none;
	border: 1px solid green;
	border-radius: 12px;
	line-height: 20px;
	opacity: .07;
	background-color:white;

	}
	.tooltipTail {
	position: absolute;
	/* width: 0;
	height: 0; */
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	/* border-right:25px solid green; */
	}
	.tooltipTail.hidden{
	display:none;
	opacity:0;
	}
	.tooltipTail.show{
	opacity:1;
	}
	/** End Tooltip **/

	/** Start Table **/
	#modal {
	position:absolute;
	left: 50px;
	top:0px;
	z-index:1;
	background: white;
	border: 1px black solid;
	/5px solid rgba(255, 255, 255, .5);/
	/box-shadow: 10px 10px 5px #888888;/
	width:210px;
	}
	table{
	width:200px;
	margin:auto;
	}
	tr {
	border: 1px gray solid;
	width:200px;
	opacity:1;
	}
	td {
	font-size: 8px;
	padding-right:15px;
	padding-left:10px;
	text-align: center;
	/* min-width: 125px;*/
	}
	td.data {
	font-weight: 900;
	}
	.sideBar{
	height:400px;
	position: absolute;
	top: 40px;
	right: 370px;

	}
	.fcomponents {
	clear:both;
	}

	/** End Table **/

	/* End Line Graph */
	d3.models = {};

	//var rlegend = d3.edge.legend().fontSize(15)
	//svg.datum(yearMean).call(rlegend)

	d3.models.legend = function () {

	var fontSize = 15;
	var width = 650;
	var height = 400;
	var legendValues;

	var dispatch = d3.dispatch("mouseOver", "mouseOut");

	function render(selection) {
	//console.log(selection)
	selection.each(function(_data) {
	//console.log(_data)
	var legend = selection.selectAll("legend").data(legendValues).enter().append("g")
	.attr("class", "legend")
	.attr("transform", function (d, i) { return "translate(0," + i * 20 + ")"})

	legend.append('rect')
	.attr({ x:width+5, y:5, width: 10, height: 10 })
	.style("fill", function (d, i) { return d.color;
	})

	legend.append('text')
	.attr({ x: width+25, y: 15})
	.text(function (d, i) { return d.text})
	.attr("class", "textselected")
	.style("text-anchor", "start")
	.style("font-size", fontSize)
	.on("mouseover",dispatch.mouseOver)
	.on("mouseout", dispatch.mouseOut)
	})//_selection.each()
	}//render()

	render.fontSize = function(_x) {
	if (!arguments.length) return fontSize;
	fontSize = _x;
	return this;
	}
	render.width = function(_x) {
	if (!arguments.length) return width;
	width = _x;
	return this;
	}
	render.height = function(_x) {
	if (!arguments.length) return height;
	height = _x;
	return this;
	}
	render.inputScale = function(_x) {
	if (!arguments.length) return inputScale;
	scale = _x;
	legendValues = [];
	scale.domain().forEach(function (el) {
	var cellObject = {color: scale(el), text: el}
	legendValues.push(cellObject)
	//console.log(legendValues)
	})

	return this;
	}

	d3.rebind(render, dispatch, "on")
	return render
	}
	( function () {
	var m = {top:50,bottom:60,left:70,right:150};
	var width = 650 - m.left - m.right;
	var height = 500 - m.top - m.bottom;
	var currentYear = "2002";
	var tooltip;
	var grouped = true;

	var svg = d3.select(".regionalstats").append('svg')
	.attr("width",width + m.left + m.right)
	.attr("height", height + m.top + m.bottom)
	.append('g').attr("transform","translate(" + m.left + "," + m.top + ")")//.attr("transform","translate(50,50)")

	//Create scales
	var yScale = d3.scale.linear().range([height,0]);
	var xScale = d3.scale.linear().range([0,width]);
	var radiusScale = d3.scale.sqrt().range([6,20])
	//var radiusScale = d3.scale.linear().range([6,20])
	var colorScale = d3.scale.category10()

	//Create axises
	var yAxis = d3.svg.axis().scale(yScale).orient("left")
	.innerTickSize(-width)
	.tickFormat(function(d) { return d + "%" } );
	var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
	.innerTickSize(-height)
	.tickFormat(function(d) { return d + "%" } );

	svg.append("g").attr("class","y Axis")//.attr("transform","translate(40,0)")
	.append("text")//.style("text-anchor","start")
	.attr({ class: "ylabel", y: -60, x: -290, dy: ".71em" })
	.attr("transform", "rotate(-90)")
	.text("2012 Renewable Energy Output").style("font-size",20)

	svg.append('g').attr("class","x Axis").attr("transform","translate(0," + height + ")")
	.append("text").style("text-anchor", "middle")
	.attr({ class: "xlabel", x: width/2 , y: 50})
	.text("2002 Renewable Energy Output").style("font-size",20)
	//API call for csv data and all formatting of data
	d3.csv("data_regions.csv", function(data) {
	//d3.nest to rollup Region and mean of years
	var regions = d3.set(data.map(function(d) { return d.Region } ) )
	.values().filter(function(d) { return !(d == "World")}).sort(d3.acscending)
	colorScale.domain(regions)

	var rlegend = d3.models.legend().fontSize(15).width(width).height(height).inputScale(colorScale)
	svg.call(rlegend)

	var yearMean = d3.nest().key(function(d) { return d["Region"] } ).sortKeys(d3.ascending)
	.rollup(function(v) {
	//console.log(v)// [Object, Object] each obj is a row of data
	return { mean: mean(v), countries: v.map(function(c) { return c.Location} ) }
	} )
	.entries(data)

	function mean(val) {
	var obj = {};
	var keys = d3.keys(data[0]).filter(function(key) { return !(key == "Location" \|\| key == "Region") })
	keys.forEach(function(year) {
	var y = d3.mean(val, function(m) { return +m[year]
	} )
	obj[year] = d3.format(".2f")(y)
	})
	return obj
	}

	colorize(yearMean)

	function colorize (yearMean) {
	yearMean.forEach( function(d,i) {
	d.color = colorScale(d.key);
	})
	}

	var yearMeanNoWorld = yearMean.filter(function(d) { return !(d.key == "World") })

	//Converted yearMean object to format consistent with csv import.
	var formatYear = (function () {
	var array = []
	yearMean.forEach(function(d) {
	var obj = {};
	obj["Region"] = d.key
	obj["countries"] = d.values.countries
	//d3.entries will create new array with key\value property names
	d3.entries(d.values.mean).forEach(function(item) {
	obj[item.key] = item.value
	})
	obj["color"] = d.color
	array.push(obj)
	})
	return array
	}
	)()

	//Add radio buttons
	var radio_buttons = d3.selectAll('.radio_buttons')
	.on("click", function() {
	var value = this.value
	if(value == "Regions") { regionChart(data,yearMean,currentYear,formatYear) }
	else { countryChart(data,currentYear,yearMean,formatYear) }
	} )
	//Call the chart
	regionChart(data,yearMean,currentYear,formatYear)
	})//end csv

	function countryChart(data,year,yearMean,formatYear) {
	grouped = false;
	var yearMean = formatYear
	var filterOutWorld = data.filter(function(d,i) { return !(d["Location"] == "World")} )
	var locations = (data.filter(function(d) { return !(d.Location == "World") } ) ).map(function(d) { return d.Location } )
	var regions = d3.set(data.map(function(d) { return d.Region } ) ).values().sort(d3.acscending)

	// yScale.domain([0,d3.max(yearMean, function(d) { return +d["2012"] + 7 } ) ] )//.range([height,0])
	// xScale.domain([0,d3.max(yearMean, function(d) { return +d[year] + 4 } ) ] )//.range([0,width])
	//radiusScale.domain(d3.extent(yearMean, function(d) { return +d.values.countries.length } ) )

	var circles = svg.selectAll("circle").data(filterOutWorld)

	circles.enter().append("circle")
	.attr("cy", function(d) {
	var val;
	yearMean.forEach(function(obj) { if(d.Region == obj.Region) {
	val = +obj["2012"]
	}})
	return yScale(val)
	})
	.attr("cx", function(d) {
	var val;
	yearMean.forEach(function(obj) { if(d.Region == obj.Region) {
	val = +obj[year]
	}})
	return xScale(val)
	})
	.attr("r", function(d) { d.radius = 5; return 5 })
	.attr("class",function(d) { return d.Location + " " + "Country" })
	.style("fill",function(d) {
	var val;
	yearMean.forEach(function(obj) { if(d.Region == obj.Region) {
	val = obj.color
	d.color = val
	}})
	return val
	})
	.style("opacity",.8)
	.on("mouseover", mouseOver)
	.on("mouseout", mouseOut)
	.append('title')

	circles.attr("cy", function(d) {
	var val;
	yearMean.forEach(function(obj) { if(d.Region == obj.Region) {
	val = +obj["2012"]
	}})
	return yScale(val)
	})
	.attr("cx", function(d) {
	var val;
	yearMean.forEach(function(obj) { if(d.Region == obj.Region) {
	val = +obj[year]
	}})
	return xScale(val)
	})
	.attr("r", function(d) { d.radius = 5; return 5 })
	.attr("class",function(d) { return d.Location + " " + "Country" })
	.style("fill",function(d) {
	var val;
	yearMean.forEach(function(obj) { if(d.Region == obj.Region) {
	val = obj.color
	d.color = val
	}})
	return val
	})
	.style("opacity",.8)
	.on("mouseover", mouseOver)
	.on("mouseout", mouseOut)
	.append('title')

	yScale.domain([0,d3.max(data, function(d) { return +d["2012"] + 7 } ) ] )//.range([height,0])
	xScale.domain([0,d3.max(data, function(d) { return +d[year] + 4 } ) ] )//.range([0,width])

	circles.transition().duration(2000)
	.attr("cy", function(d,i) { return yScale(+d["2012"]) })
	.attr("cx", function(d,i) { return xScale(+d[year]) })
	.attr("r",5)

	d3.selectAll(".Region").transition().duration(2000).attr("r",0).remove()

	//Update Axises
	svg.select(".x.Axis").transition().duration(2000).call(xAxis);
	svg.select(".y.Axis").transition().duration(2000).call(yAxis);

	}

	function regionChart(data,yearMean,year,formatYear) {
	grouped = true
	var yearMean = formatYear.filter(function(d) { return !(d.Region == "World") })
	//yearMean = yearMean.filter(function(d) { return (d.Region == "Latin America" ) })
	var filterOutWorld = data.filter(function(d,i) { return !(d["Location"] == "World")} )
	var locations = (data.filter(function(d) { return !(d.Location == "World") } ) ).map(function(d) { return d.Location } )
	var regions = d3.set(data.map(function(d) { return d.Region } ) ).values().sort(d3.acscending)

	yScale.domain([0,d3.max(yearMean, function(d) { return +d["2012"] + 7 } ) ] )//.range([height,0])
	xScale.domain([0,d3.max(yearMean, function(d) { return +d[year] + 4 } ) ] )//.range([0,width])
	radiusScale.domain(d3.extent(yearMean, function(d) { return +d.countries.length } ) )

	var circles = svg.selectAll("circle").data(yearMean)

	circles.enter().append("circle")
	.attr("class",function(d) { return d.Region})
	.attr("r",20)

	circles
	//if x/y defined here then the newly added regions are
	//jumpted into position. Not for a smooth transition
	//.attr("cy", function(d,i) { return yScale(+d["2012"]) })
	//.attr("cx", function(d,i) { return xScale(+d[year]) })
	.attr("radius",5)
	.attr("class",function(d) { return d.Region + " " + "Region"})
	//.style("fill",function(d,i) { return d.color})
	.style("fill",function(d,i) {
	return d.color})
	//.style("opacity",0)
	.on("mouseover", mouseOver)
	.on("mouseout", mouseOut)
	.append('title')

	circles.transition().duration(3000).style("opacity",.8)
	.attr("r", function(d) { d.radius = radiusScale(+d.countries.length)
	return radiusScale(+d.countries.length)})
	.attr("cy", function(d,i) { return yScale(+d["2012"]) })
	.attr("cx", function(d,i) { return xScale(+d[year]) })

	d3.selectAll(".Country").transition().duration(3000)
	.attr("cy", function(d) {
	var val;
	yearMean.forEach(function(obj) { if(d.Region == obj.Region) {
	val = +obj["2012"]
	}})
	return yScale(val)
	})
	.attr("cx", function(d) {
	var val;
	yearMean.forEach(function(obj) { if(d.Region == obj.Region) {
	val = +obj[year]
	}})
	return xScale(val)
	}).style("opacity",0).remove()

	svg.select(".x.Axis").transition().duration(2000).call(xAxis);
	svg.select(".y.Axis").transition().duration(2000).call(yAxis);
	}

	function mouseOver(d) {

	var c = d3.select(this)
	// var cColor = d.color
	var cx = +c.attr("cx")
	var cy = +c.attr("cy")
	c.call(displayToolTip,d,cx,cy)

	var radiusOver = c.node().r.animVal.value;
	c.transition().duration(250)
	.attr("stroke-width",20)
	.attr("stroke", "rgba(230,230,230, .8)")
	.attr("r", d.radius + 10)

	var line1 = svg.append("line").datum(d)
	line1.call(createLine1)

	var line2 = svg.append("line").datum(d)
	line2.call(createLine2)
	}

	function mouseOut(d) {

	var c = d3.select(this)
	c.transition().duration(250)
	.attr("stroke-width",0)
	.attr("stroke", "rgba(230,230,230, .8)")
	.attr("r",d.radius )

	d3.selectAll(".line1").transition().duration(250).style("opacity",0).remove()
	d3.selectAll(".line2").transition().duration(250).style("opacity",0).remove()

	tooltip.transition().duration(250).style('opacity',0).remove()
	}

	function createLine1() {
	this
	.attr("x1",xScale(0) )
	.attr("y1", yScale(+this.datum()["2012"] ) )
	.attr("x2", xScale(+this.datum()[currentYear]) )
	.attr("y2", yScale(+this.datum()["2012"]) )
	.attr("stroke-width", 1)
	.attr("stroke", this.datum()["color"] ) //d3.select(this).style("fill") )
	.style("opacity",1)
	.attr("class","line1")
	}

	function createLine2(){
	this
	.attr("x1", xScale(+this.datum()[currentYear]) )
	.attr("y1", height )
	.attr("x2", xScale(+this.datum()[currentYear]) )
	.attr("y2", yScale(+this.datum()["2012"]))
	.attr("stroke-width", 1)
	.attr("stroke", this.datum()["color"] )
	.style("opacity",1)
	.attr("class","line2")
	//.attr("r",radiusOver + 10)
	}
	function displayToolTip(selection,d,cx,cy) {

	tooltip = d3.select(".regionalstats").append("div").attr("class","d3tooltip")
	tooltip.style("font-size", 10)
	tooltip.style("border" , "3px solid " + d.color )
	.transition().duration(250).style("opacity",1)

	if(grouped) {

	tooltip.html(
	'<span class="regionName">' + d.Region + '</span><br/>' +
	'<hr class="d3tooltiphr" style="border: 1px solid ' + d.color + ' " ' + '>' +
	'<span class="key">2002:</span> <span class="value">' + +d["2002"] + '%</span><br/>' +
	'<span class="key">2012:</span> <span class="value">' + +d["2012"] + '%</span><br/>' +
	'<hr class="d3tooltiphr" style="border: 1px solid ' + d.color + ' " ' + '>' +
	'<span class="key">Countries:</span> <span class="value">' + d.countries.length + '</span>')
	.style("left", function() {
	if ((cx + 100) > width ) { return (cx -30) + "px" }
	else { return (cx + 100) + "px" }
	} )
	.style("top", (cy) + "px")
	}

	else {
	tooltip.html(
	'<span class="regionName">' + d.Location + '</span><br/>' +
	'<hr class="d3tooltiphr" style="border: 1px solid ' + d.color + ' " ' + '>' +
	'<span class="key">2002:</span> <span class="value">' + +d["2002"] + '%</span><br/>' +
	'<span class="key">2012:</span> <span class="value">' + +d["2012"] + '%</span><br/>')
	//'<hr class="d3tooltiphr" style="border: 1px solid ' + color + ' " ' + '>')
	.style("left", function() {
	if ((cx + 100) > width ) { return (cx -30) + "px" }
	else { return (cx + 100) + "px" }
	} )
	.style("top", (cy) + "px")
	}

	return tooltip
	}
	})()
	//1. xAxis width for Region is 441px but for Country is 399px
	//RESOLUTION:
	//2. After adding panel and id=expandwidth, id=reducewidth to section2 the hr divider
	//wasn't applying the 40px margin-top and was placed directly under section1 col-md-8
	//RESOLUTION; This has something to do with Margin refers to another's element position not including its margins. You cannot sum margins.
	//as per http://stackoverflow.com/questions/14891152/css-margin-overlap-instead-of-giving-distance
	//Decided to add a 40px margin to section 1 col-md-8
	(function() {

	var margin = {top:10,right:0,bottom:10,left:40},
	width = 650 - margin.left - margin.right,
	height = 800 - margin.top - margin.bottom
	var colorScale = d3.scale.category10()
	var tempColor;
	var playInterval;
	var years = [2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012]
	var year = 2002;
	var data;

	//var source = d3.select("body")
	var barGraphTitle = d3.select(".barGraph-title")
	var playAll = d3.select(".playAll")
	var buttonYears = d3.select(".buttonContainer")
	var svg = d3.select('.countrystats').append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")//.attr({ width: width, height: height, transfom: "translate(20,50)"})
	var worldTotal;

	// setup x
	var xValue = function(d) { return d[year];}, // data -> value
	xScale = d3.scale.linear().range([0,width - 160]).domain([0,100]), // value -> display
	xMap = function(d) { return xScale(xValue(d));}, // data -> display
	xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickSize(height);


	// setup y
	var yValue = function(d) { return d.Location;}, // data -> value
	yScale = d3.scale.ordinal().rangeBands([0, height], .1), // value -> display
	yMap = function(d) { return yScale(yValue(d));}, // data -> display
	yAxis = d3.svg.axis().scale(yScale).orient("left");

	barGraphTitle.insert("h2").text("Renewable Energy (%) of Total Energy Generation")
	barGraphTitle.insert("h2").attr("class", "worldTotal").text("World Total: " )
	playAll.text("▶ PLAY ALL YEARS");

	svg.append('g').attr("class", "x Axis").attr("transform","translate(120,0)").call(xAxis)


	//CSV.......
	d3.csv("data_regions.csv", function(data) {

	var region = d3.set(data.map(function(d) { return d.Region } ) )
	.values().filter(function(d) { return !(d == "World")}).sort(d3.acscending)

	colorScale.domain(region)

	var regions = d3.nest().key(function(d) { return d["Region"]})
	.sortKeys(d3.ascending)
	.entries(data)
	.filter(function(d) { return !(d.key == "World")})

	function colorize (regions) {
	regions.forEach( function(d,i) {
	d.color = colorScale(d.key);
	})
	}

	colorize(regions)

	var rlegend = d3.models.legend().fontSize(15).width(width-100).height(height).inputScale(colorScale)
	svg.datum(regions).call(rlegend)
	data = data
	worldVal = data

	var buttons = buttonYears.selectAll("div").data(years).enter().append("div")
	.text(function(d) { return d})
	.attr("class", function(d) { if( d === year ) return "button selected"; else return "button" } )
	.on("click", function(d) { clearInterval(playInterval); update(d) })

	playAll.on("click", function() {
	svg.append("text")
	.attr("class", "loading")
	.text("Loading ...").attr("font-size",20)
	.attr("x", function () { return width/2; })
	.attr("y", function () { return 30; });

	var i = 0;
	playInterval = setInterval(function() {

	update(years[i]);
	i++;
	if(i > years.length - 1) { clearInterval(playInterval);}
	}, 2000);
	});

	update(year,regions)
	//UPDATE FUNCITON......
	function update(year,regions) {


	xScale.domain([0,100])

	//svg.append('g').attr("class", "x axis").attr("transform","translate(250,0)").call(xAxis)

	svg.selectAll(".loading").remove()

	total = worldVal.filter(function(d) { var total = d["Location"] === "World"; return total})

	worldTotal = total[0][year]

	barGraphTitle.select(".worldTotal").html("World Total: " + worldTotal + "%")

	d3.select(".selected").classed("selected", false)
	buttons.attr("class", function(d) { if (d === year ) return "button selected"; else return "button"})
	//REMOVE WORLD VALUE
	data = data.filter(function(d) { return !(d["Location"] === "World") })
	data.sort(function(a, b) {return d3.ascending(+a[year], +b[year]);});
	// console.log(data.map(function(d) {return d.Location}))

	yScale.domain(data.map(function(d) { return d.Location}))

	//Data Join
	var rect = svg.selectAll("rect").data(data, function(d) { return d.Location})
	var text = svg.selectAll("text").data(data, function(d) { return d.Location})
	var label = svg.selectAll(".label").data(data, function(d) { return d.Location})

	//Update
	rect.transition().duration(1000)
	.attr("y", function(d,i) { return yScale(d.Location) })
	.attr("width", function(d) { return xScale(+d[year])})
	//.attr("fill", function(d,i) { return color(i) })

	text.transition().duration(1000).style("opacity", 9)
	.attr("y", function(d,i) { return yScale(d.Location) + 12 } )
	.text(function(d) { return d["Location"] })

	label.transition().duration(1000).style("opacity", 9)
	.attr("y", function(d,i) { return yScale(d.Location) + 12 } )
	.attr("x", function(d,i) { return xScale(+d[year]) + 130})
	.text(function(d) { return +d[year]})

	//Enter
	rect.enter().append('rect')
	.attr("x",120)
	.attr("width", function(d) { return xScale(+d[year])})
	.attr("y", function(d,i) { return yScale(d.Location) })
	.attr("height", yScale.rangeBand())
	.attr("fill", function(d,i) {
	var val;
	regions.forEach(function(obj) {
	if(d.Region === obj.key) {
	val = obj.color }
	})
	return val
	})
	.on("mouseover", mouseover)
	.on("mouseout", mouseout)

	text.enter().append("text")
	.attr("x", 110)
	.attr("y", function(d,i) { return yScale(d.Location) + 12 } )
	.attr("font-size", 15)
	.attr("text-anchor", "end")
	.attr("font-weight", "bold")
	.attr("class","enter")
	.text(function(d) { return d["Location"] })
	// .text(function(d) { return d["Location"] + " " + +d[year] + "%"})

	label.enter().append("text")
	.attr("class", "label")
	.attr("x", function(d,i) { return xScale(+d[year]) + 130})
	.attr("y", function(d,i) { return yScale(d.Location) + 12})
	.attr("fill", "black")
	.attr("font-size" ,15)
	.text(function(d) { return +d[year]})

	function mouseover (d) { tempColor = this.style.fill;
	d3.select(this).style('opacity', .5).style('fill', 'steelblue')}

	function mouseout (d) {
	d3.select(this).style('opacity', 1).style('fill', tempColor)}
	}
	});
	})()
	(function () {
	//Dimensions and padding
	var margin = {top:20,right:30,bottom:50,left:50}
	var w = 700- margin.left - margin.right;
	var h = 600 - margin.top - margin.bottom;
	var tooltipcolor;
	var iceland_active = true;

	var padding = [ 20, 10, 50, 50 ]; //Top, right, bottom, left
	var colorScale = d3.scale.category10()

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

	//Set up scales
	var xScale = d3.time.scale()
	.range([ margin.left, w - margin.left - margin.right]);

	var yScale = d3.scale.linear()
	.range([ margin.top, h - margin.bottom ]);

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

	var yAxis = d3.svg.axis().scale(yScale)
	.orient("left")
	.tickFormat(function(d) { return d + "%" } );

	//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 main SVG
	var svg = d3.select(".lineChart").append("svg")
	.attr("width", w + margin.left + margin.right)
	.attr("height", h)
	.append("g")

	var tooltip = d3.select(".lineChart").append("div")
	.attr("class","s3tooltip")

	var tooltipTail = d3.select(".lineChart").append('div')
	.attr("class","tooltipTail hidden")

	var sideBar = d3.select(".sideBar").append("div").attr("id", "modal")
	.style("color", "black")

	//Load data
	d3.csv("data_regions.csv", function(data) {

	//d3.text("tooltip.html", function(data) { d3.select(".sideBar").append("div").attr("id", "modal").html(data)})

	var regions = d3.nest().key(function(d) { return d["Region"]}).sortKeys(d3.ascending).entries(data)
	regions = regions.filter(function(d) { return !(d.key == "World")})

	var region = d3.set(data.map(function(d) { return d.Region } ) )
	.values().filter(function(d) { return !(d == "World")}).sort(d3.acscending)

	colorScale.domain(region)

	function colorize (regions) {
	regions.forEach( function(d,i) {
	d.color = colorScale(d.key);
	})
	}

	colorize(regions)

	var years = d3.keys(data[0]).filter( function(key) { return key != "Location" && key != "Region" } )

	//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 Location name and empty array
	dataset[i] = {
	location: data[i].Location,
	region: data[i].Region,
	headlines: []
	};

	//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].headlines.push({
	year: years[j],
	amount: data[i][years[j]]

	});
	}
	}
	}

	//Converted data into new array of hashes {location:China,region:Asis,year:2002,value:12}
	var circleData = (function() {
	var array = [];
	var keys = d3.keys(data[0]).filter(function(key) { return !(key == "Location" \|\| key == "Region") });
	data.forEach(function(d) {
	keys.forEach(function(year) {

	obj = {
	location:d.Location,
	region:d.Region,
	year:dateFormat.parse(year),
	value:+d[year]
	}
	array.push(obj)
	})
	})
	return array
	}
	)()

	//console.log(circleData)

	//tooltip1(iceland[0])

	xScale.domain(d3.extent(years, function(d) { return dateFormat.parse(d)}))
	yScale.domain([ d3.max(dataset, function(d) { return d3.max(d.headlines, function(d) {
	return +d.amount; });
	}),
	0
	]);

	//Make a group for each Nationality
	var groups = svg.selectAll("g").data(dataset).enter()
	.append("g")

	var text = groups.append("text")
	.attr("class", "label")
	.attr("x", w - 40 )

	//Within each group, create a new line/path,
	//binding just the headlines data to each one
	//.data(dataset) //using this format will warp the line color and append World as the
	//title for every line
	groups.selectAll("path").data(function(d) { return [d]}).enter().append("path")
	.style("stroke",
	function(d,i) {
	var val;
	regions.forEach(function(obj) {
	if(d.region === obj.key) {
	val = obj.color }
	})
	d.color = val
	return val
	})
	.style("stroke-width", 3)
	.style("opacity",.4)
	.attr("id",function(d) { return d.region})
	.attr("class", function(d) {
	switch (d.region) {
	case "Oceana": return "line Oceana"
	case "Europe": return "line Europe"
	case "North America": return "line NA"
	case "Asia": return "line Asia"
	case "Middle East": return "line ME"
	case "Latin America": return "line LA"
	default: return "line"
	}
	})
	.on("mouseover", function(d) {
	tooltip1(d);
	mouseOver.call(this,d,d.color)
	//mouseOver(d,d.color)
	})
	.on("mouseout", function(d) {
	mouseout(d)
	})
	.attr("d", function(d) { return line(d.headlines)} )
	//.append("title").text(function(d) {return d.location})

	var points = svg.selectAll("circle").data(circleData)

	points.enter().append("circle")
	.attr("cx", function(d) {
	return xScale(d.year)})
	.attr("cy", function(d) { return yScale(d.value)})
	.attr("r", 0)
	.attr("class", "points")
	.style("fill", function(d) { return colorScale(d.region)} )
	.style("stroke","white")
	.style("stroke-width",2)
	.attr("id", function(d) { return d.location})
	.on("mouseover",circlemouseOver)
	.on("mouseout",circlemouseOut)
	//.append("title").text(function(d) { return d.value})


	if(iceland_active) {
	var iceland = dataset.filter(function(d) { return d.location == "Iceland"})
	mouseOver(iceland[0],"#7f7f7f")
	//circlemouseOver(iceland[0])
	tooltip1(iceland[0])
	iceland_active = false;
	}

	function circlemouseOver(d) {
	//console.log(d)
	var location = d.location
	path = d3.selectAll("path").filter(function(d) { return d["location"] === location})
	path.style("stroke-width", 10)
	//console.log(path)
	var circles = d3.selectAll("circle").filter(function(c) {
	return c.location == d.location
	}).attr("r",5).attr("fill",function(d) { return d.color})
	// lp.transition().style("stroke-width",10)
	// lp.style("stroke")


	// c = d3.select(this)
	// c.transition().duration(250)
	// .attr("stroke-width",20)
	// .attr("stroke", "rgba(230,230,2s30, .8)")
	// .attr("r", 10)
	}

	function circlemouseOut(d) {
	var location = d.location
	path = d3.selectAll("path").filter(function(d) { return d["location"] === location})
	path.style("stroke-width", 3)
	var circles = d3.selectAll("circle").filter(function(c) {
	return c.location == d.location
	}).attr("r",0)
	}

	function mouseOver(d,color) {
	if(iceland_active) {
	console.log("inside")
	//mouseout(iceland[0])
	}else { path = d3.selectAll("path").filter(function(d) { return d["location"] === "Iceland"})
	path.style("stroke-width", 3)
	var circles = d3.selectAll("circle").filter(function(c) {return c.location == "Iceland" } ).attr("r",0)
	}


	// var year = d3.time.format("%Y")
	// var xDate = xScale.invert(d3.mouse(this)[0])


	// var xDate = x.invert(d3.mouse(this)[0]), //<-- give me the date at the x mouse position
	// bisect = d3.bisector(function(d) { return d.date; }).left, //<-- set up a bisector to search the array for the closest point to the left
	// idx = bisect(s.values, xDate); //<-- find that point given our mouse position

	var location = d.location
	path = d3.selectAll("path").filter(function(d) {
	return d["location"] === location})
	path.style("stroke-width", 10)
	sideBar.html(
	"<table> <tr>" +
	"<th></th>" +
	" </tr>" +
	"<tr><td>Country</td>" + "<td>" + d.location + "</td></tr>" +
	"<tr><td>Region</td>" + "<td>" + d.region + "</td></tr>" +
	"<tr><td>2002</td>" + "<td>" + d.headlines[0].amount + "</td></tr>" +
	"<tr><td>2003</td>" + "<td>" + d.headlines[1].amount + "</td></tr>" +
	"<tr><td>2004</td>" + "<td>" + d.headlines[2].amount + "</td></tr>" +
	"<tr><td>2005</td>" + "<td>" + d.headlines[3].amount + "</td></tr>" +
	"<tr><td>2006</td>" + "<td>" + d.headlines[4].amount + "</td></tr>" +
	"<tr><td>2007</td>" + "<td>" + d.headlines[5].amount + "</td></tr>" +
	"<tr><td>2008</td>" + "<td>" + d.headlines[6].amount + "</td></tr>" +
	"<tr><td>2009</td>" + "<td>" + d.headlines[7].amount + "</td></tr>" +
	"<tr><td>2010</td>" + "<td>" + d.headlines[8].amount + "</td></tr>" +
	"<tr><td>2011</td>" + "<td>" + d.headlines[9].amount + "</td></tr>" +
	"<tr><td>2012</td>" + "<td>" + d.headlines[10].amount + "</td></tr>" +
	"</table>"
	)
	// ).style("background-color","rgba(214, 233, 198,0.5)" )
	// //.style("border","solid 10px " + c)
	// //.style("background-color", "#d6e9c6" )
	// var circles = d3.selectAll("circle").filter(function(c) {
	// return c.location == d.location
	// }).attr("r",5).attr("fill",function(d) { return d.color})


	.style("background-color","rgba(214, 233, 198,0.5)" )
	.style("border","solid 10px " + color)
	//.style("background-color", "#d6e9c6" )
	var circles = d3.selectAll("circle").filter(function(c) {
	return c.location == d.location
	}).attr("r",5).attr("fill",function(d) { return d.color})

	}

	// function getSortedKeys(obj) {
	// var keys = []; for(var val in obj) keys.push(val);
	// //console.log(keys)
	// return keys.sort(function(a,b){return obj[a]-obj[b]});
	// }

	function mouseout(d){
	var location = d.location
	path = d3.selectAll("path").filter(function(d) { return d["location"] === location})
	path.style("stroke-width", 3)
	//d3.selectAll("path").transition().style("stroke-width", 3)
	var circles = d3.selectAll("circle").filter(function(c) {
	return c.location == d.location
	}).attr("r",0)
	ttooltip.transition().duration(500).style("opacity",0)
	d3.select(".tooltipTail").classed("hidden",true)
	}

	function tooltip1 (d){
	var yl = yScale(+d.headlines[d.headlines.length -1 ].amount)
	tooltipTail(d)
	text.attr("y", yScale(+d.headlines[d.headlines.length -1 ].amount) + 4 )

	tooltip.style("opacity",0)
	tooltip.style("border" , "3px solid " + d.color).transition().duration(1000).style("opacity",1)
	tooltip.html(
	'<span class="countryName">' + d.location + '</span><br/>') //+
	// '2012: <span class="value">' + d. + '%</span><br/>' +
	// "2012"+ ": " + '<span class="value">' + "2010" + '%</span>')
	//positions tooltip on bottom of page
	// .style("left", (d3.event.pageX - 30) + "px")
	// .style("top", (d3.event.pageY -50 ) + "px")
	.style("left", w - 35 + "px")
	.style("top", yl -18 + "px")
	}

	function tooltipTail (d) {
	var currentYear = d.headlines
	var tailX = w -70;
	var tailY = yScale(+d.headlines[d.headlines.length -1 ].amount)
	var tail = d3.select(".tooltipTail").classed("hidden",false)
	.style("border-right" , "25px solid " + d.color)
	.transition().duration(1000)
	.style("left", tailX + 5 + "px")
	.style("top", tailY -8 + "px")
	}


	//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)
	// Add rotated "Number of Headlines" unit of measure text to x-axis
	.append("text")
	.attr("class", "label")
	.attr("transform", "rotate(-90)")
	.attr("x", -20)
	.attr("y", 5)
	.attr("dy", ".91em")
	.style("text-anchor", "end")
	.text("Percent of Engery Generation ");


	});
	})()
	//End USA data load function
	//1. Tooltip is positioned at top of page
	//RESOLUTION: changed code to select(".tooltip") instead of body
	//2. After adding Panel sideBar div positioned top left of page
	//RESOLUTION: