block by michalskop 4b4f4053cc6d366bf788

CZ: Senate, Praha 10, 2014

Full Screen

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!--<script src="d3.v3.js"></script>-->
    <script src="//d3js.org/d3.v3.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <!-- note: //stackoverflow.com/questions/20032426/fontawesome-doesnt-display-in-firefox -->

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

    <script type="text/javascript">
    var margin = {top: 10, right: 10, bottom: 10, left: 15},
    width = 470 - margin.left - margin.right;
    height = 246 - margin.top - margin.bottom;
    
    var sdata = [
      {'n': 92, 'color': '#aaa','name':'Nevolič'},
      {'n': 4, 'color': '#080','name':'Cabrnochová'},
      {'n': 4, 'color': '#0bb','name':'Dušková'}, 
    ];
    icon = {'width': height/10, 'height': height/6};
    
    modulo = 20;
    
    var 
	xScale = d3.scale.linear()
	  .domain([0, modulo])
	  .range([0, width]),
	yScale = d3.scale.linear()
	  .domain([0, 6])
	  .range([height, 0]);
	 
	j = 0; 
	data = [];

    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 + ")");


    
  var icons = svg.selectAll(".icon")
		.data(data)
      .enter().append("text")
        .attr('font-family', 'FontAwesome')
        .attr('font-size', icon['height'])
        .attr('fill',function(d) {return d.color;})
        .attr('text-anchor',"middle")
        .attr('title',function(d) {return d.name;})
        .attr('x',function(d) {return xScale(d.x);})
        .attr('y',function(d) {return yScale(d.y);})
        .text(function(d) {if (d.sex == 'female') return '\uf182'; else return '\uf183'; });



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>