-
-
Save ginseng666/f717c69b244b6aa634d2 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Location | 2002 | 2003 | 2004 | 2005 | 2006 | 2007 | 2008 | 2009 | 2010 | 2011 | 2012 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|
Australia | 6.2 | 6 | 5.8 | 5.7 | 5.8 | 5.8 | 5.8 | 4.6 | 4.8 | 5.1 | 4.6 | |
Austria | 21.3 | 18.7 | 19.7 | 21 | 22.1 | 24.1 | 25.3 | 27.8 | 27.2 | 26.6 | 29.5 | |
Belgium | 1.3 | 1.5 | 1.6 | 2 | 2.3 | 2.7 | 3.1 | 3.8 | 4.2 | 4.9 | 5.1 | |
Brazil | 39.4 | 42 | 42.3 | 42.9 | 43.3 | 44.4 | 44.5 | 45.8 | 44 | 42.7 | 42.2 | |
Canada | 16.9 | 15.6 | 15.6 | 15.9 | 15.7 | 16.2 | 16.8 | 17.5 | 17.1 | 18 | 17.9 | |
Chile | 26.2 | 24.8 | 24.2 | 25.1 | 25.3 | 23.5 | 24.4 | 26.1 | 22 | 23.1 | 24.1 | |
China (People's Republic of) | 18.4 | 16.2 | 14.5 | 13.7 | 12.8 | 12.5 | 12.6 | 12.1 | 11.4 | 10.7 | 9.8 | |
Czech Republic | 3.7 | 3.4 | 3.8 | 4 | 4.2 | 4.7 | 4.9 | 5.8 | 6.3 | 6.9 | 7.5 | |
Denmark | 11 | 11.9 | 13.6 | 15 | 14.2 | 16.1 | 16.7 | 17.8 | 20 | 22.2 | 24.4 | |
Estonia | 11.7 | 11.2 | 11.4 | 11.4 | 10.5 | 10.7 | 11.9 | 15.2 | 15.3 | 14.8 | 14.5 | |
Finland | 22.4 | 21.3 | 23.4 | 23.6 | 23.3 | 23.5 | 25.8 | 24 | 25.4 | 26.1 | 29.1 | |
France | 5.8 | 5.8 | 5.8 | 5.7 | 5.9 | 6.3 | 7.1 | 7.5 | 7.9 | 7.2 | 7.9 | |
Germany | 3.2 | 3.8 | 4.4 | 5 | 5.8 | 7.9 | 8 | 8.8 | 9.9 | 10 | 10.7 | |
Greece | 4.9 | 5.3 | 5.3 | 5.4 | 5.9 | 5.7 | 5.6 | 6.4 | 7.7 | 7.9 | 8.7 | |
Hungary | 3.4 | 3.5 | 3.6 | 4.3 | 4.5 | 5.1 | 6 | 7.4 | 7.6 | 7.6 | 8 | |
Iceland | 75 | 75.2 | 74.8 | 75.9 | 78.4 | 81.6 | 81.3 | 81.8 | 82.5 | 83.8 | 84.7 | |
India | 33.2 | 32.9 | 31.7 | 31.2 | 30.4 | 29.9 | 28.9 | 26.8 | 26.5 | 26.5 | 26.4 | |
Indonesia | 37.3 | 37.4 | 35.5 | 34.9 | 34.7 | 35.3 | 36.2 | 34.8 | 33.9 | 33.6 | 33.4 | |
Ireland | 1.8 | 1.7 | 2 | 2.5 | 2.9 | 3.2 | 3.9 | 4.6 | 4.7 | 6.2 | 6.1 | |
Israel | 3.6 | 3.5 | 3.8 | 4 | 3.7 | 3.7 | 4.7 | 5 | 5 | 4.9 | 4.8 | |
Italy | 5.8 | 6 | 6.6 | 6.3 | 6.9 | 6.7 | 7.7 | 9.7 | 10.6 | 11.9 | 13.2 | |
Japan | 3.2 | 3.4 | 3.3 | 3.2 | 3.4 | 3.2 | 3.3 | 3.4 | 3.9 | 4.2 | 4.2 | |
Korea | 0.4 | 0.5 | 0.5 | 0.5 | 0.6 | 0.6 | 0.6 | 0.7 | 0.7 | 0.7 | 0.7 | |
Luxembourg | 1.1 | 1 | 1.2 | 1.6 | 1.8 | 3.1 | 3.1 | 3.3 | 3.1 | 2.9 | 3.2 | |
Mexico | 10.2 | 10.2 | 10.4 | 10.3 | 9.9 | 9.9 | 10 | 9.5 | 9.8 | 9.3 | 8.7 | |
Netherlands | 1.9 | 1.8 | 2.1 | 2.7 | 3 | 3 | 3.5 | 4 | 3.8 | 4.3 | 4.3 | |
New Zealand | 29.8 | 29.7 | 31.3 | 31.6 | 32 | 32.2 | 32.9 | 35.8 | 38.9 | 40.4 | 38.3 | |
Norway | 49.5 | 38.2 | 40 | 48.5 | 42.6 | 46.5 | 44.9 | 40.9 | 36.1 | 42.8 | 46.9 | |
Poland | 4.7 | 4.6 | 4.7 | 4.8 | 4.8 | 5 | 5.7 | 6.7 | 7.2 | 7.8 | 8.8 | |
Portugal | 13.7 | 16.9 | 14.7 | 13.1 | 17.1 | 17.7 | 17.7 | 19.9 | 23.3 | 22.3 | 21.2 | |
Russia | 2.8 | 2.7 | 2.9 | 2.9 | 2.8 | 2.9 | 2.6 | 2.8 | 2.5 | 2.4 | 2.3 | |
Slovak Republic | 4 | 3.5 | 4 | 4.3 | 4.5 | 5.3 | 5.1 | 6.8 | 7.4 | 7.4 | 7.6 | |
Slovenia | 10.5 | 10.3 | 11.5 | 10.6 | 10.5 | 10.1 | 11 | 14.2 | 14.7 | 13.1 | 13.9 | |
South Africa | 12.1 | 11.3 | 10.5 | 10.7 | 11 | 10.2 | 9.7 | 10.1 | 10.3 | 10.5 | 10.6 | |
Spain | 5.4 | 6.9 | 6.3 | 5.9 | 6.5 | 7 | 7.6 | 9.7 | 11.7 | 11.7 | 11.9 | |
Sweden | 25.3 | 24.5 | 25 | 28.8 | 28.7 | 30.5 | 31.5 | 34.8 | 33.9 | 32.1 | 35.6 | |
Switzerland | 16.8 | 16.8 | 16.4 | 16 | 15.5 | 17.8 | 17.8 | 17.8 | 19 | 18.1 | 20.5 | |
Turkey | 13.5 | 12.9 | 13.3 | 12 | 11.1 | 9.6 | 9.5 | 10.2 | 11.1 | 10 | 10.2 | |
United Kingdom | 1.2 | 1.2 | 1.5 | 1.8 | 1.9 | 2.2 | 2.6 | 3.2 | 3.3 | 4.1 | 4.5 | |
United States | 4 | 4.3 | 4.4 | 4.5 | 4.8 | 4.7 | 5.1 | 5.4 | 5.6 | 6.1 | 6.3 | |
European Union (28 countries) | 5.7 | 5.9 | 6.3 | 6.5 | 6.9 | 7.6 | 8.2 | 9.2 | 10 | 10.2 | 10.5 | |
World | 12.7 | 12.6 | 12.4 | 12.4 | 12.4 | 12.5 | 12.7 | 13.1 | 13 | 13 | 13 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Loading CSV Data with D3</title> | |
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
<script type="text/javascript" src="/../js/d3.min.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: center; | |
} | |
.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; | |
} | |
#compare { | |
float:left; | |
left:800px; | |
position:absolute; | |
top: 425px; | |
width:400px; | |
} | |
table { | |
text-align:center; | |
} | |
td { | |
width:120px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="allContent"> | |
<div class="barGraph-title"></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 id="compare"> | |
</div> | |
<script type="text/javascript"> | |
var margin = {top:50,right:50,bottom:50,left:40}; | |
var width = 750 - 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] + 5} ) ] ) | |
yScale.range([height,0]).domain([0,d3.max(filteredData, function(d) { return +d[2012] + 5})]) | |
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); | |
}); | |
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)} | |
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.selectAll(".x.axis").transition().duration(1000).call(xAxis) | |
//svg.selectAll(".y.axis").transition().duration(1000).call(yAxis) | |
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("click", onClick) | |
.transition().duration(250).delay(function(d,i) { return i * 25 } ) | |
.style("fill", function(d,i) { return color(i)}) | |
var temp=[]; | |
function onClick (d) { | |
temp.push(d); | |
if(this.style.fill != "rgb(255, 255, 255)") { var oldColor = tooltipcolor; | |
tooltipcolor = this.style.fill } | |
if(activeCircle) { | |
if( activeCircle[0][0] === d3.select(this)[0][0]) { console.log("true that"); return} | |
} | |
if(activeCircle) { activeCircle.transition().duration(500).attr("r", 4).style("fill",oldColor) } | |
if(innerCircle) { d3.select(".innerCircle").remove()} | |
activeCircle = d3.select(this) | |
innerCircle = svg.append("circle").attr("r",0).attr("class","innerCircle") | |
.transition().duration(1000) | |
.attr("cy", this.cy.animVal.value) | |
.attr("cx", this.cx.animVal.value) | |
.attr("r", 6) | |
.attr("stroke",tooltipcolor).style("fill",tooltipcolor) | |
d3.select(this).transition().duration(1000).ease("bounce") | |
.attr("cy", this.cy.animVal.value) | |
.attr("cx", this.cx.animVal.value).attr("r", 15) | |
.style("fill","white") | |
.attr("stroke",tooltipcolor) | |
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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment