D3 Examples - uk_powergen

xxxxxxxxxx
 
<!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 drawBars = function(bardata){
      var startingHour = bardata[0].timestamp.getHours();
      var arc = d3.svg.arc().innerRadius(0)
              .outerRadius(function(d){return radiusScale(d.totalGen)})
              .startAngle(function(d, i){return displacementAngle(startingHour) + angleScale(i)})
              .endAngle(function(d, i){return displacementAngle(startingHour) + angleScale(i + 1)});
      radialG.selectAll('path').data(bardata).enter().append('path').attr('d', arc).attr('class', 'bar');
    };
​
    var drawBarLayer = function(layerData){
      var startingHour = layerData[Object.keys(layerData)[0]].values[0].timestamp.getHours();
      console.log(startingHour)
      var arc = d3.svg.arc().startAngle(function(d, i){return displacementAngle(startingHour) + angleScale(i)})
              .endAngle(function(d, i){return displacementAngle(startingHour) + angleScale(i + 1)})
              .innerRadius(function(d){return radiusScale(d.y0)})
              .outerRadius(function(d){return radiusScale(d.y + d.y0)});
      var layerG = radialG.selectAll('.layer').data(layerData).enter().append('g')
              .attr('class', function(d){return d.name + ' layer'})
              .attr('fill', function(d, i){return colorScale(i)});
      layerG.selectAll('path').data(function(d){return d.values}).enter().append('path')
              .attr('d', arc)
    };
​
    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>
​
    