D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
jkeohan
Full window
Github gist
Renewable Energy
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="utf-8"> <!-- // <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> --> <script src="https://d3js.org/d3.v3.js"></script> <script type="text/javascript" src="reusable.d3.charts.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"> <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css"> <link rel="stylesheet" href="renewable.css"> <link href="https://fonts.googleapis.com/css?family=Lato:400,600" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Lato:400,600" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Lato:400,600" rel="stylesheet" type="text/css"> <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'> </head> <body> <div class="nav clearfix"> <div class="container" id="fitwidth"> <ul class="pull-left border"> <li class="mainLogo"><a href="https://d3js.org/" target="_blank"><img src="https://raw.githubusercontent.com/jkeohan/portfolio/master/images/d3js.jpg" alt="D3"></a></li> <li class="mainLogo" id="ocd"><a href="https://data.oecd.org/energy/renewable-energy.htm" target="_blank"><img src="https://raw.githubusercontent.com/jkeohan/portfolio/master/images/logo-oecd-embed%402x.png"></a></li> </ul> <ul class="pull-left chart-types"> <li><a href="index.html#section1">Scatterplot</a></li> <li><a href="index.html#section2">Bar Graph</a></li> <li><a href="index.html#section3">Line Chart</a></li> </ul> </div> </div> <div class="hero-shot"></div> <div class="main-content"> <div class="containter main"> <h1>D3 Charts on Renewable Energy</h1> <p class="intro">This site was created to demo several D3 charts and graphs developed while taking the <a href="https://journalismcourses.org/D3.html">Data Visualization and Inforgaphics with D3</a> 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</p> <span>Source: </span><a href="https://data.oecd.org/energy/renewable-energy.htm#indicator-chart">https://data.oecd.org/energy</a> <hr class="divider"> </div> <a name="section1"></a> <div class="container main"> <h1><span class="number">1 </span>Scatter Plot on Regional Growth</h1> <div class="row"> <div class="col-md-8" id="reduceWidth" style="margin-bottom:40px"> <div class="switch"> <form> <label>Regions<input type="radio" name="choice" value="Regions" class="radio_buttons" checked></label> <label>Countries<input type="radio" name="choice" value="Countries" class="radio_buttons"></label> </form> </div> <div class="regionalstats" ></div> </div> <div class="col-md-4" id="expandWidth"> <div class="panel panel-success"> <div class="panel-heading"><h3>Functional Components</h3></div> <div class="panel-body"> <p>Some of the d3.methods used in the importing and formatting data used to render the scatterplot included:</p> <table> <tr class="section1"> <td>d3.csv</td> <td>d3.map</td> <td>d3.set</td> <td>d3.keys</td> </tr> <tr class="section1"> <td>d3.mean</td> <td>d3.nest</td> <td>d3.extent</td> <td>d3.transition</td> </tr> </table> <br> <p>Additional functionality included: <ul> <li>Radio Buttons that transition regions/countries</li> <li>Resuable Legend Module</li> </ul> <p>This component was created following best practices outlined by Chris Viau in his book: <a href="https://bleedingedgepress.com/our-books/developing-a-d3-js-edge/">Developing a D3.js Edge"</a> and is called using <code>d3.models.legend()</code>.</p> <pre> <code> var rlegend = d3.models.legend() .fontSize(15) .width(width-160) .height(height) .inputScale(colorScale) svg.call(rlegend) </code></pre> </div> </div> </div> <hr class="divider"> </div> <a name="section2"></a> <div class="container main" id="section2"> <h1><span class="number">2 </span>Bar Graph On Country Growth</h1> <div class="row"> <div class="col-md-8" id="reduceWidth"> <div class="playAll"></div> <div class="buttonContainer"></div> <div class="clearfix"></div> <div class="countrystats"></div> </div> <div class="col-md-4" id="expandWidth"> <div class="panel panel-success"> <div class="panel-heading"><h3>Functional Components</h3></div> <div class="panel-body"> <p>Some of the d3.methods used in the importing and formatting data used to render the scatterplot included:</p> <table> <tr class="section1"> <td>d3.csv</td> <td>d3.map</td> <td>d3.set</td> <td>d3.keys</td> </tr> <tr class="section1"> <td>d3.nest</td> <td>d3.max</td> <td>d3.extent</td> <td>d3.transition</td> </tr> </table> <br> <p>Additional functionality includes the ablility to sequentially cycle through the years by adding an "on click" eventreceiver to <code>"PLAY ALL YEARS"</code> button.</p> <pre><code> 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); }); </code></pre> </div> </div> </div> </div> <hr class="divider"> </div> <a name="section3"></a> <div class="container main" id="section3"> <h1><span class="number">3 </span>Line Chart On Country Growth</h1> <div class="row"> <div class="col-md-8" id="reduceWidth"> <div class="lineChart"></div> <div class="sideBar"></div> </div> <div class="col-md-4" id="expandWidth"> <div class="panel panel-success"> <div class="panel-heading"><h3>Functional Components</h3></div> <div class="panel-body"> <p>Some of the d3.methods used in the importing and formatting data used to render the scatterplot included:</p> <table> <tr class="section1"> <td>d3.csv</td> <td>d3.map</td> <td>d3.set</td> <td>d3.keys</td> </tr> <tr class="section1"> <td>d3.nest</td> <td>d3.sort</td> <td>d3.filter</td> <td>d3.transition</td> </tr> </table> <br> <p>Additional functionality includes: <ul> <li>Sliding tooltip</li> <li>Table displaying year data</li> <li>Line highlighted on mouseover</li> </ul> </p> </div> </div> </div> </div> </div> <script type="text/javascript" src="section1.js"></script> <script type="text/javascript" src="section2.js"></script> <script type="text/javascript" src="section3.js"></script> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js
https://d3js.org/d3.v3.js