block by michalskop 7507688

AR: effect of lemas 2011,2013

Full Screen

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Scatterplot Chart</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="scatter plot">
    <meta name="author" content="Michal Škop">
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script src="//code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="./jquery.csv-0.71.min.js"></script>
    <script src="./scatterplot2.js"></script>
    <style type="text/css">
			
			text {
			  font-family: sans-serif;
			}
			
			.tick {
			  fill-opacity: 0;
			  stroke: #000000;
			  stroke-width: 1;
			}
			
			.domain {
			    fill: none;
				fill-opacity: 0;
				stroke: black;
				stroke-width: 1;
			}
			.axis line {
				fill: none;
				fill-opacity: 0;
				stroke: black;
				stroke-width: 1;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}
			.axis {
			  
			}
			circle {
			  fill-opacity: .5;
			  stroke-opacity: 0.99;
			}
			.year-2011 {
			  fill: #000;
			  stroke: #000;
			}
			.year-2013 {
			  fill: #fff;
			  fill-opacity: 0;
			  stroke: #000;
			}
			.gov-1 {
			  stroke-width: 5;
			  stroke-opacity: 0.99;
			}
			.regression-line {
			  stroke: #000;
			  stroke-width: 20;
			  stroke-opacity: 0.3;
			}
			.label {
			  font-family: sans-serif;
			  font-size: 15px;
			}

		</style>
  </head>
  <body>
    
    <div id="chart"></div>
    <p>Effect of lemas on election results in Argentina 2011 and 2013.</p>
    <p>2011: white, 2013: filled; with governor: bold</p>
    <p>Example for black and white printing</p>
  </body>
</html>

chart2.csv

elec_prim,max_lema_prim,porciento_elecciones,year,gobernador
0.675050813,0.5142276423,0.012956741,2013,0
0.9372688625,0.3850620399,0.0141376837,2013,0
0.5263783393,0.7196558673,0.0192873872,2013,0
0.9741967121,0.5384830936,0.0208296719,2013,0
0.5134212385,0.5715799388,0.0226781071,2011,0
0.3496171112,0.4586744125,0.0290239491,2013,0
0.5288559322,0.5427118644,0.0293269671,2011,0
0.6609110948,0.4487509184,0.0394366197,2013,0
0.7604258185,0.4759854741,0.049161348,2013,0
0.8055361429,0.6077907083,0.0496337055,2011,0
0.7414334257,0.3513284843,0.0563705642,2011,0
0.7073205245,0.4926102953,0.0574080313,2013,0
0.9418575171,0.6906955125,0.061140354,2011,0
0.8898618648,0.5939812531,0.0625866775,2011,0
0.8625297456,0.4378546586,0.064960847,2011,1
1.1324873096,0.6634816363,0.1024968178,2013,0
1.1950531729,0.6401754612,0.1069337041,2013,1
0.9740160606,0.5092668926,0.1131398252,2011,0
1.0607781222,0.3111619688,0.1223830214,2013,0
0.9684568601,0.3334836615,0.1366649817,2011,0
0.6339492607,0.493691229,0.1398697467,2013,0
0.6446909969,0.403255919,0.1457757462,2013,0
0.896622865,0.2648585313,0.149030408,2011,0
0.8204044453,0.2832209874,0.1527077893,2011,0
0.3455366939,0.4549555041,0.1608465271,2011,0
0.9875466154,0.952650017,0.16277493,2011,0
1.037354359,0.4590058354,0.1712430935,2013,0
1.2149140885,0.9250291475,0.1716888624,2011,0
1.0127392365,0.9692815174,0.174837464,2013,1
1.2326953769,0.6860892424,0.1838769792,2011,0
1.7578651121,0.8118906423,0.1890544306,2013,0
0.8298102123,0.3438570976,0.1927456565,2011,0
1.0779193044,0.4231250804,0.1954500391,2011,1
0.9860917511,0.4158225692,0.1979812554,2013,0
0.6575811421,0.3138418401,0.2097659906,2011,0
1.0118541117,0.7815075857,0.2199110873,2013,0
0.8283341596,0.8418319286,0.2233622995,2013,0
0.9133998574,0.504365645,0.2249703755,2013,0
0.602455213,0.4764162363,0.2391266921,2011,0
1.0441626143,0.7001899322,0.2556761116,2013,0
1.0473128883,0.3403214673,0.2664231746,2011,0
0.8588002134,0.4857419857,0.300443404,2013,0
0.8003446821,0.8369851087,0.3064370897,2013,0
1.1071912729,0.5659239885,0.3402522166,2013,0
1.3207369594,0.8102910625,0.3455698616,2013,0
0.7191889259,0.4376268572,0.3473295725,2013,0
0.891435646,0.671751351,0.349454899,2013,0
0.711257074,0.5547629807,0.3573133062,2013,1
1.0226359602,0.9254089966,0.3790644817,2013,0
1.0475714261,0.8471817508,0.3914753781,2013,1
1.0712491756,0.5674457263,0.4020080825,2013,0
1.0568957089,0.9175700503,0.4102800844,2013,1
0.9960405472,0.7437072982,0.416156176,2013,0
0.960121649,0.5563676128,0.4420459862,2013,1
1.0877568571,0.9735855888,0.4550229188,2013,0
1.0826249185,0.9405505108,0.4576435998,2013,1
1.0533553623,0.943314723,0.4673813625,2013,1
0.9858407613,0.9478483116,0.550997598,2011,0
1.277576516,0.8892621379,0.572451946,2013,1
0.7200251246,0.6308404978,0.6832717411,2011,1

jquery.csv-0.71.min.js


RegExp.escape=function(s){return s.replace(/[-\/\\^$*+?.()|[\]{}]/g,'\\$&');};(function($){'use strict'
$.csv={defaults:{separator:',',delimiter:'"',headers:true},hooks:{castToScalar:function(value,state){var hasDot=/\./;if(isNaN(value)){return value;}else{if(hasDot.test(value)){return parseFloat(value);}else{var integer=parseInt(value);if(isNaN(integer)){return null;}else{return integer;}}}}},parsers:{parse:function(csv,options){var separator=options.separator;var delimiter=options.delimiter;if(!options.state.rowNum){options.state.rowNum=1;}
if(!options.state.colNum){options.state.colNum=1;}
var data=[];var entry=[];var state=0;var value=''
var exit=false;function endOfEntry(){state=0;value='';if(options.start&&options.state.rowNum<options.start){entry=[];options.state.rowNum++;options.state.colNum=1;return;}
if(options.onParseEntry===undefined){data.push(entry);}else{var hookVal=options.onParseEntry(entry,options.state);if(hookVal!==false){data.push(hookVal);}}
entry=[];if(options.end&&options.state.rowNum>=options.end){exit=true;}
options.state.rowNum++;options.state.colNum=1;}
function endOfValue(){if(options.onParseValue===undefined){entry.push(value);}else{var hook=options.onParseValue(value,options.state);if(hook!==false){entry.push(hook);}}
value='';state=0;options.state.colNum++;}
var escSeparator=RegExp.escape(separator);var escDelimiter=RegExp.escape(delimiter);var match=/(D|S|\n|\r|[^DS\r\n]+)/;var matchSrc=match.source;matchSrc=matchSrc.replace(/S/g,escSeparator);matchSrc=matchSrc.replace(/D/g,escDelimiter);match=RegExp(matchSrc,'gm');csv.replace(match,function(m0){if(exit){return;}
switch(state){case 0:if(m0===separator){value+='';endOfValue();break;}
if(m0===delimiter){state=1;break;}
if(m0==='\n'){endOfValue();endOfEntry();break;}
if(/^\r$/.test(m0)){break;}
value+=m0;state=3;break;case 1:if(m0===delimiter){state=2;break;}
value+=m0;state=1;break;case 2:if(m0===delimiter){value+=m0;state=1;break;}
if(m0===separator){endOfValue();break;}
if(m0==='\n'){endOfValue();endOfEntry();break;}
if(/^\r$/.test(m0)){break;}
throw new Error('CSVDataError: Illegal State [Row:'+options.state.rowNum+'][Col:'+options.state.colNum+']');case 3:if(m0===separator){endOfValue();break;}
if(m0==='\n'){endOfValue();endOfEntry();break;}
if(/^\r$/.test(m0)){break;}
if(m0===delimiter){throw new Error('CSVDataError: Illegal Quote [Row:'+options.state.rowNum+'][Col:'+options.state.colNum+']');}
throw new Error('CSVDataError: Illegal Data [Row:'+options.state.rowNum+'][Col:'+options.state.colNum+']');default:throw new Error('CSVDataError: Unknown State [Row:'+options.state.rowNum+'][Col:'+options.state.colNum+']');}});if(entry.length!==0){endOfValue();endOfEntry();}
return data;},splitLines:function(csv,options){var separator=options.separator;var delimiter=options.delimiter;if(!options.state.rowNum){options.state.rowNum=1;}
var entries=[];var state=0;var entry='';var exit=false;function endOfLine(){state=0;if(options.start&&options.state.rowNum<options.start){entry='';options.state.rowNum++;return;}
if(options.onParseEntry===undefined){entries.push(entry);}else{var hookVal=options.onParseEntry(entry,options.state);if(hookVal!==false){entries.push(hookVal);}}
entry='';if(options.end&&options.state.rowNum>=options.end){exit=true;}
options.state.rowNum++;}
var escSeparator=RegExp.escape(separator);var escDelimiter=RegExp.escape(delimiter);var match=/(D|S|\n|\r|[^DS\r\n]+)/;var matchSrc=match.source;matchSrc=matchSrc.replace(/S/g,escSeparator);matchSrc=matchSrc.replace(/D/g,escDelimiter);match=RegExp(matchSrc,'gm');csv.replace(match,function(m0){if(exit){return;}
switch(state){case 0:if(m0===separator){entry+=m0;state=0;break;}
if(m0===delimiter){entry+=m0;state=1;break;}
if(m0==='\n'){endOfLine();break;}
if(/^\r$/.test(m0)){break;}
entry+=m0;state=3;break;case 1:if(m0===delimiter){entry+=m0;state=2;break;}
entry+=m0;state=1;break;case 2:var prevChar=entry.substr(entry.length-1);if(m0===delimiter&&prevChar===delimiter){entry+=m0;state=1;break;}
if(m0===separator){entry+=m0;state=0;break;}
if(m0==='\n'){endOfLine();break;}
if(m0==='\r'){break;}
throw new Error('CSVDataError: Illegal state [Row:'+options.state.rowNum+']');case 3:if(m0===separator){entry+=m0;state=0;break;}
if(m0==='\n'){endOfLine();break;}
if(m0==='\r'){break;}
if(m0===delimiter){throw new Error('CSVDataError: Illegal quote [Row:'+options.state.rowNum+']');}
throw new Error('CSVDataError: Illegal state [Row:'+options.state.rowNum+']');default:throw new Error('CSVDataError: Unknown state [Row:'+options.state.rowNum+']');}});if(entry!==''){endOfLine();}
return entries;},parseEntry:function(csv,options){var separator=options.separator;var delimiter=options.delimiter;if(!options.state.rowNum){options.state.rowNum=1;}
if(!options.state.colNum){options.state.colNum=1;}
var entry=[];var state=0;var value='';function endOfValue(){if(options.onParseValue===undefined){entry.push(value);}else{var hook=options.onParseValue(value,options.state);if(hook!==false){entry.push(hook);}}
value='';state=0;options.state.colNum++;}
if(!options.match){var escSeparator=RegExp.escape(separator);var escDelimiter=RegExp.escape(delimiter);var match=/(D|S|\n|\r|[^DS\r\n]+)/;var matchSrc=match.source;matchSrc=matchSrc.replace(/S/g,escSeparator);matchSrc=matchSrc.replace(/D/g,escDelimiter);options.match=RegExp(matchSrc,'gm');}
csv.replace(options.match,function(m0){switch(state){case 0:if(m0===separator){value+='';endOfValue();break;}
if(m0===delimiter){state=1;break;}
if(m0==='\n'||m0==='\r'){break;}
value+=m0;state=3;break;case 1:if(m0===delimiter){state=2;break;}
value+=m0;state=1;break;case 2:if(m0===delimiter){value+=m0;state=1;break;}
if(m0===separator){endOfValue();break;}
if(m0==='\n'||m0==='\r'){break;}
throw new Error('CSVDataError: Illegal State [Row:'+options.state.rowNum+'][Col:'+options.state.colNum+']');case 3:if(m0===separator){endOfValue();break;}
if(m0==='\n'||m0==='\r'){break;}
if(m0===delimiter){throw new Error('CSVDataError: Illegal Quote [Row:'+options.state.rowNum+'][Col:'+options.state.colNum+']');}
throw new Error('CSVDataError: Illegal Data [Row:'+options.state.rowNum+'][Col:'+options.state.colNum+']');default:throw new Error('CSVDataError: Unknown State [Row:'+options.state.rowNum+'][Col:'+options.state.colNum+']');}});endOfValue();return entry;}},toArray:function(csv,options,callback){var options=(options!==undefined?options:{});var config={};config.callback=((callback!==undefined&&typeof(callback)==='function')?callback:false);config.separator='separator'in options?options.separator:$.csv.defaults.separator;config.delimiter='delimiter'in options?options.delimiter:$.csv.defaults.delimiter;var state=(options.state!==undefined?options.state:{});var options={delimiter:config.delimiter,separator:config.separator,onParseEntry:options.onParseEntry,onParseValue:options.onParseValue,state:state}
var entry=$.csv.parsers.parseEntry(csv,options);if(!config.callback){return entry;}else{config.callback('',entry);}},toArrays:function(csv,options,callback){var options=(options!==undefined?options:{});var config={};config.callback=((callback!==undefined&&typeof(callback)==='function')?callback:false);config.separator='separator'in options?options.separator:$.csv.defaults.separator;config.delimiter='delimiter'in options?options.delimiter:$.csv.defaults.delimiter;var data=[];var options={delimiter:config.delimiter,separator:config.separator,onParseEntry:options.onParseEntry,onParseValue:options.onParseValue,start:options.start,end:options.end,state:{rowNum:1,colNum:1}};data=$.csv.parsers.parse(csv,options);if(!config.callback){return data;}else{config.callback('',data);}},toObjects:function(csv,options,callback){var options=(options!==undefined?options:{});var config={};config.callback=((callback!==undefined&&typeof(callback)==='function')?callback:false);config.separator='separator'in options?options.separator:$.csv.defaults.separator;config.delimiter='delimiter'in options?options.delimiter:$.csv.defaults.delimiter;config.headers='headers'in options?options.headers:$.csv.defaults.headers;options.start='start'in options?options.start:1;if(config.headers){options.start++;}
if(options.end&&config.headers){options.end++;}
var lines=[];var data=[];var options={delimiter:config.delimiter,separator:config.separator,onParseEntry:options.onParseEntry,onParseValue:options.onParseValue,start:options.start,end:options.end,state:{rowNum:1,colNum:1},match:false};var headerOptions={delimiter:config.delimiter,separator:config.separator,start:1,end:1,state:{rowNum:1,colNum:1}}
var headerLine=$.csv.parsers.splitLines(csv,headerOptions);var headers=$.csv.toArray(headerLine[0],options);var lines=$.csv.parsers.splitLines(csv,options);options.state.colNum=1;if(headers){options.state.rowNum=2;}else{options.state.rowNum=1;}
for(var i=0,len=lines.length;i<len;i++){var entry=$.csv.toArray(lines[i],options);var object={};for(var j in headers){object[headers[j]]=entry[j];}
data.push(object);options.state.rowNum++;}
if(!config.callback){return data;}else{config.callback('',data);}},fromArrays:function(arrays,options,callback){var options=(options!==undefined?options:{});var config={};config.callback=((callback!==undefined&&typeof(callback)==='function')?callback:false);config.separator='separator'in options?options.separator:$.csv.defaults.separator;config.delimiter='delimiter'in options?options.delimiter:$.csv.defaults.delimiter;config.escaper='escaper'in options?options.escaper:$.csv.defaults.escaper;config.experimental='experimental'in options?options.experimental:false;if(!config.experimental){throw new Error('not implemented');}
var output=[];for(i in arrays){output.push(arrays[i]);}
if(!config.callback){return output;}else{config.callback('',output);}},fromObjects2CSV:function(objects,options,callback){var options=(options!==undefined?options:{});var config={};config.callback=((callback!==undefined&&typeof(callback)==='function')?callback:false);config.separator='separator'in options?options.separator:$.csv.defaults.separator;config.delimiter='delimiter'in options?options.delimiter:$.csv.defaults.delimiter;config.experimental='experimental'in options?options.experimental:false;if(!config.experimental){throw new Error('not implemented');}
var output=[];for(i in objects){output.push(arrays[i]);}
if(!config.callback){return output;}else{config.callback('',output);}}};$.csvEntry2Array=$.csv.toArray;$.csv2Array=$.csv.toArrays;$.csv2Dictionary=$.csv.toObjects;})(jQuery);

scatterplot2.js

//based primarily on http://alignedleft.com/tutorials/d3/making-a-scatterplot

//Width and height
		var w = 800;
		var h = 500;
		var padding = 60;
		

		
  $.get("chart2.csv", function(respons) {
		 var csv = respons;
		 var obj = $.csv.toObjects(csv);
		 a = 1;
		 
		 
		 var xScale = d3.scale.linear()
							 .domain([0.2, 1])
							 .range([padding, w - padding * 2]);

		var yScale = d3.scale.linear()
							 .domain([0, d3.max(obj, function(d) { return d.elec_prim; })])
							 .range([h - padding, padding]);

		var rScale = d3.scale.linear()
							 .domain([0, d3.max(obj, function(d) { return d.porciento_elecciones; })])
							 .range([2, 20]);
							 
		var formatAsPercentage = d3.format("%");
							 
		//Define X axis
		var xAxis = d3.svg.axis()
						  .scale(xScale)
						  .orient("bottom")
						  .ticks(5)
						  .tickFormat(formatAsPercentage);

		//Define Y axis
		var yAxis = d3.svg.axis()
						  .scale(yScale)
						  .orient("left")
						  .ticks(5)
						  .tickFormat(formatAsPercentage);

		//Create SVG element
		var svg = d3.select("body")
					.append("svg")
					.attr("width", w)
					.attr("height", h);
					
		//Create X axis
		svg.append("g")
			.attr("class", "axis")
			.attr("transform", "translate(0," + (h - padding) + ")")
			.call(xAxis);
		
		//Create Y axis
		svg.append("g")
			.attr("class", "axis")
			.attr("transform", "translate(" + padding + ",0)")
			.call(yAxis);
		 
		 svg.selectAll("circle")
		   .data(obj)
		   .enter()
		   .append("circle")
		   .attr("cx", function(d) {
		   		return xScale(d.max_lema_prim);
		   })
		   .attr("cy", function(d) {
		   		return yScale(d.elec_prim);
		   })
		   .attr("r", function(d) {
		   		return rScale(d.porciento_elecciones);
		   })
		   .attr("class", function(d) {
		   		return "year-" + d.year + " gov-" + d.gobernador;
		   });
		   
		 //axis labels
		 svg.append("text")
			.attr("class", "x label")
			.attr("text-anchor", "end")
			.attr("x", w*0.85)
			.attr("y", h-25)
			.text("Gain in primaries by the most successful lema");
			
		svg.append("text")
			.attr("class", "y label")
			.attr("text-anchor", "end")
			.attr("y", 2)
			.attr("x", -0.15*h)
			.attr("dy", ".75em")
			.attr("transform", "rotate(-90)")
			.text("Election gain / primary gain");
		 
		 
		 //regression line
		 var myLine = svg.append("line")
			.attr("x1", xScale(0.25))
			.attr("y1", yScale(0.766))
			.attr("x2", xScale(0.99))
			.attr("y2", yScale(1.114)) 
			.attr("class", "regression-line")
		 
		 
	});