CZ: Senate, towards elections 2014

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

/*https://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>

</div>
  
  
<script type="text/javascript">
    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],
      "gap": 1.20,
      "widthIcon": 0.34,
      "width": 400,
      "groups": json
    }];
   /* Initialize tooltip */	
    tip = d3.tip().attr("class", "d3-tip").html(function(d) { 
      return "<span class=\'stronger\'>" + d["name"] + "</span><br>";
    }); 
    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;})
                .groups(function(d) {return d.groups;});  
    
    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 json) {
      if (k == 12) break;
      group = json[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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://code.jquery.com/jquery-1.11.1.js