Skip to content

Instantly share code, notes, and snippets.

@oliviac12

oliviac12/.block

Last active May 15, 2017 16:55
Show Gist options
  • Save oliviac12/e107fd9094904f6d86484b81e3f5c36a to your computer and use it in GitHub Desktop.
Save oliviac12/e107fd9094904f6d86484b81e3f5c36a to your computer and use it in GitHub Desktop.
Download ZIP
Animation Scatter Plot
Raw
.block
license: mit
Raw
README.md

Built with blockbuilder.org

Transition and update scattor plot

data source: Renewable Energy Projects from world bank

Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type = "text/css">
svg{
border: 1px solid rgb(93,39,200)
text{
font-size: 14px
}
circle {
fill-opacity: 0.8;
}
</style>
</head>
<body>
<script type="text/javascript">
var xdim = "investmen_Loan",
ydim = "investment_approved",
colordim = "Sector";
var margin = { top: 15, right: 12, bottom: 33, left: 50 },
width = 500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var data;
var xScale = d3.scaleLinear();
var yScale = d3.scaleLinear();
var duration = 1500;
var year = 2002;
var chart = d3.select("body")
.append("div")
var header = chart.append("h2")
// .datum(nested[3]); // add data to the chart
var svg = chart.append('svg')
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + [margin.left, margin.top] + ")");
function update(){
var filteredData = data.filter(function(d){
return d.year === year;
});
var headers = header.text(year)
headers.exit()
.transition().duration(duration)
.remove();
var header_enter = headers
.enter().append('h2')
header_enter.transition()
.delay(function(d, i) {console.log(i, d); return i * 100})
.duration(duration)
headers.transition()
.duration(duration)
// already know what data we have )
// circles are the update selction
var circles = svg.selectAll('circle')
.data(filteredData, function(d) {
return d.sector + d.investmen_Loan
});
//remove exit selection
circles.exit()
.transition().duration(duration)
.attr('r', 0)
.remove();
// create enter
var enter = circles
.enter().append('circle')
.attr('cx', function(d) { return xScale(d.investmen_Loan); });
enter.transition()
.delay(function(d, i) {console.log(i, d); return i * 100})
.duration(duration)
.attr('r', 10)
.attr('cy', function(d) {return yScale(d.investment_approved);})
.attr('cx', function(d) {return xScale(d.investmen_Loan);})
.attr('fill', function(d) {return colorScale(d.Sector);});
circles.transition()
.duration(duration)
.attr('r', 10)
.attr('cy', function(d) {return yScale(d.investment_approved);})
.attr('cx', function(d) {return xScale(d.investmen_Loan);})
.attr('fill', function(d) {return colorScale(d.Sector);});
// console.log(filteredData)
};
setInterval(function(){
year = year + 1;
if (year > 2016) {
year = 2002;
}
update();
}, duration * 2);
d3.csv("Renwable_clean.csv", function(error, response) {
if (error) console.log(error);
console.log(response.year)
// coerce the data to a number
response.forEach(function(d) {
d[xdim] = +d[xdim];
d[ydim] = +d[ydim];
d.year = +d.year;
});
yScale
.range([height, 0])
.domain([0, d3.max(response, function(d) { return d[ydim]; })]);
// .round(true);
xScale
.range([0, width])
.domain([0, d3.max(response, function(d) { return d[xdim]; })]);
var xAxis = d3.axisBottom()
.scale(xScale);
var yAxis = d3.axisLeft()
.scale(yScale);
svg.append("g")
.attr("class", "y--axis")
.call(yAxis)
svg.append("g")
.attr("class", "x--axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("text")
.attr("text-anchor", "middle") // this makes it easy to centre the text as the transform is applied to the anchor
.attr("transform", "translate("+(- margin.left/1.5)+", "+(height/2)+")rotate(-90)") // text is drawn off the screen top left, move down and out and rotate
.text("Value");
svg.append("text")
.attr("text-anchor", "middle") // this makes it easy to centre the text as the transform is applied to the anchor
.attr("transform", "translate("+ (width/2) +"," + (height + margin.bottom -3) + ")") // centre below axis
.text("Google");
colorScale = d3.scaleOrdinal(d3.schemeCategory20);
data = response;
});
</script>
</body>
Raw
Renwable_clean.csv
Date.Disclosed Project.Name Project.Number IFC.Country.Code Sector Environmental.Category Status Projected.Board.Date investmen_Loan investment_approved year
1 4/4/16 Karaca Hydro 37872 TUR Large Hydro - Renewable Energy Generation B Active 5/6/16 47 47 2016
2 3/17/16 Envision 36094 CHA Wind Turbine Machinery B Pending Disbursement 4/18/16 50 50 2016
3 2/5/16 OAWPL and OAPWPL 37086 IND Wind Power - Renewable Energy Generation B Pending Disbursement 3/10/16 60.4 60.4 2016
4 2/4/16 Canadian Solar 36142 WLD Solar Photovoltaic Equipment B Active 11/20/15 40 60 2015
5 1/14/16 FRV Solar Jordan 36877 JOR Solar - Renewable Energy Generation B Pending Disbursement 2/15/16 27.5 29.5 2016
6 11/4/15 Azure Karnataka 36716 IND Solar - Renewable Energy Generation B Pending Signing 12/4/15 29.9 29.9 2015
7 9/16/15 KTDA Small Hydro 36402 KEN Small Hydro ( B Pending Disbursement 10/20/15 12.5 12.5 2015
8 8/20/15 Karot Hydro 36008 PAK Large Hydro - Renewable Energy Generation A Pending Signing 10/22/15 100 100 2015
9 11/18/14 Energ�_a Cinco Estrellas, S.A. de C.V. 35364 HDS Solar - Renewable Energy Generation B Active 1/8/15 25 26.35 2015
10 11/12/14 Gul Ahmed Wind Limited 35088 PAK Wind Power - Renewable Energy Generation B Active 12/15/14 11.7 15 2014
11 10/6/14 Green Infra Wind 35415 IND Wind Power - Renewable Energy Generation B Active 11/10/14 59.1 59.1 2014
12 9/26/14 Gulpur Hydro 32874 PAK Large Hydro - Renewable Energy Generation A Active 12/3/14 60 60 2014
13 9/24/14 Valle Solar PV 35080 HDS Solar - Renewable Energy Generation B Active 10/27/14 30 30.75 2014
14 9/19/14 Acme Solar NSM 35187 IND Solar - Renewable Energy Generation B Active 5/24/14 0 0 2014
15 8/28/14 Azure Clean 35058 IND Solar - Renewable Energy Generation B Active 9/30/14 13.94 13.94 2014
16 8/15/14 Pacifico Solar 34975 HDS Solar - Renewable Energy Generation B Active 9/15/14 46 46 2014
17 8/11/14 Thomas Lloyd RE 34754 PHL Renewable Energy Holding Companies B Hold 9/11/14 104.7 104.7 2014
18 8/1/14 Jordan Solar One 35479 JOR Solar - Renewable Energy Generation B Active 9/5/14 22.5 22.5 2014
19 7/7/14 Arabia One Solar 35474 JOR Solar - Renewable Energy Generation B Active 8/8/14 11.8 11.8 2014
20 7/3/14 Adenium Jordan-1 35467 JOR Solar - Renewable Energy Generation B Active 8/8/14 41.2 41.2 2014
21 7/3/14 Falcon PV 35483 JOR Solar - Renewable Energy Generation B Active 8/8/14 13.1 13.1 2014
22 7/3/14 Shamsuna PV 35460 JOR Solar - Renewable Energy Generation B Active 8/8/14 9.85 9.85 2014
23 6/27/14 BMR Wind 35081 JAM Wind Power - Renewable Energy Generation B Active 7/29/14 10 10 2014
24 6/27/14 Penonome Wind 34810 PAN Wind Power - Renewable Energy Generation B Active 7/31/14 66 89 2014
25 5/13/14 Luz del Norte 34405 CHL Solar - Renewable Energy Generation B Active 6/16/14 60 60 2014
26 3/28/14 OffGrid Electric 34292 TAN Solar Photovoltaic Equipment C Active 4/30/14 3.38 3.38 2014
27 3/14/14 DJEPL and UUPPL 34565 IND Wind Power - Renewable Energy Generation B Active 4/28/14 50.03 50.03 2014
28 2/10/14 Vorotan Hydros 33450 ARM Large Hydro - Renewable Energy Generation B Active 3/18/14 16.66 23.8 2014
29 1/31/14 Rudine WPP 34079 HRV Wind Power - Renewable Energy Generation B Active 3/14/14 27.22 27.22 2014
30 12/13/13 NSL Vaspet (40 MW wind) 34506 IND Wind Power - Renewable Energy Generation B Pending Disbursement 1/15/14 15.01 15.01 2014
31 11/27/13 ACWA Power Ouarzazate 32334 MYC Solar - Renewable Energy Generation A Pending Disbursement 1/29/14 9.75 10.01 2014
32 10/18/13 Kabeli 30977 NEP Large Hydro - Renewable Energy Generation A Hold 12/23/13 19.3 19.3 2013
33 10/10/13 Enel Wind Brazil 33579 BRA Wind Power - Renewable Energy Generation A Active 12/12/13 200 200 2013
34 10/3/13 Adjaristsqali Georgia LLC 33435 GEO Large Hydro - Renewable Energy Generation A Active 12/4/13 71 105 2013
35 8/22/13 Metro Power Company Limited 33496 PAK Wind Power - Renewable Energy Generation B Active 9/27/13 22.5 25.76 2013
36 7/29/13 Alto Maipo 31632 CHL Large Hydro - Renewable Energy Generation A Active 9/30/13 150 150 2013
37 5/21/13 La Huayca II 33192 CHL Solar - Renewable Energy Generation B Active 6/28/13 14.3 14.3 2013
38 5/20/13 SunEdison CAP 33191 CHL Solar - Renewable Energy Generation B Active 6/20/13 65 65 2013
39 5/17/13 SunEdison Merchant 33456 CHL Solar - Renewable Energy Generation B Active 6/18/13 38 38 2013
40 4/29/13 Kurum International SH.A. 33378 ALB Large Hydro - Renewable Energy Generation B Active 5/31/13 44.91 44.91 2013
41 4/24/13 Jelinak 32218 HRV Wind Power - Renewable Energy Generation B Active 5/24/13 24.85 24.85 2013
42 4/24/13 Alibunar WPP 32752 SRB Wind Power - Renewable Energy Generation B Pending Signing 5/27/13 25.5 25.5 2013
43 4/17/13 ACME Energy 32497 IND Solar - Renewable Energy Generation B Active 5/24/13 50 50 2013
44 3/7/13 Zhaoheng Hydropower Holdings Ltd. 30266 CHA Large Hydro - Renewable Energy Generation A Completed 5/9/13 50 75 2013
45 2/8/13 Aura Solar 32871 MXC Solar - Renewable Energy Generation B Completed 3/11/13 25 25 2013
46 2/8/13 Amakhala Wind 33257 SOU Wind Power - Renewable Energy Generation B Active 3/13/13 70.7 70.7 2013
47 1/25/13 Bhilwara Captive 33351 IND Wind Power - Renewable Energy Generation B Active 2/28/13 7.56 7.56 2013
48 1/18/13 Tafila Wind 31627 JOR Wind Power - Renewable Energy Generation B Active 2/21/13 75 75 2013
49 11/16/12 SEI Solar Power Pvt. Ltd 30053 IND Solar - Renewable Energy Generation B Completed 1/10/13 12.2 12.2 2013
50 11/12/12 Tenaga Generasi Limited 30145 PAK Wind Power - Renewable Energy Generation B Active 12/15/12 22 29.5 2012
51 9/7/12 NSL Wind 30596 IND Wind Power - Renewable Energy Generation B Completed 10/8/12 18.8 18.8 2012
52 8/17/12 Parques Eolicos del Caribe S.A. 32227 DOM Wind Power - Renewable Energy Generation B Pending Signing 9/18/12 32 32 2012
53 6/29/12 Reventazon HPP 31383 COS Large Hydro - Renewable Energy Generation A Active 9/27/12 100 100 2012
54 6/22/12 TPI Composites 32296 USA Wind Power - Renewable Energy Generation B Pending Signing 7/24/12 15 23.3 2012
55 6/14/12 Azure Rooftop 32148 IND Solar - Renewable Energy Generation C Active 8/7/12 4.6 4.6 2012
56 4/30/12 Inabensa Bharat 31712 IND Solar Photovoltaic Equipment B Active 5/30/12 14 14 2012
57 4/28/12 RenewGen Debt 32295 SRI Waste to Energy - Renewable Energy Generation B Pending Signing 5/30/12 4 4 2012
58 4/18/12 Sibenik WPP 31606 HRV Wind Power - Renewable Energy Generation B Active 5/21/12 26.44 26.44 2012
59 4/10/12 Abengoa CSP SA 31083 SOU Solar - Renewable Energy Generation B Active 5/31/12 160.54 160.54 2012
60 3/28/12 Butwal Power - 2 31807 NEP Small Hydro ( B Completed 5/1/12 2.5 2.5 2012
61 1/20/12 Karadzhalovo SPP 31543 BUL Solar - Renewable Energy Generation B Active 2/20/12 61.97 61.97 2012
62 8/12/11 Mahindra Solar One Private Ltd 30936 IND Solar - Renewable Energy Generation B Completed 9/13/11 5.43 5.43 2011
63 6/30/11 Bhilwara Green Energy Limited 30765 IND Wind Power - Renewable Energy Generation B Active 9/15/11 15 15 2011
64 5/13/11 SPC 4-5 30761 THL Solar - Renewable Energy Generation B Pending Signing 6/13/11 11.91 11.91 2011
65 5/3/11 NSL Power 29912 IND Wind Power - Renewable Energy Generation A Active 7/7/11 0 25 2011
66 4/29/11 Project Name Pending 29846 CHA Waste to Energy - Renewable Energy Generation B Completed 5/30/11 15 25 2011
67 4/11/11 Zorlu Pakistan 29251 PAK Wind Power - Renewable Energy Generation B Active 5/16/11 38.1 38.1 2011
68 4/4/11 Paravani 28985 GEO Large Hydro - Renewable Energy Generation A Active 6/16/11 42.5 42.5 2011
69 3/21/11 Comemsa 30229 MXC Solar Photovoltaic Equipment B Active 4/22/11 24 24 2011
70 3/11/11 Techno Wind 30400 IND Wind Power - Renewable Energy Generation B Active 4/15/11 39.92 54.95 2011
71 3/4/11 Shalivahana 30231 IND Bio-Mass - Renewable Energy Generation B Active 4/15/11 15 30 2011
72 1/12/11 Star Hydropower 26229 PAK Large Hydro - Renewable Energy Generation A Active 5/12/11 60 60 2011
73 11/11/10 La Vegona 28139 HDS Large Hydro - Renewable Energy Generation B Active 12/13/10 30 30 2010
74 11/3/10 Gamesa 29815 IND Wind Turbine Machinery B Active 12/6/10 14.72 14.72 2010
75 10/4/10 SunBorne Solar 29681 IND Solar - Renewable Energy Generation B Completed 11/18/10 5.9 10 2010
76 10/1/10 Cheves Hydro 29405 PER Large Hydro - Renewable Energy Generation A Completed 12/2/10 85 85 2010
77 9/22/10 NDPL Solar 30154 IND Solar - Renewable Energy Generation C Completed 10/25/10 15 15 2010
78 5/19/10 Energy Dev II 29404 PHL Geothernal - Renewable Energy Generation B Active 6/24/10 75 75 2010
79 5/18/10 San Jacinto 27676 NIC Geothernal - Renewable Energy Generation B Active 6/30/10 60 60 2010
80 4/21/10 Applied Solar 29501 IND Solar - Renewable Energy Generation C Active 5/23/10 15 21 2010
81 4/16/10 Cernavoda and Pestera Wind Farms 28891 ROM Wind Power - Renewable Energy Generation A Active 6/17/10 106.8 106.8 2010
82 4/8/10 Husk Power 29024 IND Bio-Mass - Renewable Energy Generation B Active 5/10/10 0.25 1.25 2010
83 4/5/10 AkEnerji 29359 TUR Large Hydro - Renewable Energy Generation A Completed 6/10/10 75 75 2010
84 3/19/10 China WindPower 28865 CHA Wind Power - Renewable Energy Generation B Active 4/20/10 45 55 2010
85 12/22/09 EDF La Ventosa 28070 MXC Wind Power - Renewable Energy Generation B Active 2/1/10 31.23 35.81 2010
86 12/18/09 EURUS 28434 MXC Wind Power - Renewable Energy Generation A Active 2/18/10 75 75 2010
87 11/24/09 Pando Montelirio 27975 PAN Large Hydro - Renewable Energy Generation A Completed 1/28/10 40 45 2010
88 8/31/09 Auro Mira Bio Systems Kanyakumari Private Limited 28160 IND Bio-Mass - Renewable Energy Generation B Completed 9/30/09 6.21 6.21 2009
89 9/23/08 Norvind S.A. 26207 CHL Wind Power - Renewable Energy Generation B Completed 10/24/08 30.75 30.75 2008
90 7/28/08 Rotor Elektrik Uretim A.S 27191 TUR Wind Power - Renewable Energy Generation B Active 9/8/08 73.72 73.72 2008
91 6/26/08 AES Kavarna 26836 BUL Wind Power - Renewable Energy Generation A Active 8/26/08 62.93 62.93 2008
92 6/4/08 Zhongda Hydro II 26586 CHA Large Hydro - Renewable Energy Generation B Active 7/15/08 23.2 33.2 2008
93 6/3/08 PNOC-EDC Loan 26529 PHL Geothernal - Renewable Energy Generation B Active 7/3/08 100 100 2008
94 4/25/08 Ambuklao-Binga 26996 PHL Large Hydro - Renewable Energy Generation B Active 6/12/08 100 100 2008
95 4/21/08 Century Hydros 26399 CLM Small Hydro ( B Active 5/22/08 15.5 15.5 2008
96 3/19/08 Renewable Energy Mezzanine Facility 26055 LTU Renewable through Financial Intermediaries - Renewable Energy Generation FI Completed 4/24/08 34.03 34.03 2008
97 2/1/08 Enerjisa Enerji Uretim A.S. 26016 TUR Large Hydro - Renewable Energy Generation B Active 3/6/08 247.7 247.7 2008
98 12/7/07 AllainDuhanganII 26500 IND Large Hydro - Renewable Energy Generation A Active 2/7/08 31.84 41.84 2008
99 7/30/07 Magat Hydro 26041 PHL Large Hydro - Renewable Energy Generation B Active 9/6/07 105 105 2007
100 7/25/07 La Confluencia 25472 CHL Large Hydro - Renewable Energy Generation B Active 9/14/07 83 83 2007
101 2/27/07 MSPL Limited 25115 IND Wind Power - Renewable Energy Generation B Completed 3/30/07 33 33 2007
102 2/2/07 Hidromaule 25568 CHL Large Hydro - Renewable Energy Generation B Completed 3/5/07 9.7 9.7 2007
103 12/20/06 Bujagali Energy Ltd. 24408 UAN Large Hydro - Renewable Energy Generation A Active 4/19/07 130 130 2007
104 2/10/06 Zhongda Sanchuan Hydro Development Co., Ltd. 24067 CHA Large Hydro - Renewable Energy Generation A Active 3/13/06 22 22 2006
105 6/16/05 Dodson-Lindblom Hydropower Private Limited 23833 IND Large Hydro - Renewable Energy Generation B Active 7/25/05 17 17 2005
106 12/22/04 La Higuera 21315 CHL Large Hydro - Renewable Energy Generation A Active 3/3/05 45 45 2005
107 12/3/04 Basic Energy 20384 LAC Wind Power - Renewable Energy Generation B Completed 1/15/05 10 25 2005
108 4/16/04 China Green 21576 CHA Bio-Mass - Renewable Energy Generation B Completed 5/24/04 30 30 2004
109 8/11/03 AD Hydro Power Limited 11632 IND Large Hydro - Renewable Energy Generation A Active 10/31/03 40 47 2003
110 5/13/02 El Canada Hydroelectric Project 11444 GUA Large Hydro - Renewable Energy Generation B Completed 6/12/02 15 15 2002
111 2/22/02 Pamir Energy Development 10255 TJK Large Hydro - Renewable Energy Generation B Active 3/28/02 4.5 8 2002
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment