Skip to content

Instantly share code, notes, and snippets.

@michalskop

michalskop/chart2.csv

Last active December 28, 2015 13:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save michalskop/7507688 to your computer and use it in GitHub Desktop.
Save michalskop/7507688 to your computer and use it in GitHub Desktop.
Download ZIP
AR: effect of lemas 2011,2013
Raw
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
Raw
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="http://d3js.org/d3.v3.min.js"></script>
<script src="http://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>
Raw
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);
Raw
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")
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment