CZ: Salary distribution (FontAwesome chart)

<!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"> 
    
    <style type="text/css">
	  .axis path,
      .axis line {
          fill: none;
          stroke: #000;
          shape-rendering: crispEdges;
        }
      line {
        stroke:rgb(255,0,0);
        stroke-width:1
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script>

var margin = {top: 20, right: 30, bottom: 30, left: 20},
    width = 650 - margin.left - margin.right;

var 
	xScale = d3.scale.linear()
	  .domain([0, 150000])
	  .range([0, width]);

var rawd = [8500,8500,8500,8500,8500,8500,10431,10813,11090,11317,11515,11693,11857,12009,12153,12289,12419,12545,12666,12783,12898,13009,13118,13225,13329,13432,13534,13633,13732,13829,13926,14021,14116,14209,14302,14394,14486,14577,14668,14758,14848,14938,15027,15116,15205,15293,15381,15470,15558,15646,15734,15822,15910,15998,16086,16174,16262,16351,16439,16528,16616,16705,16795,16884,16974,17064,17154,17245,17336,17427,17518,17610,17703,17795,17889,17982,18076,18171,18266,18362,18458,18555,18652,18750,18848,18947,19047,19148,19249,19350,19453,19556,19660,19765,19871,19977,20085,20193,20302,20412,20524,20636,20749,20863,20978,21094,21212,21331,21450,21571,21694,21817,21942,22069,22196,22326,22456,22588,22722,22858,22995,23134,23274,23417,23561,23707,23856,24006,24158,24313,24470,24629,24791,24955,25122,25292,25464,25639,25817,25999,26183,26371,26562,26757,26956,27158,27364,27575,27790,28010,28234,28463,28698,28938,29184,29435,29693,29958,30229,30508,30794,31089,31392,31704,32025,32357,32700,33054,33421,33800,34194,34603,35028,35471,35933,36415,36920,37450,38006,38592,39211,39866,40562,41303,42096,42948,43868,44867,45958,47158,48492,49988,51689,53654,55973,58787,62340,67104,74190,87418];

icon = {'width': 8, 'height': 15};
llevel = [];
llevel[0] = xScale(rawd[0]);
data = [{'x': rawd[0],'y': 0}];

//create data(x,y)
s = 0;
for (key in rawd) {
  if (key > 0) {
    newlevel = true;
    for (lkey in llevel) {
      if (llevel[lkey] < (xScale(rawd[key]) - icon['width'])) {
        llevel[lkey] = xScale(rawd[key]);
        newlevel = false;
        if (data.length%2) s ='male'; else s = 'female';
        item = {
          'x': rawd[key],
          'y': parseInt(lkey),
          'sex': s
        };
        data.push(item);
        break;
      }
    }
    if (newlevel) {
      llevel.push(xScale(rawd[key]));
      if (data.length%2) s ='male'; else s = 'female';
      item = {
          'x': rawd[key],
          'y': parseInt(parseInt(lkey)+1),
          'sex': s 
      };
      data.push(item)
    }
  }
}

//width 500, height 250, modulo 20, size 40
var height = llevel.length * icon['height'] - margin.top - margin.bottom;

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 yScale = d3.scale.linear()
      .domain([0, llevel.length*1.2])
      .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
   .append("text")
      .attr("x", xScale(150000))
      .attr("dx", ".71em")
      .attr("dy", "-.5em")
      .style("text-anchor", "end")
      .text("Plat (Kč)");

svg.append("text")
  .attr('font-size',20)
  .attr('font-family', 'sans-serif')
  .attr('fill', 'green')
  .attr('x',function(d) {return 2*icon.width + xScale(0);})
  .attr('y',function(d) {return yScale(llevel.length+2);})
  .text(' = 0.5 % zaměstnanců (~20 000 lidí)');
svg.append("text")
  .attr('font-size',25)
  .attr('fill', 'green')
  .attr('font-family', 'FontAwesome')
  .attr('x',function(d) {return xScale(0);})
  .attr('y',function(d) {return yScale(llevel.length+2);})
  .text('\uf183');

svg.append('line')
    .attr('x1',xScale(20863))
    .attr('x2',xScale(20863))
    .attr('y1',yScale(0))
    .attr('y2',yScale(llevel.length))
    .attr('fill', 'green');

svg.append("text")
  .attr('font-size',13)
  .attr('font-family', 'sans-serif')
  .attr('fill', 'red')
  .attr('x',function(d) {return xScale(25000);})
  .attr('y',function(d) {return yScale(llevel.length-4);})
  .attr("transform", function(d) {return "rotate(-90,"+xScale(25000)+","+yScale(llevel.length-4)+")";})
  .text('median');
    </script>
  </body>
</html>

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

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