CZ: Senate, Praha 10, 2014

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

</head>
<body>
    <div id="chart"></div>

for (key in sdata) {
      for (i=0;i<sdata[key]['n'];i++) { 
        if (i%2) s ='male'; else s = 'female';
        data.push({'sex':s,'color':sdata[key]['color'],'random':Math.random()});
      }
    }

k = 0;     
data.sort(sortFunction);
for (key in data) {
  column = Math.floor(k/modulo);
  row = k % modulo;
  data[key]['x'] = row;
  data[key]['y'] = column;
  k++;
}

var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

legend = ["Nevolič","Cabrnochová","Dušková"];
for (key in sdata) {        
 svg.append("text")
  .attr('font-size',20)
  .attr('font-family', 'sans-serif')
  .attr('text-anchor',"start")
  .attr('fill', sdata[key]['color'])
  .attr('x',function(d) {return key*width/3;})
  .attr('y',function(d) {return icon.height/2;})
  .text(sdata[key]['name']);
}

function sortFunction(a, b) {
    if (a['random'] === b['random']) {
        return 0;
    }
    else {
        return (a['random'] < b['random']) ? -1 : 1;
    }
}

</script>
  </body>
</html>

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

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