D3 Charts on Renewable Energy

This site was created to demo several D3 charts and graphs developed while taking the Data Visualization and Inforgaphics with D3 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

Source: https://data.oecd.org/energy

1 Scatter Plot on Regional Growth

2012 Renewable Energy Output0%5%10%15%20%25%30%35%40%45%50%2002 Renewable Energy Output0%5%10%15%20%25%30%35%40%AfricaAsiaEuropeLatin AmericaMiddle EastNorth AmericaOceanaScandinavia

Functional Components

Some of the d3.methods used in the importing and formatting data used to render the scatterplot included:

d3.csv d3.map d3.set d3.keys
d3.mean d3.nest d3.extent d3.transition

Additional functionality included:

  • Radio Buttons that transition regions/countries
  • Resuable Legend Module

This component was created following best practices outlined by Chris Viau in his book: Developing a D3.js Edge" and is called using d3.models.legend().

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

2 Bar Graph On Country Growth

▶ PLAY ALL YEARS
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
0102030405060708090100AfricaAsiaEuropeLatin AmericaMiddle EastNorth AmericaOceanaScandinaviaKoreaLuxembourgUnited KingdomBelgiumIrelandNetherlandsRussiaGermanyJapanHungaryIsraelCzech RepublicSlovak RepublicUnited StatesPolandGreeceSpainEuropean UnionFranceItalyAustraliaMexicoSloveniaDenmarkEstoniaSouth AfricaTurkeyPortugalSwitzerlandCanadaChinaAustriaFinlandSwedenChileNew ZealandIndiaIndonesiaBrazilNorwayIceland0.41.11.21.31.81.92.83.23.23.43.63.7444.74.95.45.75.85.86.210.210.51111.712.113.513.716.816.918.421.322.425.326.229.833.237.339.449.575

Functional Components

Some of the d3.methods used in the importing and formatting data used to render the scatterplot included:

d3.csv d3.map d3.set d3.keys
d3.nest d3.max d3.extent d3.transition

Additional functionality includes the ablility to sequentially cycle through the years by adding an "on click" eventreceiver to "PLAY ALL YEARS" button.

 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);
 });

3 Line Chart On Country Growth

200220032004200520062007200820092010201120120%10%20%30%40%50%60%70%80%Percent of Engery Generation
Iceland

Functional Components

Some of the d3.methods used in the importing and formatting data used to render the scatterplot included:

d3.csv d3.map d3.set d3.keys
d3.nest d3.sort d3.filter d3.transition

Additional functionality includes:

  • Sliding tooltip
  • Table displaying year data
  • Line highlighted on mouseover