D3 Examples - D3_Course_Mod5

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Loading CSV Data with D3</title>
        <!-- // <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> -->
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style>
        h1 {
            border-bottom: 2px solid green;
            width: auto;
        }
        .axis line {
            stroke: #000;
            stroke-width: .1;
        }
        .axis path {
            display:none;
        }
        .axis text {
            font-size: 14px;
        }
        .allContent {
            float:left;
            width:800px;
        }
        
        .barGraph-title h2 {
            /*Text-align won't work with inline*/
    
            text-align: center;
        }
​
            .barGraph-title p {
            text-align: center;
            font-size: 20px;
        }
​
​
        .barGraphText{
            position:absolute;
            right:200px;
            top:0px;
        }
        .button {
            border: 1px solid black;
            cursor:pointer;
            display: inline-block;
            font-size: 17px;
            margin-left: 10px;
            padding:5px;
        }
        .buttonContainer {
                display: inline-block;
                margin:0 auto;
                overflow:hidden;
                text-align: center;
                width:100%;
        }
        .button.selected {
            border: 3px solid green;
            color:#296629;
            font-weight: bold;
        }
        .clearfix {
            clear:both;
        }
        .countryName{ 
            font-size:18px;
            font-weight: bold;
        }
        .date{ 
        font-size:15px;
        }
        .moreInfo { 
            float:left;
            left:800px;
            position:absolute;
            top: 125px;
            width:400px;
        }
        .playAll {
            cursor:pointer;
            margin-left:12%;
            margin-bottom:5px;
        }
        .source {
            margin-left:215px;
        }
        .switch {
            display:inline;
            font-size: 20px;
            margin-left:190px;
            margin-top: 5px;
        }
        .radio {    
            height:1.3em;       
            width:1.3em; 
            }
        .tooltip {
          position: absolute;
            padding: 5px;
          pointer-events: none;
          border: 1px solid green;
          border-radius: 12px;
            line-height: 20px;
          opacity: .07;
          background-color:white;
        }
        .table{
            background:None;
        }
        .table ul{
            float:left;
            margin:0px;
            padding:0px;
        }
        .table ul li{
            list-style:none;
            padding:4px 9px; 
            text-align: center;
        }
        .table ul li.title{
            font-weight:bold;
            background:#fff;
            color:#000;
        }
        .table ul li.even{
            background:#fff;
        }
        .table ul li.odd{
            color: black;
            background-color: rgba(102, 255, 51, 0.09);
        }
        .value {
            font-size:15px;
            font-weight: bold;
        }
​
        .line-graph {
            float:left;
            left:800px;
            position:absolute;
            top: 125px;
            width:400px;
        }
​
        
        #compare { 
            float:left;
            left:800px;
            position:absolute;
            top: 600px;
            width:400px;
        }
        
        table {
            text-align:center;
        }
        
        td {
            width:120px;
        }
        
        </style>
​
    </head>
    <body>
        <div class="allContent">
            <div class="barGraph-title">
                <h2>Renewable Energy </h2><p>Percent of total engery generation from 2002 - 2012</p>
            </div>
            <div class="playAll">
                    <div class="switch"></div>
            </div>
            <div class="buttonContainer"></div>
            <div class="clearfix"></div>
            <div class="barGraph">
            
            </div>
            <div class="source"
                <span>Source:</span><a href="https://data.oecd.org/energy/renewable-energy.htm#indicator-chart">https://data.oecd.org/energy</a>
            </div>
        </div>
<!--        <div class="moreInfo">
            <h1 class="headline">Outliers</h1>
            <p class="textbox">The following country(s) have been removed from the scatter plot as to decrease the x\y axes maximum range values and thereby provide a better visual mapping of the remaing countries</p>
            <div class="table">
                <ul>
                <li class="title">Country</li>
                <li class="odd">Iceland</li>
                </ul>
​
                <ul>
                <li class="title">2012</li>
                <li class="odd">84.7%</li>
                </ul>
​
                <ul>
                <li class="title secondary">2002</li>
                <li class="odd secondary">75</li>
                </ul>
            </div>
        </div> -->
        <div class="line-graph"></div>
        <div id="compare"></div>
        
        <script type="text/javascript">     
​
            var margin = {top:50,right:80,bottom:50,left:40};
            var width = 780 - margin.left - margin.right;
            var height = 700 - margin.top - margin.bottom;
​
          var color = d3.scale.linear().range(['#B8B800','#296629'])
​
            var tempColor, playInterval, worldTotal;
            var activeCircle,innerCircle,tooltipcolor,oldColor;
            var icelandData;
            var years = [2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012]
            var currentYear = 2002; 
            var chartType = ["BAR","SCATTER PLOT"]
​
            //var source = d3.select("body")
            var barGraphTitle = d3.select(".barGraph-title")
            var playAll = d3.select(".playAll")
            var buttonYears = d3.select(".buttonContainer")
            var chartOptions = d3.select(".switch")
            var svg = d3.select(".barGraph").append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)        
                .append("g").attr("transform","translate(90,30)")
​
            //Scales
            var xScale = d3.scale.linear()
            var yScale = d3.scale.linear()
            //Axis
            var xAxis = d3.svg.axis()
            var yAxis = d3.svg.axis()
​
            // barGraphTitle.insert("h2").text("Renewable Energy (%) of Total Energy Generation")
            barGraphTitle.insert("h2").attr("class", "worldTotal").text("World Total: " )
            playAll.text("▶ PLAY ALL YEARS");
​
            var chartOptions = d3.select(".switch")
            chartOptions.selectAll("options").data(chartType).enter()
            .append("label").text(function(d) { return d})
            .append("input").attr("type", "radio").attr("name","chartType").attr("value", function(d) { return d })
            .attr("checked", function(d) {  if(d === "BAR") return  true } )
            .attr("class","radio")
​
            //CSV.......
​
      d3.csv("data.csv", function(data) {
​
        dataWorld = data
​
        //Update scales
        color.domain([9,data.length])
        //xScale.range([0,width ]).domain([0,d3.max(data)])//, function(d) { return +d[currentYear] + 5} ) ] )
​
                var filteredData = data.filter(function(d) { return !(d["Location"] === "World") } )//  && !(d["Location"] === "Iceland") })
        xScale.range([0,width ]).domain([0,d3.max(filteredData, function(d) { return +d[currentYear]} ) ] )
        yScale.range([height,0]).domain([0,d3.max(filteredData, function(d) { return +d[2012]})])
​
        xAxis.scale(xScale).orient("bottom").ticks(12).tickSize(-(height)).tickFormat(function(d) { return d + "%" } )
        yAxis.scale(yScale).orient("left").ticks(12).tickSize(-(width)).tickFormat(function(d) { return d + "%" } )
​
        svg.append('g').attr("class", "x axis").call(xAxis).attr("transform", "translate(0," + height + ")")
            .append("text").style("text-anchor", "end")
            .attr({  class: "xlabel", x: width - 10, y: -10})
        svg.append('g').attr("class", "y axis").call(yAxis)
            .append("text").style("text-anchor","end")
            .attr({ class: "ylabel", y: 12, x: -10, dy: ".71em" })
            .attr("transform", "rotate(-90)")   
            .text("2012 DATA").style("font-size",20)
​
        var buttons = buttonYears.selectAll("div").data(years).enter().append("div")
                .text(function(d) { return d})
                .attr("class", function(d) { if( d === currentYear ) return "button selected"; else return "button" } ) 
                .on("click", function(d) { 
                    d3.selectAll(".tooltip").transition().duration(1000).style("opacity",0)
                    if(activeCircle) { activeCircle.attr("r", 4).style("fill",oldColor) }
                    if(innerCircle) { d3.select(".innerCircle").remove()}
                    year = d;
                    clearInterval(playInterval); update(d) 
                    })
​
         playAll.on("click", function() {
                var i;
             if(activeCircle) { activeCircle.transition().duration(1000).attr("r",4) }
             if(innerCircle) { d3.select(".innerCircle").remove()}
             if( currentYear === 2002 ) { i = 2;    update(years[1]) 
                } else { i = 1; update(years[0]) }
​
           playInterval = setInterval(function() {
                if(activeCircle) { activeCircle.attr("r", 4).style("fill",oldColor) }
                            if(innerCircle) { d3.select(".innerCircle").remove()}
                d3.selectAll(".tooltip").transition().duration(1000).style("opacity",0)
                update(years[i]);
            i++;
            if(i > years.length - 1) { clearInterval(playInterval);}
           }, 3000);
          });
​
​
        update(currentYear)
​
                //UPDATE FUNCITON......
                function update(year) {
​
                    currentYear = year
​
                    total = dataWorld.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"})
​
            if(!icelandData) { icelandData = data.filter(function(d) { return d["Location"] === "Iceland"}) }
​
                    d3.select(".title.secondary").html( year )
                    d3.select(".odd.secondary").html( icelandData[0][year] + '%')
​
            data = data.filter(function(d) { return !(d["Location"] === "World") }) // && !(d["Location"] === "Iceland") })
​
                    var adata = data.sort(function(a, b) {return d3.ascending(+a[year], +b[year]);});
​
                    xScale.domain([0,d3.max(data, function(d) { return +d[year] + 5} ) ] )
                    yScale.domain([0,d3.max(data, function(d) { return +d[2012] + 5} ) ] )
​
            svg.select(".xlabel").text(year + " DATA").style("font-size",20)
​
                    var tooltip = d3.select("body").data(data).append("div") 
                        .attr("class","tooltip")
​
                    var circle = svg.selectAll("circle").data(data)
        
                     //Update
            circle.transition().duration(1000)//.ease("bounce")
                .attr("cx", function(d,i) { return xScale(+d[year]) })
                .attr("cy", function(d,i) { return yScale(+d[2012])})
                .attr("fill", function(d,i) { return color(i) })
​
                    //ENTER
                    circle.enter().append("circle")
                        .attr("cy", function(d) { return yScale(+d[2012])}) 
                        .attr("cx", function(d) { return xScale(+d[year])})
                        .attr("r", 4)
                        .style("fill", "white")
                        .on("mouseover", mouseover)
                        .on("mouseout", mouseout)
                        .transition().duration(250).delay(function(d,i) { return i * 25 } )
                        .style("fill", function(d,i) { return color(i)})
                
                    var temp=[];
                  function mouseout(d) {
            tooltip.transition().duration(1000).style('opacity',0)
                                if(activeCircle) {  
                                activeCircle.transition().duration(500).attr("r", 4).style("fill",tooltipcolor)
                                            .attr("stroke-width",0)
                                        }
                                if(innerCircle) { d3.select(".innerCircle").transition().attr("r",0) }
                                activeCircle = false;
            }//mouseout
​
                  function mouseover (d) {
                                temp.push(d);
                            tooltipcolor = this.style.fill 
                                var oldColor = tooltipcolor; 
                    
                                if(activeCircle) {  activeCircle.transition().duration(500).attr("r", 4).style("fill",oldColor)  }
                                activeCircle = d3.select(this)
                    
                                d3.select(this).transition().duration(1000)//.ease("bounce")
                                    .attr("cy", this.cy.animVal.value)
                                    .attr("cx", this.cx.animVal.value)
                                    .attr("r", 15)
                                    .attr("stroke-width",10)
                                    .attr("stroke","rgba(239, 239, 239, .8)")
​
                                tooltipcolor = this.style.fill
                                tooltip.style("opacity",0)
                                tooltip.style("border" , "3px solid " + tooltipcolor ).transition().duration(1000).style("opacity",1)
                        tooltip.html(
                                    '<span class="countryName">' + d.Location + '</span><br/>' + 
                                    '2012: <span class="value">' + d[2012] + '%</span><br/>'  + 
                                    currentYear + ": " + '<span class="value">' + d[currentYear] + '%</span>')
                                .style("left", (d3.event.pageX + 20) + "px")
                                .style("top", (d3.event.pageY -35 ) + "px")
                        
                        if (temp.length>0) { //construct the table
                         if (temp.length>2) { //if the table has already 2 countries, delete the first one
                                    temp.shift();
                            }
                            d3.selectAll("table").remove();
                            var tab="<table class=\"tab\"><th></th>";
                            for (i=0;i<temp.length;i++) {
                                tab=tab+"<th>"+temp[i].Location+"</th>";
                                }
                            for (i=0;i<years.length;i++) {
                                tab=tab+"<tr><td>"+years[i]+"</td>";
                                for (k=0;k<temp.length;k++) {
                                tab=tab+"<td>"+temp[k][years[i]]+"</td>";
                                }
                                tab=tab+"</tr>";
                            }
                            tab=tab+"</table>";
                            d3.select("#compare").html(tab);
                        }
          }
                }
            });
        </script>
    </body>
</html>
​
    