uk_powergen_24hrs

hoping to do a series of vis with the uk grid data from gridwatch.templar.co.uk inspiration from http://energia.ningunaparte.net/en/ and /emeeks/b57f4cc89dacd38fcdcd

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="d3.svg.circularbrush.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    /*svg { width:100%; height: 100% }*/
    .bar{
      stroke: white;
      fill: #39837B;
      stroke-width: 0.2px;
    }

.raxis {
      stroke: white;
      fill: none;
      stroke-width: 0.3px;
    }
    /*.coal path{*/
      /*fill: #D78BB9;*/
    /*}*/

/*.nuclear path{*/
      /*fill: #541D3E;*/
    /*}*/

/*.gas path{*/
      /*fill: #395E21;*/
    /*}*/

/*.wind path{*/
      /*fill: #612232;*/
    /*}*/

/*.hydro path{*/
      /*fill: #4AD853;*/
    /*}*/

/*.other path{*/
      /*fill: #9ED3A1;*/
    /*}*/
  </style>
</head>

<body>
  <div id="networkVisContainer"></div>
  <script>
    var width = 900,
        height = 800,
        margin = 40;
    var svg = d3.select("#networkVisContainer").append('svg').attr('width', width).attr('height', height);
    var radialG = svg.append('g').attr('class', 'radial-bars')
        .attr('transform', 'translate(' +  width /2 + ',' + height/2 + ')');
    var angleScale = d3.scale.linear().range([0, 2* Math.PI]);
    var radiusScale = d3.scale.linear().range([0, d3.min([height, width]) /2 - margin]);
    var xScale = function(el, genVal){
      var r = radiusScale(genVal);
      var x = Math.sin(angleScale(el))
      return x * r;
    };
    var yScale = function(el, genVal){
      return radiusScale(genVal) * Math.cos(angleScale(el));
    };
    var powerSources = ["coal", "nuclear", "gas", "wind",  "hydro","other"];
    var colors = ["#D78BB9", "#541D3E", "#395E21", "#612232", "#4AD853", "#9ED3A1"];
    var colorScale = d3.scale.ordinal().domain(d3.range(colors.length)).range(colors)
    var stack = d3.layout.stack().values(function(d) { return d.values; });

/**
     * to always keep 00hr at the top, have to rotate the set of bars by x radians
     * @param startingHour {Number} x = startingHour/24 * Math.PI * 2
     */
    var displacementAngle = function(startingHour){
      return startingHour/24 * Math.PI * 2
    };

var drawTime = function(){
      var angles = d3.range(12).map(function(d){return d * Math.PI/6});
      var r = radiusScale.range()[1];

var textPositions = angles.map(function(d, i) {
        return {x: r * Math.sin(d), y:  - r * Math.cos(d), time: i * 2}
      });

var clockG = radialG.selectAll('.clock').data(textPositions)
              .enter().append('text')
              .attr('class', 'clock')
              .attr('x', function(d){return d.x}).attr('y', function(d){return d.y})
              .text(function(d){return d.time});
    }

d3.csv('sample24hrs.csv', function(err, data){
      var keys = Object.keys(data[0]);
      var numberItems = keys.filter(function(d){return d.toLowerCase() !== "timestamp"});
      var timeFormat = d3.time.format("%Y-%m-%d %H:%M:%S");
      data.forEach(function(e, j){
        e.timestamp = timeFormat.parse(e.timestamp.trim()); //convert to date obj for ease of parsing
        e.totalGen = 0;
        numberItems.forEach(function(source){e[source] = +e[source]});
        powerSources.forEach(function(source){e.totalGen += e[source] });
      });

var maxGen = d3.max(data, function(d){return d.totalGen});
      var sciVal = maxGen.toExponential();
      var rScaleMax = (+sciVal[0] + 1) * Math.pow(10, +sciVal.split('+')[1]);
console.log(rScaleMax)
      angleScale.domain([0, data.length]);
      radiusScale.domain([0, rScaleMax]);

var dataLayers = powerSources.map(function(c, i){
        return {
          name: c,
          values:data.map(function(d, j) {
            return {x: j, y: d[c], timestamp: d.timestamp}
          })
        }
      });

var stackedData = stack(dataLayers);
      stackedData.forEach(function(powerSource){
        powerSource.values.forEach(function(d){

})
      });

drawBarLayer(stackedData);
      drawTime();

var rAxisVals = d3.range(5).map(function(d){return (d + 1)* rScaleMax/5});

radialG.selectAll('circle.raxis').data(rAxisVals).enter()
              .append('circle').attr('r', function(d){return radiusScale(d)})
              .attr('cx', 0).attr('cy', 0)
              .attr('class', 'raxis')
    })
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js