Hemicycle: a single vote event

d3.hemicycle.js

d3.hemicycle = function() {
  function hemicycle(selection) {
    selection.each(function(d, i) {
    // options
    var nvar = (typeof(n) === "function" ? n(d) : n),
        gapvar = (typeof(gap) === "function" ? gap(d) : gap),
        widthIconvar = (typeof(widthIcon) === "function" ? widthIcon(d) : widthIcon),
        widthvar =  (typeof(width) === "function" ? width(d) : width);
        peoplevar =  (typeof(people) === "function" ? people(d) : people);
        
    var rmax = 1 + nvar.length *gapvar*widthIconvar;
    
    var xScale = d3.scale.linear()
	      .domain([-1*rmax, rmax])
	      .range([0, widthvar]),
	    xxScale = d3.scale.linear()
	      .domain([0, 2*rmax])
	      .range([0, widthvar])
        yScale = d3.scale.linear()
          .domain([0, rmax])
          .range([widthvar/2,0]);
   
    var data = [],
        s = [];
    for (i in nvar) {
      s.push((Math.PI/widthIconvar + Math.PI*i*gapvar-nvar[i])/(nvar[i] - 1));
      var ninrow = nvar[i],
          radwidth = Math.PI/(nvar[i]+(nvar[i]-1)*s[i]),
          radspace = radwidth*s[i],
          r = 1 + i*gapvar*widthIconvar;
      for (j=0;j<ninrow;j++) {
        var x = Math.cos(radwidth*(0.5+j)+j*radspace)*r,
            y = Math.sin(radwidth*(0.5+j)+j*radspace)*r,
            rot = -1*(radwidth*(0.5+j)+j*radspace)/Math.PI*180+90;
        data.push({'x':x,'y':y,'rot':rot});
      }
    }
    
    data.sort(function(x,y) {
      if (x['rot'] < y['rot']) return -1;
      if (x['rot'] > y['rot']) return 1;
      return 0
    });
    
    var i = 0;
      //for (j=0;j<group['n'];j++) {
    for (key in peoplevar) {
        person = peoplevar[key];
        for (var attrname in person) { data[i][attrname] = person[attrname]; }
        //data[i]['color'] = group['color'];
        //data[i]['name'] = //group['name'];
        data[i]['widthIcon'] = widthIconvar;
        if (parseInt(person["option_code"]) == -1) data[i]['background'] = "red";
        if (parseInt(person["option_code"]) == 0) data[i]['background'] = "gray";
        if (parseInt(person["option_code"]) == 1) data[i]['background'] = "green";
        i++;
    }

    
    /*var angle = [{'startangle':0,'endangle':Math.PI/2}];

    var arci = d3.svg.arc()
                    .startAngle(function(d){return d.startangle})
                    .endAngle(function(d){return d.endangle})
                    .outerRadius(x0Scale(rmax))
                    .innerRadius(0);

    var position = [xScale(0),yScale(0)];*/
    
    var element = d3.select(this);
    
    var icons = element.selectAll(".icon")
		    .data(data)
          .enter().append("a")
            .attr("transform",function(d) {return "rotate("+d.rot+","+xScale(d.x)+","+yScale(d.y)+")"})
            .attr("xlink:href",function(d) {return d.link})
            .on("mouseover", tip.show)
	        .on("mouseout", tip.hide)
            ;
    
    //http://stackoverflow.com/questions/13203897/d3-nested-appends-and-data-flow      
        icons.append("text")
              .attr('font-size',xxScale(
                d.widthIcon*1.15/2))
              .attr('font-family', 'FontAwesome')
               .attr('x',function(d) {return xScale(d.x+d.widthIcon/2.8);})
               .attr('y',function(d) {return yScale(d.y+d.widthIcon/2.8);}) 
               .attr('fill',function(d) {return d.background}) 
               .attr('fill-opacity', function(d) {
                  if (Math.abs(parseInt(d.option_code)) == 1) return 1;
                  else return 0.25;
                })
               .attr('text-anchor',"middle")
               //.text('\uf005');
              .text(function(d) {if (d.background == 'red') return '\uf0a3'; else return '\uf0a3';});
    
    icons.append("text")
            .attr('font-family', 'FontAwesome')
            .attr('font-size',xxScale(
            d.widthIcon*1.15)) //the icon is about 1.15times higher then wide
            .attr('fill', function(d) {
              return d.color;
            })
            .attr('fill-opacity', function(d) {
              if (Math.abs(parseInt(d.option_code)) == 1) return 1;
              else return 0.25;
            })
            .attr('stroke-width', function(d) {return 1;})
            .attr('stroke-opacity',function(d) {
              if (Math.abs(parseInt(d.option_code)) == 1) return 0.9;
              else return 0.25;
            })
            .attr('text-anchor',"middle")
            .attr('class', 'shadow')
            .attr('x',function(d) {return xScale(d.x);})
            .attr('y',function(d) {return yScale(d.y);})          
            .text('\uf007');

  });
  }
  
    hemicycle.n = function(value) {
        if (!arguments.length) return value;
        n = value;
        return hemicycle;
    };
    hemicycle.gap = function(value) {
        if (!arguments.length) return value;
        gap = value;
        return hemicycle;
    }; 
    hemicycle.widthIcon = function(value) {
        if (!arguments.length) return value;
        widthIcon = value;
        return hemicycle;
    };
    hemicycle.width = function(value) {
        if (!arguments.length) return value;
        width = value;
        return hemicycle;
    };
    hemicycle.people = function(value) {
        if (!arguments.length) return value;
        people = value;
        return hemicycle;
    };

  return hemicycle;
}

d3.tip.js

// d3.tip
// Copyright (c) 2013 Justin Palmer
//
// Tooltips for d3.js SVG visualizations

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module with d3 as a dependency.
    define(['d3'], factory)
  } else {
    // Browser global.
    root.d3.tip = factory(root.d3)
  }
}(this, function (d3) {

  // Public - contructs a new tooltip
  //
  // Returns a tip
  return function() {
    var direction = d3_tip_direction,
        offset    = d3_tip_offset,
        html      = d3_tip_html,
        node      = initNode(),
        svg       = null,
        point     = null,
        target    = null
  
    function tip(vis) {
      svg = getSVGNode(vis)
      point = svg.createSVGPoint()
      document.body.appendChild(node)
    }
  
    // Public - show the tooltip on the screen
    //
    // Returns a tip
    tip.show = function() {
      var args = Array.prototype.slice.call(arguments)
      if(args[args.length - 1] instanceof SVGElement) target = args.pop()
  
      var content = html.apply(this, args),
          poffset = offset.apply(this, args),
          dir     = direction.apply(this, args),
          nodel   = d3.select(node),
          i       = directions.length,
          coords,
          scrollTop  = document.documentElement.scrollTop || document.body.scrollTop,
          scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
  
      nodel.html(content)
        .style({ opacity: 1, 'pointer-events': 'all' })
  
      while(i--) nodel.classed(directions[i], false)
      coords = direction_callbacks.get(dir).apply(this)
      nodel.classed(dir, true).style({
        top: (coords.top +  poffset[0]) + scrollTop + 'px',
        left: (coords.left + poffset[1]) + scrollLeft + 'px'
      })
  
      return tip
    }
  
    // Public - hide the tooltip
    //
    // Returns a tip
    tip.hide = function() {
      nodel = d3.select(node)
      nodel.style({ opacity: 0, 'pointer-events': 'none' })
      return tip
    }
  
    // Public: Proxy attr calls to the d3 tip container.  Sets or gets attribute value.
    //
    // n - name of the attribute
    // v - value of the attribute
    //
    // Returns tip or attribute value
    tip.attr = function(n, v) {
      if (arguments.length < 2 && typeof n === 'string') {
        return d3.select(node).attr(n)
      } else {
        var args =  Array.prototype.slice.call(arguments)
        d3.selection.prototype.attr.apply(d3.select(node), args)
      }
  
      return tip
    }
  
    // Public: Proxy style calls to the d3 tip container.  Sets or gets a style value.
    //
    // n - name of the property
    // v - value of the property
    //
    // Returns tip or style property value
    tip.style = function(n, v) {
      if (arguments.length < 2 && typeof n === 'string') {
        return d3.select(node).style(n)
      } else {
        var args =  Array.prototype.slice.call(arguments)
        d3.selection.prototype.style.apply(d3.select(node), args)
      }
  
      return tip
    }
  
    // Public: Set or get the direction of the tooltip
    //
    // v - One of n(north), s(south), e(east), or w(west), nw(northwest),
    //     sw(southwest), ne(northeast) or se(southeast)
    //
    // Returns tip or direction
    tip.direction = function(v) {
      if (!arguments.length) return direction
      direction = v == null ? v : d3.functor(v)
  
      return tip
    }
  
    // Public: Sets or gets the offset of the tip
    //
    // v - Array of [x, y] offset
    //
    // Returns offset or
    tip.offset = function(v) {
      if (!arguments.length) return offset
      offset = v == null ? v : d3.functor(v)
  
      return tip
    }
  
    // Public: sets or gets the html value of the tooltip
    //
    // v - String value of the tip
    //
    // Returns html value or tip
    tip.html = function(v) {
      if (!arguments.length) return html
      html = v == null ? v : d3.functor(v)
  
      return tip
    }
  
    function d3_tip_direction() { return 'n' }
    function d3_tip_offset() { return [0, 0] }
    function d3_tip_html() { return ' ' }
  
    var direction_callbacks = d3.map({
      n:  direction_n,
      s:  direction_s,
      e:  direction_e,
      w:  direction_w,
      nw: direction_nw,
      ne: direction_ne,
      sw: direction_sw,
      se: direction_se
    }),
  
    directions = direction_callbacks.keys()
  
    function direction_n() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.n.y - node.offsetHeight,
        left: bbox.n.x - node.offsetWidth / 2
      }
    }
  
    function direction_s() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.s.y,
        left: bbox.s.x - node.offsetWidth / 2
      }
    }
  
    function direction_e() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.e.y - node.offsetHeight / 2,
        left: bbox.e.x
      }
    }
  
    function direction_w() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.w.y - node.offsetHeight / 2,
        left: bbox.w.x - node.offsetWidth
      }
    }
  
    function direction_nw() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.nw.y - node.offsetHeight,
        left: bbox.nw.x - node.offsetWidth
      }
    }
  
    function direction_ne() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.ne.y - node.offsetHeight,
        left: bbox.ne.x
      }
    }
  
    function direction_sw() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.sw.y,
        left: bbox.sw.x - node.offsetWidth
      }
    }
  
    function direction_se() {
      var bbox = getScreenBBox()
      return {
        top:  bbox.se.y,
        left: bbox.e.x
      }
    }
  
    function initNode() {
      var node = d3.select(document.createElement('div'))
      node.style({
        position: 'absolute',
        top: 0,
        opacity: 0,
        'pointer-events': 'none',
        'box-sizing': 'border-box'
      })
  
      return node.node()
    }
  
    function getSVGNode(el) {
      el = el.node()
      if(el.tagName.toLowerCase() == 'svg')
        return el
  
      return el.ownerSVGElement
    }
  
    // Private - gets the screen coordinates of a shape
    //
    // Given a shape on the screen, will return an SVGPoint for the directions
    // n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest),
    // sw(southwest).
    //
    //    +-+-+
    //    |   |
    //    +   +
    //    |   |
    //    +-+-+
    //
    // Returns an Object {n, s, e, w, nw, sw, ne, se}
    function getScreenBBox() {
      var targetel   = target || d3.event.target,
          bbox       = {},
          matrix     = targetel.getScreenCTM(),
          tbbox      = targetel.getBBox(),
          width      = tbbox.width,
          height     = tbbox.height,
          x          = tbbox.x,
          y          = tbbox.y
  
      point.x = x
      point.y = y
      bbox.nw = point.matrixTransform(matrix)
      point.x += width
      bbox.ne = point.matrixTransform(matrix)
      point.y += height
      bbox.se = point.matrixTransform(matrix)
      point.x -= width
      bbox.sw = point.matrixTransform(matrix)
      point.y -= height / 2
      bbox.w  = point.matrixTransform(matrix)
      point.x += width
      bbox.e = point.matrixTransform(matrix)
      point.x -= width / 2
      point.y -= height / 2
      bbox.n = point.matrixTransform(matrix)
      point.y += height
      bbox.s = point.matrixTransform(matrix)
  
      return bbox
    }
  
    return tip
  };

}));

index.html

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<style>

      /*http://www.d3noob.org/2013/01/adding-drop-shadow-to-allow-text-to.html*/
      text.shadow {
        stroke: gray;
        stroke-width: 1px;
        opacity: 0.9;
    }
    /* D3 tips */  
    .d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 2px;
    }
    /* Creates a small triangle extender for the tooltip */
    /*.d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "\25BC";
      position: absolute;
      text-align: center;
    }*/
    /* Style northward tooltips differently */
    .d3-tip.n:after {
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
    }
    .stronger {
      color: yellow;
    }

        </style>

    <script src="d3.hemicycle.js"></script>
    <script src="d3.tip.js"></script>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css">
  </head>
<body>   
<div id="chart" style="width:400px;margin-left:100px;margin-top:35px;"></div>
<div id="legend" style="width:400px;padding:15px;margin-left:100px;">
    <div class="row" style="text-align:center">Legenda:</div>
    <div class="row" style="border-bottom:1px solid #ccc;">
        <div class="col-xs-2"></div>
        <div class="col-xs-5"><i class="fa fa-certificate" style="color:red;font-size:20px;"> </i><strong> PROTI</strong></div>
        <div class="col-xs-5"><i class="fa fa-certificate" style="color:green;font-size:20px;"> </i> PRO</div>
    </div>
    
    <div class="row" id="legendin">
    
    </div>

</div>
  
  
<script type="text/javascript">
  d3.csv("single_vote_event.csv",function(error,data) {

    /*var json = (function () {
        var json = null;
        $.ajax({
            'async': false,
            'global': false,
            'url': "./hemicycle.json",
            'dataType': "json",
            'success': function (data) {
                json = data;
            }
        });
        return json;
    })();*/
    var hemicycle = [{
      //"n":[9,13,16,20,23],
      "n": [8,11,15,19,22,26,29,33,37],
      "gap": 1.20,
      "widthIcon": 0.39,
      "width": 400,
      "people": data
    }];
   /* Initialize tooltip */	
    tip = d3.tip().attr("class", "d3-tip").html(function(d) {
      foragaints = "Neutrálně (nepřítomen)";
      if (parseInt(d["option_code"]) == 1) foragaints = "Pro návrh";
      if (parseInt(d["option_code"]) == -1) foragaints = "Proti návrhu";
      
      return "<span class=\'stronger\'>" + d["name"] + "</span><br>" + d["party"] + "<br>" + foragaints;
    }); 
    var w=400,h=205,
        svg=d3.select("#chart")
            .append("svg")
            .attr("width",w)
            .attr("height",h);
    var hc = d3.hemicycle()
                .n(function(d) {return d.n;})
                .gap(function(d) {return d.gap;})
                .widthIcon(function(d) {return d.widthIcon;})
                .width(function(d) {return d.width;})
                .people(function(d) {return d.people;});  
    
    var item = svg.selectAll(".hc")
          .data(hemicycle)
       .enter()
        .append("svg:g")
        .call(hc);
        
	/* Invoke the tip in the context of your visualization */
    svg.call(tip);
	
	// Add tooltip div
    var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 1e-6);
    
    
    /*inhtml = '';
    for (k in data) {
      if (k == 12) break;
      group = data[k];
      if (k % 4 == 0) {
        inhtml = inhtml + "<div class='row'>";
      }
      inhtml = inhtml + '<div class="col-xs-3"><i class="fa fa-user" style="color:' + group['color'] + ';font-size:15px;">&nbsp;</i>' + group["abbreviation"] + "</div> ";
      if (k % 4 == 3) {
        inhtml = inhtml + "</div>";
      }
    }
    $("#legendin").html(inhtml)*/
  })
</script>
</body>

single_vote_event.csv

thumbnail.png