index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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">
<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}];
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)
}
}
}
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č)");
var icons = svg.selectAll(".icon")
.data(data)
.enter().append("text")
.attr('font-family', 'FontAwesome')
.attr('font-size', icon['height'])
.attr('fill', 'green')
.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'; });
data2 = [
{'x':60400,'y':0,'sex':'female','name':'soudce okres, 30 let'},
{'x':87500,'y':0,'sex':'male','name':'soudce okres, 45 let'},
{'x':101000,'y':0,'sex':'female','name':'soudce okres, 60 let'},
{'x':115900,'y':0,'sex':'male','name':'samosoudce kraj, 60 let'},
{'x':122300,'y':0,'sex':'female','name':'soudce Nejvyšší soud'},
{'x':132000,'y':0,'sex':'male','name':'předseda sen. Nejvyšší'}
]
var icons2 = svg.selectAll(".icon2")
.data(data2)
.enter().append("text")
.attr('font-family', 'FontAwesome')
.attr('font-size', icon['height'])
.attr('fill', 'black')
.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+3);})
.text(function(d) {if (d.sex == 'female') return '\uf182'; else return '\uf183'; });
var texts2 = svg.selectAll(".text2")
.data(data2)
.enter().append("text")
.attr('font-size',15)
.attr("transform", function(d) {return "rotate(-45,"+xScale(d.x)+","+yScale(d.y+4.5)+")";})
.attr('x',function(d) {return xScale(d.x);})
.attr('y',function(d) {return yScale(d.y+4.5);})
.text(function(d) {return d.name});
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>