radbrt · September 21, 2015 20:42
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <meta charset="UTF-8">
 <head>
 <title>SES indeks</title>
 <script src="http://sectiontwenty.com/json-stat.js" type="text/javascript"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
 <style type="text/css">

 body {
 	background-color: #fff;
 	width: 1050px;
 	display: block;
 	margin: 0px auto 0px auto;
 	padding: 5px;
 	font-family: "Helvetica Neue", "Helvetica", "sans-serif";

 }

 .canvas {
 	display: block;
 	padding: 0px auto 0px auto;
 	margin: 0px auto 0px auto;
 }

 .axis path, .axis line {
 	fill: none;
 	shape-rendering: crispEdges;
 }

 .markerLine {
 	opacity: 0.2;
 }

 .menu {
 	width:100%;
 	display: block;
 	margin: 0 auto 0 auto;
 	padding: 0 auto 0 auto;
 }

 </style>

 </head>
 <body>
 <script>


 var padding = { top: 10, right: 0, bottom: 0, left: 60};
 var width = 960;
 var height = d3.min([(window.innerHeight - padding.top - padding.bottom - 80), 820]);
 //var height = 500;
 //d3.select("body").attr("height", height);
 var data=d3.csv("ses.csv", function(data) { // THIS IS WHERE THE MAGIC HAPPENS;
 var geos=[];
 	data.forEach(function(d) {
 		d.value = +d.Value.replace(/ /g,'');
 		d.countryName=d.GEO;
 		d.GEO = d.GEO.replace(/ /g,'');
 		if($.inArray(d.GEO, geos) === -1) geos.push(d.GEO);
 	});
 	var menubox=d3.select("body").append("div").attr("class","menu");
 	var label=menubox.append("label").attr("for","selectbox").text("Highlight country ");

 	var sel=menubox.append("select").attr("id", "selectbox").on("change", function(d) {
 			var newC=opt[0][sel.property('selectedIndex')].__data__;
 			d3.selectAll(".markerLine").attr("stroke", "#8f8f8f").attr("fill", "#8f8f8f");
 			d3.selectAll(".".concat(newC)).attr("stroke", "red").attr("fill", "red").style("opacity", 1);
 		});
 	var opt=sel.selectAll("option").data(geos).enter().append("option").attr("value", function(d) { return d; }).text(function(d) { return d; });

 var nest = d3.nest().key(function(d) { return d.ISCO08; });
 var nd=nest.entries(data);

 keyNames=new Array();
 for(var k=0; k<nd.length; k++) {
 keyNames.push(nd[k].key);
 }
 var kl = keyNames.length;

 var y = d3.scale.linear()
    .domain([7500, 0])
    .range([padding.top , height - padding.top - padding.bottom ]);
    
    
 var x = d3.scale.linear()
    .domain([0, kl])
    .range([padding.left, (width - padding.left - padding.right)]);
    
 var frame = d3.select("body").append("div").attr("id","frame");
 var canvas = d3.select("#frame").append("svg")
 				.attr("width", width)
 				.attr("height", height+100)
 				.style("background-color", "#fff")
 				.style("class","canvas");
 				
 var toltip = canvas.append("div").attr("background-color", "red"); //.attr("position", "absolute").attr("x", "500px").attr("y", "200px");

 var strikes = canvas.selectAll(".item").data(data)
 			.enter()
 			.append("rect")
 			.attr("x",function(d,i) {
 				return x(i%kl);
 			})
 			.attr("y", function(d) {
 				return y(d.value);
 			})
 			 .attr("class", function(d) { return d.GEO + " markerLine"; })
 			.attr("width", 100)
 			.attr("height",2)
 			.attr("fill", "#000")
 			.on("mouseover", function(d) {
 				d3.selectAll(".".concat(d.GEO)).attr("stroke", "red").attr("fill", "red").style("opacity", 1);
 			})
 			.on("mouseout", function(d) {
 				d3.selectAll(".".concat(d.GEO)).attr("stroke", "#000").attr("fill", "#000").style("opacity", 0.2);
 			})
 			.append("svg:title").text(function(d) { return d.ISCO08 +' in '+ d.countryName + ", € " + d.Value; });


 	// ****** Do the axes ******
 	var xAxis = d3.svg.axis()
 	    .scale(x)
 	    .ticks(8)
 	    .tickFormat(function(i) { return keyNames[i]; })
 	    .orient("bottom");
 	    
 	var yAxis = d3.svg.axis()
 	    .scale(y)
 	    .orient("left");

 	canvas.append("g")
 		.call(yAxis)
 	    .attr("class", "axis")
 	    .attr("transform", "translate(" + padding.left + "," + 0 + ")")
 	    .attr("stroke", "#000000")
 	    .selectAll("text")
 	    .attr("stroke", "none");

 	canvas.append("g")
 		.call(xAxis)
 		.attr("class", "axis")
 		.attr("stroke", "#000000")
 		.attr("transform", "translate(" + 0 + " , " + (height - padding.top) + ")")
 		.attr("id", "x")
        .selectAll("text")
        .style("text-anchor", "end")
        .attr("stroke", "none")
        .attr("font-size", "10px")
        .attr("transform", function (d) { return "rotate(-10), translate(70,20)"; });

 });

 </script>
 </body>
 </html>
diff --git a/ses.csv b/ses.csv
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<html>
	<meta charset="UTF-8">
	<head>
	<title>SES indeks</title>
	<script src="http://sectiontwenty.com/json-stat.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style type="text/css">

	body {
	background-color: #fff;
	width: 1050px;
	display: block;
	margin: 0px auto 0px auto;
	padding: 5px;
	font-family: "Helvetica Neue", "Helvetica", "sans-serif";

	}

	.canvas {
	display: block;
	padding: 0px auto 0px auto;
	margin: 0px auto 0px auto;
	}

	.axis path, .axis line {
	fill: none;
	shape-rendering: crispEdges;
	}

	.markerLine {
	opacity: 0.2;
	}

	.menu {
	width:100%;
	display: block;
	margin: 0 auto 0 auto;
	padding: 0 auto 0 auto;
	}

	</style>

	</head>
	<body>
	<script>


	var padding = { top: 10, right: 0, bottom: 0, left: 60};
	var width = 960;
	var height = d3.min([(window.innerHeight - padding.top - padding.bottom - 80), 820]);
	//var height = 500;
	//d3.select("body").attr("height", height);
	var data=d3.csv("ses.csv", function(data) { // THIS IS WHERE THE MAGIC HAPPENS;
	var geos=[];
	data.forEach(function(d) {
	d.value = +d.Value.replace(/ /g,'');
	d.countryName=d.GEO;
	d.GEO = d.GEO.replace(/ /g,'');
	if($.inArray(d.GEO, geos) === -1) geos.push(d.GEO);
	});
	var menubox=d3.select("body").append("div").attr("class","menu");
	var label=menubox.append("label").attr("for","selectbox").text("Highlight country ");

	var sel=menubox.append("select").attr("id", "selectbox").on("change", function(d) {
	var newC=opt[0][sel.property('selectedIndex')].__data__;
	d3.selectAll(".markerLine").attr("stroke", "#8f8f8f").attr("fill", "#8f8f8f");
	d3.selectAll(".".concat(newC)).attr("stroke", "red").attr("fill", "red").style("opacity", 1);
	});
	var opt=sel.selectAll("option").data(geos).enter().append("option").attr("value", function(d) { return d; }).text(function(d) { return d; });

	var nest = d3.nest().key(function(d) { return d.ISCO08; });
	var nd=nest.entries(data);

	keyNames=new Array();
	for(var k=0; k<nd.length; k++) {
	keyNames.push(nd[k].key);
	}
	var kl = keyNames.length;

	var y = d3.scale.linear()
	.domain([7500, 0])
	.range([padding.top , height - padding.top - padding.bottom ]);


	var x = d3.scale.linear()
	.domain([0, kl])
	.range([padding.left, (width - padding.left - padding.right)]);

	var frame = d3.select("body").append("div").attr("id","frame");
	var canvas = d3.select("#frame").append("svg")
	.attr("width", width)
	.attr("height", height+100)
	.style("background-color", "#fff")
	.style("class","canvas");

	var toltip = canvas.append("div").attr("background-color", "red"); //.attr("position", "absolute").attr("x", "500px").attr("y", "200px");

	var strikes = canvas.selectAll(".item").data(data)
	.enter()
	.append("rect")
	.attr("x",function(d,i) {
	return x(i%kl);
	})
	.attr("y", function(d) {
	return y(d.value);
	})
	.attr("class", function(d) { return d.GEO + " markerLine"; })
	.attr("width", 100)
	.attr("height",2)
	.attr("fill", "#000")
	.on("mouseover", function(d) {
	d3.selectAll(".".concat(d.GEO)).attr("stroke", "red").attr("fill", "red").style("opacity", 1);
	})
	.on("mouseout", function(d) {
	d3.selectAll(".".concat(d.GEO)).attr("stroke", "#000").attr("fill", "#000").style("opacity", 0.2);
	})
	.append("svg:title").text(function(d) { return d.ISCO08 +' in '+ d.countryName + ", € " + d.Value; });


	// **** Do the axes ****
	var xAxis = d3.svg.axis()
	.scale(x)
	.ticks(8)
	.tickFormat(function(i) { return keyNames[i]; })
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	canvas.append("g")
	.call(yAxis)
	.attr("class", "axis")
	.attr("transform", "translate(" + padding.left + "," + 0 + ")")
	.attr("stroke", "#000000")
	.selectAll("text")
	.attr("stroke", "none");

	canvas.append("g")
	.call(xAxis)
	.attr("class", "axis")
	.attr("stroke", "#000000")
	.attr("transform", "translate(" + 0 + " , " + (height - padding.top) + ")")
	.attr("id", "x")
	.selectAll("text")
	.style("text-anchor", "end")
	.attr("stroke", "none")
	.attr("font-size", "10px")
	.attr("transform", function (d) { return "rotate(-10), translate(70,20)"; });

	});

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