xxxxxxxxxx
<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>
<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;"> </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