Radial bars

index.html

<div id="case4">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

Radial bars.markdown

Radial bars

Plus some crazy stuff.

A Pen by Riccardo Scalco on CodePen.

License.

script.js

(function () {

  var margin = {top: 40, right: 40, bottom: 40, left: 40},
      width = 500 - margin.left - margin.right,
      height = 600 - margin.top - margin.bottom;
  
var line, pattern;

line = function(L,m) {
  var m, x0, x1, y0, y1, a;
  x0 = getRandomInt(0, L);
  y0 = getRandomInt(0, L);
  a = getRandomInt(0, 360);
  x1 = m * Math.sin(a);
  y1 = m * Math.cos(a);
  return "M" + x0 + "," + y0 + "l" + x1 + "," + y1;
};

pattern = function(n, L, m) {
  var i;
  return ((function() {
    var _i, _results;
    _results = [];
    for (i = _i = 1; 1 <= n ? _i <= n : _i >= n; i = 1 <= n ? ++_i : --_i) {
      _results.push(line(L,m));
    }
    return _results;
  })()).join('');
};

  var svg = d3.select("#case4").append("svg")
      .attr("id","case4SVG")
      .attr("viewBox", "0 0 500 600")           // make it
      .attr("preserveAspectRatio", "xMidYMid")  // responsive
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom);
    //.append("g")
    //  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  svg
    .append('defs')
    .append('pattern')
      .attr('id', 'diagonalHatchCase4')
      .attr('patternUnits', 'userSpaceOnUse')
      .attr('width', 100)
      .attr('height', 100)
    .append('path')
      .attr('d',pattern(400,100,5))
      // .attr('d', 'M0,4l4,-4')
      .attr('stroke', '#fff')
      //.attr('stroke', 'rgb(83, 83, 83)')
      .attr('stroke-width', 1);

  var button = svg.append("g")
      .attr("transform","translate(185,400)");
  /*button.append("rect")
      .attr("id","shadow")
      .attr({
        "x":"1",
        "y":"1",
        "height":"40",
        "width":"130",
        "rx":"10",
        "ry":"10"
      })
      .style({
        "fill":"#bbb"
      });*/
  button.append("rect")
      .attr({
        "id":"nmaButton",
        "x":"0",
        "y":"0",
        "height":"40",
        "width":"130",
        "rx":"10",
        "ry":"10"
      })
      .style({
        "fill":"#eee"
      });
  button.append("text")
      .text("Get a new sample")
      .attr({
        "dx":"20",
        "dy":"23"
      })
      .style({
        "fill":"#B84100",
        "font-size":"12px",
        "font-family":"Lato",
      });
  button.append("rect")
      .attr({
        "x":"0",
        "y":"0",
        "height":"40",
        "width":"130",
        "rx":"10",
        "ry":"10"
      })
      .style({
        "fill-opacity":"0"
      });
  button.on("mouseover",function(){
    var self = d3.select(this);
    self.select("rect").style("fill","#f2f2f2");
    //self.select("text").style("fill","#861200");
  });
  button.on("mouseout",function(){
    var self = d3.select(this);
    self.select("rect").style("fill","#eee");
    //self.select("text").style("fill","#B84100");
  });
  button.on("click",function(){
    var data = getRandomData();
    update(data);
  });

  var cos = Math.cos(Math.PI/8),
      sin = Math.sin(Math.PI/8);

  var path = function (L,s) {
    return "M 0 0 L " +
      ( -1 * L * s * sin ) + " " + ( -1 * L * s * cos ) + " L " +
      ( L * s * sin ) + " " + ( -1 * L * s * cos ) + " Z";
  }

  var L = 100; // side length

  var c = ["#CB8C1F","#B84100","#861200"];
  var colors = [c[0],c[1],c[2],c[0],c[1],c[2],c[0],c[1]];
  var angle = 90 / 2;
  var angles = [0,
                angle,
                angle * 2,
                angle * 3,
                angle * 4,
                angle * 5,
                angle * 6,
                angle * 7
               ];

  var back1 = svg.append("g").attr("transform","translate(250, 200)");
  var back1Lines = svg.append("g").attr("transform","translate(250, 200)");
  var front1 = svg.append("g").attr("transform","translate(250, 200)");

  var update = function(data) {
    
    var resize = d3.scale.linear()
        .domain(d3.extent(data,function(d){ return d.total; }))
        .range([0.8,1.3]);

    var sel1b = back1.selectAll(".back1")
        .data(data);
    
    sel1b.enter().append("path")
        .attr("d",function(d,i){
          return path(L,resize(d.total));
        })
        .attr("transform",function(d,i){
          return "rotate("+angles[i]+")";
        })
        .attr("class","back1 nma-back")
        //.style("fill",function(d,i){ return colors[i]; });
        .style("fill",function(d,i){ return "#aaa"; });
    
    /*sel1b.transition().duration(1000)
        .attr("d",function(d,i){
          return path(L,resize(d.total));
        });*/


    var sel1bl = back1Lines.selectAll(".backlines1")
        .data(data);
    
    sel1bl.enter().append("path")
        .attr("d",function(d,i){
          return path(L,resize(d.total));
        })
        .attr("transform",function(d,i){
          return "rotate("+angles[i]+")";
        })
        .attr("class","backlines1 nma-back")
        .style("fill","url(#diagonalHatchCase4)");
    
    /*sel1bl.transition().duration(1000)
        .attr("d",function(d,i){
          return path(L,resize(d.total));
        });*/

    var sel1f = front1.selectAll(".front1")
        .data(data);
    
    sel1f.enter().append("path")
        .attr("d",function(d,i){
          return path(L,resize(d.total)*d.ratio);
        })
        .attr("transform",function(d,i){
          return "rotate("+angles[i]+")";
        })
        .attr("class","front1 nma-front")
        .style("fill",function(d,i){ return colors[i]; });
    
    sel1f.transition().duration(1000)
        .attr("d",function(d,i){
          return path(L,resize(d.total)*d.ratio);
        });

  }

  update(getRandomData());


  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function getRandomArbitrary(min, max) {
      return Math.random() * (max - min) + min;
  }

  function getRandomData() {
    return [
      {
        "total": getRandomInt(60, 100),
        "ratio": getRandomArbitrary(0.3, 0.9)
      },
      {
        "total": getRandomInt(60, 100),
        "ratio": getRandomArbitrary(0.3, 0.9)
      },
      {
        "total": getRandomInt(60, 100),
        "ratio": getRandomArbitrary(0.3, 0.9)
      },
      {
        "total": getRandomInt(60, 100),
        "ratio": getRandomArbitrary(0.3, 0.9)
      },
      {
        "total": getRandomInt(60, 100),
        "ratio": getRandomArbitrary(0.3, 0.9)
      },
      {
        "total": getRandomInt(60, 100),
        "ratio": getRandomArbitrary(0.3, 0.9)
      },
      {
        "total": getRandomInt(60, 100),
        "ratio": getRandomArbitrary(0.3, 0.9)
      },
      {
        "total": getRandomInt(60, 100),
        "ratio": getRandomArbitrary(0.3, 0.9)
      }
    ];
  }
  
  /*
  function resize(id) {
    var chart = $("#"+id),
        aspect = chart.width() / chart.height(),
        container = chart.parent();
    var resize = function() {
        var targetWidth = container.width();
        chart.attr("width", targetWidth);
        chart.attr("height", Math.round(targetWidth / aspect));
    };
    $(window).on("resize", resize).trigger("resize");
    $(window).on("ready", resize).trigger("resize");
  }*/

  // Responsiveness
  // resize("case4SVG");
  

})()

style.css

.nma-back {
  stroke-opacity: 1;
  fill-opacity: 0.5;
  stroke-width: 2px;
  stroke: #fff;
}

.nma-front {
  fill-opacity: 0.7;
  stroke-width: 2px;
  stroke: #fff;
}