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

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

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

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