Skip to content

Instantly share code, notes, and snippets.

@michalskop

michalskop/a-colombia

Last active December 18, 2015 21:49
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/5850382 to your computer and use it in GitHub Desktop.
Save michalskop/5850382 to your computer and use it in GitHub Desktop.
Download ZIP
Colombia 2011
Raw
a-colombia
Colombian Camara 2011: Analysis of voting records
Data from the official website.
Raw
chart.css
/*based on http://bost.ocks.org/mike/nations/ */
#chart {
margin-left: -40px;
}
text {
font: 10px sans-serif;
}
/*dots*/
.dot {
stroke: #000;
opacity: .5;
stroke-opacity: .75;
}
.highlighted {
stroke: #000;
stroke-opacity: 1;
stroke-width: 3;
opacity: 1;
}
/*axes*/
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.label {
fill: #777;
}
/*year*/
.year.label {
font: 500 100px "Helvetica Neue";
fill: #ddd;
}
.year.label.active {
fill: #aaa;
}
.overlay {
fill: none;
pointer-events: all;
cursor: ew-resize;
}
/*layout of chart and checkboxes of mps*/
.chart-content {
min-height: 460px;
}
.additional-column {
max-height: 460px;
/* from http://stackoverflow.com/questions/5715705/always-show-vertical-scrollbar-in-select */
overflow-x: hidden;
}
#slider-form {
width:80%;
float:right;
}
/*computer*/
@media all and (min-width: 770px){
.additional-column {
text-align: right;
float: right;
width: 25%;
background: none;
}
.main-column {
width: 70%;
float: left;
margin-top: 30px;
margin-right: 1%;
padding-right: 1%;
}
}
/*tooltips*/
/* http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html */
/* alternative, was not able to use it: bl.ocks.org/ilyabo/1373263 */
div.tooltip {
position: absolute;
text-align: center;
width: 10em;
height: 3.5em;
padding: 2px;
font: .8em sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
Raw
co_camara_1y.json
[{"name": "Acuña Diaz, Laureano Augus","id": 1,"d1": [[2011,0.2737]],"d2": [[2011,0.3875]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Agudelo Zapata, Ivan Dario","id": 2,"d1": [[2011,-0.2417]],"d2": [[2011,0.6063]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Alvarez Montene, Javier Tato","id": 3,"d1": [[2011,-0.715]],"d2": [[2011,0.2612]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Amaya Garcia, Claudia Marcel","id": 4,"d1": [[2011,-0.1711]],"d2": [[2011,-0.8559]],"color": [[2011,"PU","#fFA500"]]},{"name": "Amaya Rodriguez, Carlos Andres","id": 5,"d1": [[2011,-1.0406]],"d2": [[2011,0.1968]],"color": [[2011,"PV","#808080"]]},{"name": "Amin Escaf, Miguel","id": 6,"d1": [[2011,-0.0141]],"d2": [[2011,0.7646]],"color": [[2011,"PU","#fFA500"]]},{"name": "Amin Saleme, Fabio Raul","id": 7,"d1": [[2011,0.1915]],"d2": [[2011,0.6949]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Anaya Anaya, Monica Del Car","id": 8,"d1": [[2011,-0.4721]],"d2": [[2011,0.832]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Arango Torres, Jair","id": 9,"d1": [[2011,0.991]],"d2": [[2011,-0.6102]],"color": [[2011,"CR","#00529e"]]},{"name": "Arcila Moncada, Henry Humberto","id": 10,"d1": [[2011,-0.4643]],"d2": [[2011,-0.8286]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Arenas Prada, Miguel Jesus","id": 11,"d1": [[2011,-0.5681]],"d2": [[2011,-0.5823]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Arias Castillo, Wilson Neber","id": 12,"d1": [[2011,-1.3826]],"d2": [[2011,-0.981]],"color": [[2011,"PDA","#ffff00"]]},{"name": "Arrechea Bangue, Heriberto","id": 13,"d1": [[2011,-0.0124]],"d2": [[2011,0.4371]],"color": [[2011,"CECN","#808080"]]},{"name": "Barguil Assis, David Alejandr","id": 14,"d1": [[2011,0.1775]],"d2": [[2011,0.5481]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Barrera Gutierr, Luis Guillermo","id": 15,"d1": [[2011,-0.1064]],"d2": [[2011,-0.9582]],"color": [[2011,"PU","#fFA500"]]},{"name": "Barrera Rueda, Lina Maria","id": 16,"d1": [[2011,0.1468]],"d2": [[2011,0.4551]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Benavides Solar, Diela Liliana","id": 17,"d1": [[2011,0.2039]],"d2": [[2011,-0.3796]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Bermudez Sanche, Jose Ignacio","id": 18,"d1": [[2011,-0.4941]],"d2": [[2011,-0.9303]],"color": [[2011,"PU","#fFA500"]]},{"name": "Betancourt Pere, Bayardo Gilber","id": 19,"d1": [[2011,-0.0182]],"d2": [[2011,0.6701]],"color": [[2011,"PIN","#fef153"]]},{"name": "Blanco Alvarez, German Alcides","id": 20,"d1": [[2011,-0.4011]],"d2": [[2011,-0.7994]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Bocanegra Varon, Alfredo","id": 21,"d1": [[2011,-0.4045]],"d2": [[2011,-0.9108]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Bonilla Soto, Carlos Julio","id": 22,"d1": [[2011,-0.1173]],"d2": [[2011,0.8003]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Bravo Realpe, Oscar Fernando","id": 23,"d1": [[2011,-0.4823]],"d2": [[2011,0.3617]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Burgos Ramirez, Didier","id": 24,"d1": [[2011,0.2587]],"d2": [[2011,-0.0944]],"color": [[2011,"PU","#fFA500"]]},{"name": "Cabrera Baez, Angel Custodio","id": 25,"d1": [[2011,0.5384]],"d2": [[2011,-0.261]],"color": [[2011,"PU","#fFA500"]]},{"name": "Caicedo Sastoqu, Jose Edilberto","id": 26,"d1": [[2011,-0.6435]],"d2": [[2011,-1.1514]],"color": [[2011,"PU","#fFA500"]]},{"name": "Camelo Ramos, Jose Joaquin","id": 27,"d1": [[2011,-0.6952]],"d2": [[2011,0.5534]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Cardenas Cardos, Hernando","id": 28,"d1": [[2011,0.7447]],"d2": [[2011,0.3673]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Carebilla Cuell, Manuel Antonio","id": 29,"d1": [[2011,-0.1015]],"d2": [[2011,0.7237]],"color": [[2011,"CR","#00529e"]]},{"name": "Castillo Garcia, Nancy Denise","id": 30,"d1": [[2011,0.0823]],"d2": [[2011,0.9992]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Cepeda Castro, Ivan","id": 31,"d1": [[2011,-1.4342]],"d2": [[2011,-0.9974]],"color": [[2011,"PDA","#ffff00"]]},{"name": "Cervantes Varel, Jaime","id": 32,"d1": [[2011,0.2395]],"d2": [[2011,0.4866]],"color": [[2011,"CR","#00529e"]]},{"name": "Chacon Camargo, Alejandro Carl","id": 33,"d1": [[2011,-0.1058]],"d2": [[2011,0.3709]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Clavijo Clavijo, Orlando Alfons","id": 34,"d1": [[2011,0.1523]],"d2": [[2011,-0.7226]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Correa Mojica, Carlos Arturo","id": 35,"d1": [[2011,-0.0529]],"d2": [[2011,-0.2303]],"color": [[2011,"PU","#fFA500"]]},{"name": "Crissien Borrer, Eduardo","id": 36,"d1": [[2011,0.5686]],"d2": [[2011,0.141]],"color": [[2011,"PU","#fFA500"]]},{"name": "Cuenca Chaux, Carlos Alberto","id": 37,"d1": [[2011,0.3317]],"d2": [[2011,0.8479]],"color": [[2011,"CR","#00529e"]]},{"name": "De La Peña Marq, Fernando","id": 38,"d1": [[2011,0.8272]],"d2": [[2011,0.5144]],"color": [[2011,"PIN","#fef153"]]},{"name": "Deluque Zuleta, Alfredo Rafael","id": 39,"d1": [[2011,0.4334]],"d2": [[2011,0.8246]],"color": [[2011,"PU","#fFA500"]]},{"name": "Diaz Granados A, Eduardo A.","id": 40,"d1": [[2011,0.2426]],"d2": [[2011,0.7334]],"color": [[2011,"PU","#fFA500"]]},{"name": "Diaz Granados T, Luis Eduardo","id": 41,"d1": [[2011,0.0379]],"d2": [[2011,0.0588]],"color": [[2011,"CR","#00529e"]]},{"name": "Diaz Hernandez, Holger Horacio","id": 42,"d1": [[2011,0.7968]],"d2": [[2011,-0.3397]],"color": [[2011,"PIN","#fef153"]]},{"name": "Diaz Ortiz, Gloria Stella","id": 43,"d1": [[2011,-0.4398]],"d2": [[2011,-0.3507]],"color": [[2011,"MM","#01458e"]]},{"name": "Duque Naranjo, Yolanda","id": 44,"d1": [[2011,-0.7125]],"d2": [[2011,0.2509]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Dussan Lopez, Luis Enrique","id": 45,"d1": [[2011,0.9245]],"d2": [[2011,-0.5251]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Eljadue Gutierr, Issa","id": 46,"d1": [[2011,0.1886]],"d2": [[2011,0.2205]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Escobar Cordoba, Carlos Alberto","id": 47,"d1": [[2011,-0.2187]],"d2": [[2011,0.1402]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Florez Asprilla, Jose Bernardo","id": 48,"d1": [[2011,0.666]],"d2": [[2011,-0.8104]],"color": [[2011,"PU","#fFA500"]]},{"name": "Franco Castaño, Adriana","id": 49,"d1": [[2011,-0.3976]],"d2": [[2011,0.2634]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Gallardo Archbo, Julio Eugenio","id": 50,"d1": [[2011,0.7298]],"d2": [[2011,0.5188]],"color": [[2011,"IR","#808080"]]},{"name": "Garcia Gomez, Juan Carlos","id": 51,"d1": [[2011,-0.2494]],"d2": [[2011,0.0171]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Garcia Tirado, William Ramon","id": 52,"d1": [[2011,0.1835]],"d2": [[2011,0.0728]],"color": [[2011,"CR","#00529e"]]},{"name": "Gaviria Muñoz, Simon","id": 53,"d1": [[2011,0.2534]],"d2": [[2011,0.9851]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Giraldo Arboled, Atilano Alonso","id": 54,"d1": [[2011,-0.4533]],"d2": [[2011,-0.7191]],"color": [[2011,"CR","#00529e"]]},{"name": "Gnecco Zuleta, Jose Alfredo","id": 55,"d1": [[2011,0.6353]],"d2": [[2011,-0.3397]],"color": [[2011,"PU","#fFA500"]]},{"name": "Gomez Martinez, Miguel","id": 56,"d1": [[2011,0.3245]],"d2": [[2011,0.6138]],"color": [[2011,"PU","#fFA500"]]},{"name": "Gomez Velasquez, Wilson Hernand","id": 57,"d1": [[2011,0.7787]],"d2": [[2011,-0.7021]],"color": [[2011,"PU","#fFA500"]]},{"name": "Gomez Villamiza, Jorge Eliecer","id": 58,"d1": [[2011,-0.1385]],"d2": [[2011,0.7416]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Gonzalez De Per, Consuelo","id": 59,"d1": [[2011,-0.2071]],"d2": [[2011,-0.4806]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Henao Martinez, Oscar Humberto","id": 60,"d1": [[2011,0.1077]],"d2": [[2011,0.4143]],"color": [[2011,"CR","#00529e"]]},{"name": "Hernandez Mogol, Carlos Eduardo","id": 61,"d1": [[2011,0.3083]],"d2": [[2011,-0.6386]],"color": [[2011,"PU","#fFA500"]]},{"name": "Herrera Diaz, Roberto Jose","id": 62,"d1": [[2011,0.3307]],"d2": [[2011,0.3412]],"color": [[2011,"ALAS","#808080"]]},{"name": "Hinestrosa Sine, Jairo","id": 63,"d1": [[2011,0.9341]],"d2": [[2011,-0.6917]],"color": [[2011,"PIN","#fef153"]]},{"name": "Housni Jaller, Jack","id": 64,"d1": [[2011,-0.388]],"d2": [[2011,0.3883]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Jimenez Lopez, Carlos Abraham","id": 65,"d1": [[2011,0.2157]],"d2": [[2011,0.5339]],"color": [[2011,"CR","#00529e"]]},{"name": "Jimenez Paterni, Nicolas Antoni","id": 66,"d1": [[2011,-0.1401]],"d2": [[2011,-0.7124]],"color": [[2011,"PU","#fFA500"]]},{"name": "Lemos Uribe, Juan Felipe","id": 67,"d1": [[2011,-0.1871]],"d2": [[2011,-0.9089]],"color": [[2011,"PU","#fFA500"]]},{"name": "Leon Celis, Carlos Eduardo","id": 68,"d1": [[2011,-0.1367]],"d2": [[2011,-0.3634]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Leon Leon, Buenaventura","id": 69,"d1": [[2011,0.4026]],"d2": [[2011,0.607]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Londoño Jaramil, Juana Carolina","id": 70,"d1": [[2011,0.0389]],"d2": [[2011,0.0929]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Madrid Hodeg, Rafael Antonio","id": 71,"d1": [[2011,-0.2351]],"d2": [[2011,-0.5439]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Marin, Oscar De Jesus","id": 72,"d1": [[2011,-1.2362]],"d2": [[2011,-0.5261]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Marquez Guenzat, Mercedes E","id": 73,"d1": [[2011,-0.1278]],"d2": [[2011,-0.4487]],"color": [[2011,"PIN","#fef153"]]},{"name": "Martinez Gutier, Juan Carlos","id": 74,"d1": [[2011,0.7764]],"d2": [[2011,-0.388]],"color": [[2011,"PU","#fFA500"]]},{"name": "Martinez Rosale, Rosmery","id": 75,"d1": [[2011,0.2825]],"d2": [[2011,-0.3779]],"color": [[2011,"CR","#00529e"]]},{"name": "Mendez Bechara, Raymundo Elias","id": 76,"d1": [[2011,-0.3146]],"d2": [[2011,-0.7218]],"color": [[2011,"PU","#fFA500"]]},{"name": "Mesa Betancur, Jose Ignacio","id": 77,"d1": [[2011,-0.5388]],"d2": [[2011,-0.6173]],"color": [[2011,"CR","#00529e"]]},{"name": "Mesa Botero, Jorge Hernan","id": 78,"d1": [[2011,0.4956]],"d2": [[2011,0.3425]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Molina Triana, Alfredo Guille","id": 79,"d1": [[2011,0.2605]],"d2": [[2011,0.6471]],"color": [[2011,"PU","#fFA500"]]},{"name": "Moreno Bandeira, Victor Hugo","id": 80,"d1": [[2011,0.0136]],"d2": [[2011,-0.0315]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Muvdi Aranguena, Pedro Mary","id": 81,"d1": [[2011,-0.3242]],"d2": [[2011,0.2996]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Naranjo Escobar, Diego Alberto","id": 82,"d1": [[2011,0.0827]],"d2": [[2011,-0.8123]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Navas Talero, Carlos German","id": 83,"d1": [[2011,-1.3673]],"d2": [[2011,0.6407]],"color": [[2011,"PDA","#ffff00"]]},{"name": "Ochoa Zuluaga, Luis Fernando","id": 84,"d1": [[2011,-0.1941]],"d2": [[2011,-1.0247]],"color": [[2011,"PU","#fFA500"]]},{"name": "Orozco Vivas, Felipe Fabian","id": 85,"d1": [[2011,0.0742]],"d2": [[2011,-0.8551]],"color": [[2011,"PU","#fFA500"]]},{"name": "Ortega Samboni, Jairo","id": 86,"d1": [[2011,-0.1722]],"d2": [[2011,-0.5514]],"color": [[2011,"PU","#fFA500"]]},{"name": "Ortiz Urueña, Roberto","id": 87,"d1": [[2011,0.3239]],"d2": [[2011,0.7924]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Osorio Salgado, Nidia Marcela","id": 88,"d1": [[2011,0.3249]],"d2": [[2011,0.5427]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Ospina Ospina, Elkin Rodolfo","id": 89,"d1": [[2011,-0.3229]],"d2": [[2011,-0.9262]],"color": [[2011,"PU","#fFA500"]]},{"name": "Pacheco Alvarez, Alvaro","id": 90,"d1": [[2011,0.0954]],"d2": [[2011,0.8385]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Padaui Alvarez, Hernando Jose","id": 91,"d1": [[2011,0.595]],"d2": [[2011,0.7251]],"color": [[2011,"CR","#00529e"]]},{"name": "Patiño Amariles, Diego","id": 92,"d1": [[2011,-1.1278]],"d2": [[2011,-0.0231]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Pedraza Ortega, Telesforo","id": 93,"d1": [[2011,0.3259]],"d2": [[2011,-0.7177]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Penagos Giraldo, Hernan","id": 94,"d1": [[2011,-0.139]],"d2": [[2011,-0.8768]],"color": [[2011,"PU","#fFA500"]]},{"name": "Pereira Caballe, Pedrito Tomas","id": 95,"d1": [[2011,0.5511]],"d2": [[2011,-0.8498]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Perez Santos, Eduardo Enriqu","id": 96,"d1": [[2011,0.2389]],"d2": [[2011,0.7705]],"color": [[2011,"PIN","#fef153"]]},{"name": "Perez Suarez, Jose Rodolfo","id": 97,"d1": [[2011,0.1903]],"d2": [[2011,0.2539]],"color": [[2011,"PU","#fFA500"]]},{"name": "Pinilla Pedraza, Alba Luz","id": 98,"d1": [[2011,-1.1169]],"d2": [[2011,-0.9675]],"color": [[2011,"PDA","#ffff00"]]},{"name": "Posada Sanchez, Augusto","id": 99,"d1": [[2011,-0.1162]],"d2": [[2011,-0.6939]],"color": [[2011,"PU","#fFA500"]]},{"name": "Prada Gil, Hernando Alfon","id": 100,"d1": [[2011,-0.4206]],"d2": [[2011,0.7288]],"color": [[2011,"PV","#808080"]]},{"name": "Puentes Diaz, Gustavo Hernan","id": 101,"d1": [[2011,0.3033]],"d2": [[2011,-0.1861]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Quintero Trujil, Jairo","id": 102,"d1": [[2011,0.6686]],"d2": [[2011,0.4575]],"color": [[2011,"PU","#fFA500"]]},{"name": "Raad Hernandez, Elias","id": 103,"d1": [[2011,0.2566]],"d2": [[2011,0.191]],"color": [[2011,"PU","#fFA500"]]},{"name": "Ramirez Orrego, Marta Cecilia","id": 104,"d1": [[2011,0.0573]],"d2": [[2011,0.5298]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Ramirez Valenci, Leon Dario","id": 105,"d1": [[2011,0.1422]],"d2": [[2011,-0.743]],"color": [[2011,"PU","#fFA500"]]},{"name": "Rengifo Santiba, Adolfo Leon","id": 106,"d1": [[2011,0.8803]],"d2": [[2011,-0.2364]],"color": [[2011,"PU","#fFA500"]]},{"name": "Rincon Espinel, Mercedes","id": 107,"d1": [[2011,0.3544]],"d2": [[2011,0.6292]],"color": [[2011,"CR","#00529e"]]},{"name": "Rivera Florez, Guillermo Abel","id": 108,"d1": [[2011,-1.1491]],"d2": [[2011,0.3613]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Roa Sarmiento, Humphrey","id": 109,"d1": [[2011,-0.9282]],"d2": [[2011,-0.959]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Robledo Gomez, Angela Maria","id": 110,"d1": [[2011,-0.6669]],"d2": [[2011,0.7741]],"color": [[2011,"PV","#808080"]]},{"name": "Rodriguez Calvo, Constantino","id": 111,"d1": [[2011,0.5121]],"d2": [[2011,0.6073]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Rodriguez Contr, Jaime","id": 112,"d1": [[2011,0.304]],"d2": [[2011,0.7079]],"color": [[2011,"PU","#fFA500"]]},{"name": "Rodriguez Gongo, Ruben Dario","id": 113,"d1": [[2011,-0.2458]],"d2": [[2011,-0.9542]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Rodriguez Pinzo, Ciro Antonio","id": 114,"d1": [[2011,-0.1252]],"d2": [[2011,0.6374]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Rodriguez Rengi, Roosvelt","id": 115,"d1": [[2011,0.8121]],"d2": [[2011,-0.3413]],"color": [[2011,"PU","#fFA500"]]},{"name": "Rojas Ortiz, Carlos Augusto","id": 116,"d1": [[2011,-0.2197]],"d2": [[2011,-0.9785]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Roldan Avendaño, John Jairo","id": 117,"d1": [[2011,0.0943]],"d2": [[2011,0.7697]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Romero Piñeros, Rafael","id": 118,"d1": [[2011,0.2747]],"d2": [[2011,0.8399]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Rozo Rodriguez, Jorge Enrique","id": 119,"d1": [[2011,-0.3104]],"d2": [[2011,-1.1811]],"color": [[2011,"CR","#00529e"]]},{"name": "Salamanca Corte, Pablo Enrique","id": 120,"d1": [[2011,-0.6112]],"d2": [[2011,0.8947]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Salas Moises, Luis Enrique","id": 121,"d1": [[2011,0.7921]],"d2": [[2011,0.6031]],"color": [[2011,"PU","#fFA500"]]},{"name": "Salazar Uribe, Juan Carlos","id": 122,"d1": [[2011,0.3536]],"d2": [[2011,0.1275]],"color": [[2011,"PIN","#fef153"]]},{"name": "Sanabria Astudi, Heriberto","id": 123,"d1": [[2011,-0.3202]],"d2": [[2011,0.6716]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Sanchez Franco, Juan Carlos","id": 124,"d1": [[2011,0.4427]],"d2": [[2011,0.6012]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Sandoval Perill, Ivan Dario","id": 125,"d1": [[2011,0.3088]],"d2": [[2011,0.7343]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Sarria Villa, Esmeralda","id": 126,"d1": [[2011,0.4554]],"d2": [[2011,0.2104]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Serrano Morales, Luis Antonio","id": 127,"d1": [[2011,-0.364]],"d2": [[2011,-0.6702]],"color": [[2011,"PU","#fFA500"]]},{"name": "Sierra Leon, Pablo A","id": 128,"d1": [[2011,0.3469]],"d2": [[2011,-0.6938]],"color": [[2011,"PU","#fFA500"]]},{"name": "Sierra Palacio, Jimmy Javier","id": 129,"d1": [[2011,0.6128]],"d2": [[2011,0.8908]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Suarez Florez, Mario","id": 130,"d1": [[2011,0.1872]],"d2": [[2011,0.7684]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Taborda Castro, Libardo Antoni","id": 131,"d1": [[2011,-0.1111]],"d2": [[2011,-0.6882]],"color": [[2011,"PU","#fFA500"]]},{"name": "Tamayo Tamayo, Gerardo","id": 132,"d1": [[2011,0.087]],"d2": [[2011,-1.0935]],"color": [[2011,"PU","#fFA500"]]},{"name": "Tavera Amado, Didier Alberto","id": 133,"d1": [[2011,0.5111]],"d2": [[2011,-0.1227]],"color": [[2011,"PIN","#fef153"]]},{"name": "Torres Monsalvo, Efrain Antonio","id": 134,"d1": [[2011,-0.1527]],"d2": [[2011,0.3952]],"color": [[2011,"PU","#fFA500"]]},{"name": "Valdes Barcha, Juan Manuel","id": 135,"d1": [[2011,-0.5751]],"d2": [[2011,-0.8079]],"color": [[2011,"ASI","#ed3237"]]},{"name": "Valencia Girald, Noel Ricardo","id": 136,"d1": [[2011,0.7457]],"d2": [[2011,-0.4884]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Vanegas Osorio, Albeiro","id": 137,"d1": [[2011,0.519]],"d2": [[2011,0.7744]],"color": [[2011,"PU","#fFA500"]]},{"name": "Vargas Vives, Victoria","id": 138,"d1": [[2011,-0.8167]],"d2": [[2011,0.5413]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Vasquez Bustama, Jaime Alonso","id": 139,"d1": [[2011,0.4807]],"d2": [[2011,-0.3668]],"color": [[2011,"PU","#fFA500"]]},{"name": "Vasquez Villanu, Silvio","id": 140,"d1": [[2011,-0.5184]],"d2": [[2011,-0.7071]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Velandia Sepulv, Orlando","id": 141,"d1": [[2011,-0.2269]],"d2": [[2011,0.4595]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Velasquez Jaram, Hugo Orlando","id": 142,"d1": [[2011,-1.106]],"d2": [[2011,0.4772]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Villadiego Vill, Sandra Elena","id": 143,"d1": [[2011,-0.3161]],"d2": [[2011,-1.0282]],"color": [[2011,"PU","#fFA500"]]},{"name": "Yepes Florez, Victor Raul","id": 144,"d1": [[2011,-0.2236]],"d2": [[2011,0.2071]],"color": [[2011,"PLC","#fe0000"]]},{"name": "Yepes Martinez, Jaime Armando","id": 145,"d1": [[2011,0.44]],"d2": [[2011,-0.2671]],"color": [[2011,"PU","#fFA500"]]},{"name": "Zabarain D Arce, Armando Antoni","id": 146,"d1": [[2011,-0.188]],"d2": [[2011,-0.4845]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Zambrano Erazo, Berner Leon","id": 147,"d1": [[2011,0.3551]],"d2": [[2011,-0.6458]],"color": [[2011,"PU","#fFA500"]]},{"name": "Zuluaga Diaz, Carlos Alberto","id": 148,"d1": [[2011,0.7115]],"d2": [[2011,0.114]],"color": [[2011,"PCC","#d2001d"]]},{"name": "Zuluaga Henao, Obed De Jesus","id": 149,"d1": [[2011,0.2266]],"d2": [[2011,0.4868]],"color": [[2011,"PCC","#d2001d"]]}]
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Colombia 2011</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="http://d3js.org/d3.v2.js?2.8.1"></script>
<link href="chart.css" rel="stylesheet" type="text/css" />
<style>
/* **for future */
#chart {
height: 406px;
}
</style>
<!-- js parameters -->
<script>
/*from http://stackoverflow.com/questions/2177548/load-json-into-variable */
var parameters = (function () {
var parameters = null;
$.ajax({
'async': false,
'global': false,
'url': "parameters.json",
'dataType': "json",
'success': function (data) {
parameters = data;
}
});
return parameters;
})();
</script>
</head>
<body>
<div data-role="page" id="mpage" class="type-home">
<div data-role="content">
<h1>Colombia 2011</h1>
<div class="chart-content">
<div class="main-column">
<p id="chart"><svg><defs id="gradients"></defs></svg></p>
<div id="slider-play">
<form id="slider-form">
<!--<label for="slider">Slider:</label>-->
<input name="slider" id="slider" min="2011" max="2011" value="2011" step=".01" type="range" />
</form>
<p id="play-button">
<a href="#" id="play" data-role="button" data-inline="true" data-icon="refresh" data-mini="true"><span id="playText">Play ></span></a>
</p>
</div> <!-- /slider-play -->
</div>
<div class="additional-column">
<form>
<fieldset data-role="controlgroup" data-mini="true">
<legend>Highlight:</legend>
<input class="checkbox-mp" name="checkbox-h-1" id="checkbox-h-1" type="checkbox">
<label for="checkbox-h-1">Acuña Diaz, Laureano Augus</label>
<input class="checkbox-mp" name="checkbox-h-2" id="checkbox-h-2" type="checkbox">
<label for="checkbox-h-2">Agudelo Zapata, Ivan Dario</label>
<input class="checkbox-mp" name="checkbox-h-3" id="checkbox-h-3" type="checkbox">
<label for="checkbox-h-3">Alvarez Montene, Javier Tato</label>
<input class="checkbox-mp" name="checkbox-h-4" id="checkbox-h-4" type="checkbox">
<label for="checkbox-h-4">Amaya Garcia, Claudia Marcel</label>
<input class="checkbox-mp" name="checkbox-h-5" id="checkbox-h-5" type="checkbox">
<label for="checkbox-h-5">Amaya Rodriguez, Carlos Andres</label>
<input class="checkbox-mp" name="checkbox-h-6" id="checkbox-h-6" type="checkbox">
<label for="checkbox-h-6">Amin Escaf, Miguel</label>
<input class="checkbox-mp" name="checkbox-h-7" id="checkbox-h-7" type="checkbox">
<label for="checkbox-h-7">Amin Saleme, Fabio Raul</label>
<input class="checkbox-mp" name="checkbox-h-8" id="checkbox-h-8" type="checkbox">
<label for="checkbox-h-8">Anaya Anaya, Monica Del Car</label>
<input class="checkbox-mp" name="checkbox-h-9" id="checkbox-h-9" type="checkbox">
<label for="checkbox-h-9">Arango Torres, Jair</label>
<input class="checkbox-mp" name="checkbox-h-10" id="checkbox-h-10" type="checkbox">
<label for="checkbox-h-10">Arcila Moncada, Henry Humberto</label>
<input class="checkbox-mp" name="checkbox-h-11" id="checkbox-h-11" type="checkbox">
<label for="checkbox-h-11">Arenas Prada, Miguel Jesus</label>
<input class="checkbox-mp" name="checkbox-h-12" id="checkbox-h-12" type="checkbox">
<label for="checkbox-h-12">Arias Castillo, Wilson Neber</label>
<input class="checkbox-mp" name="checkbox-h-13" id="checkbox-h-13" type="checkbox">
<label for="checkbox-h-13">Arrechea Bangue, Heriberto</label>
<input class="checkbox-mp" name="checkbox-h-14" id="checkbox-h-14" type="checkbox">
<label for="checkbox-h-14">Barguil Assis, David Alejandr</label>
<input class="checkbox-mp" name="checkbox-h-15" id="checkbox-h-15" type="checkbox">
<label for="checkbox-h-15">Barrera Gutierr, Luis Guillermo</label>
<input class="checkbox-mp" name="checkbox-h-16" id="checkbox-h-16" type="checkbox">
<label for="checkbox-h-16">Barrera Rueda, Lina Maria</label>
<input class="checkbox-mp" name="checkbox-h-17" id="checkbox-h-17" type="checkbox">
<label for="checkbox-h-17">Benavides Solar, Diela Liliana</label>
<input class="checkbox-mp" name="checkbox-h-18" id="checkbox-h-18" type="checkbox">
<label for="checkbox-h-18">Bermudez Sanche, Jose Ignacio</label>
<input class="checkbox-mp" name="checkbox-h-19" id="checkbox-h-19" type="checkbox">
<label for="checkbox-h-19">Betancourt Pere, Bayardo Gilber</label>
<input class="checkbox-mp" name="checkbox-h-20" id="checkbox-h-20" type="checkbox">
<label for="checkbox-h-20">Blanco Alvarez, German Alcides</label>
<input class="checkbox-mp" name="checkbox-h-21" id="checkbox-h-21" type="checkbox">
<label for="checkbox-h-21">Bocanegra Varon, Alfredo</label>
<input class="checkbox-mp" name="checkbox-h-22" id="checkbox-h-22" type="checkbox">
<label for="checkbox-h-22">Bonilla Soto, Carlos Julio</label>
<input class="checkbox-mp" name="checkbox-h-23" id="checkbox-h-23" type="checkbox">
<label for="checkbox-h-23">Bravo Realpe, Oscar Fernando</label>
<input class="checkbox-mp" name="checkbox-h-24" id="checkbox-h-24" type="checkbox">
<label for="checkbox-h-24">Burgos Ramirez, Didier</label>
<input class="checkbox-mp" name="checkbox-h-25" id="checkbox-h-25" type="checkbox">
<label for="checkbox-h-25">Cabrera Baez, Angel Custodio</label>
<input class="checkbox-mp" name="checkbox-h-26" id="checkbox-h-26" type="checkbox">
<label for="checkbox-h-26">Caicedo Sastoqu, Jose Edilberto</label>
<input class="checkbox-mp" name="checkbox-h-27" id="checkbox-h-27" type="checkbox">
<label for="checkbox-h-27">Camelo Ramos, Jose Joaquin</label>
<input class="checkbox-mp" name="checkbox-h-28" id="checkbox-h-28" type="checkbox">
<label for="checkbox-h-28">Cardenas Cardos, Hernando</label>
<input class="checkbox-mp" name="checkbox-h-29" id="checkbox-h-29" type="checkbox">
<label for="checkbox-h-29">Carebilla Cuell, Manuel Antonio</label>
<input class="checkbox-mp" name="checkbox-h-30" id="checkbox-h-30" type="checkbox">
<label for="checkbox-h-30">Castillo Garcia, Nancy Denise</label>
<input class="checkbox-mp" name="checkbox-h-31" id="checkbox-h-31" type="checkbox">
<label for="checkbox-h-31">Cepeda Castro, Ivan</label>
<input class="checkbox-mp" name="checkbox-h-32" id="checkbox-h-32" type="checkbox">
<label for="checkbox-h-32">Cervantes Varel, Jaime</label>
<input class="checkbox-mp" name="checkbox-h-33" id="checkbox-h-33" type="checkbox">
<label for="checkbox-h-33">Chacon Camargo, Alejandro Carl</label>
<input class="checkbox-mp" name="checkbox-h-34" id="checkbox-h-34" type="checkbox">
<label for="checkbox-h-34">Clavijo Clavijo, Orlando Alfons</label>
<input class="checkbox-mp" name="checkbox-h-35" id="checkbox-h-35" type="checkbox">
<label for="checkbox-h-35">Correa Mojica, Carlos Arturo</label>
<input class="checkbox-mp" name="checkbox-h-36" id="checkbox-h-36" type="checkbox">
<label for="checkbox-h-36">Crissien Borrer, Eduardo</label>
<input class="checkbox-mp" name="checkbox-h-37" id="checkbox-h-37" type="checkbox">
<label for="checkbox-h-37">Cuenca Chaux, Carlos Alberto</label>
<input class="checkbox-mp" name="checkbox-h-38" id="checkbox-h-38" type="checkbox">
<label for="checkbox-h-38">De La Peña Marq, Fernando</label>
<input class="checkbox-mp" name="checkbox-h-39" id="checkbox-h-39" type="checkbox">
<label for="checkbox-h-39">Deluque Zuleta, Alfredo Rafael</label>
<input class="checkbox-mp" name="checkbox-h-40" id="checkbox-h-40" type="checkbox">
<label for="checkbox-h-40">Diaz Granados A, Eduardo A.</label>
<input class="checkbox-mp" name="checkbox-h-41" id="checkbox-h-41" type="checkbox">
<label for="checkbox-h-41">Diaz Granados T, Luis Eduardo</label>
<input class="checkbox-mp" name="checkbox-h-42" id="checkbox-h-42" type="checkbox">
<label for="checkbox-h-42">Diaz Hernandez, Holger Horacio</label>
<input class="checkbox-mp" name="checkbox-h-43" id="checkbox-h-43" type="checkbox">
<label for="checkbox-h-43">Diaz Ortiz, Gloria Stella</label>
<input class="checkbox-mp" name="checkbox-h-44" id="checkbox-h-44" type="checkbox">
<label for="checkbox-h-44">Duque Naranjo, Yolanda</label>
<input class="checkbox-mp" name="checkbox-h-45" id="checkbox-h-45" type="checkbox">
<label for="checkbox-h-45">Dussan Lopez, Luis Enrique</label>
<input class="checkbox-mp" name="checkbox-h-46" id="checkbox-h-46" type="checkbox">
<label for="checkbox-h-46">Eljadue Gutierr, Issa</label>
<input class="checkbox-mp" name="checkbox-h-47" id="checkbox-h-47" type="checkbox">
<label for="checkbox-h-47">Escobar Cordoba, Carlos Alberto</label>
<input class="checkbox-mp" name="checkbox-h-48" id="checkbox-h-48" type="checkbox">
<label for="checkbox-h-48">Florez Asprilla, Jose Bernardo</label>
<input class="checkbox-mp" name="checkbox-h-49" id="checkbox-h-49" type="checkbox">
<label for="checkbox-h-49">Franco Castaño, Adriana</label>
<input class="checkbox-mp" name="checkbox-h-50" id="checkbox-h-50" type="checkbox">
<label for="checkbox-h-50">Gallardo Archbo, Julio Eugenio</label>
<input class="checkbox-mp" name="checkbox-h-51" id="checkbox-h-51" type="checkbox">
<label for="checkbox-h-51">Garcia Gomez, Juan Carlos</label>
<input class="checkbox-mp" name="checkbox-h-52" id="checkbox-h-52" type="checkbox">
<label for="checkbox-h-52">Garcia Tirado, William Ramon</label>
<input class="checkbox-mp" name="checkbox-h-53" id="checkbox-h-53" type="checkbox">
<label for="checkbox-h-53">Gaviria Muñoz, Simon</label>
<input class="checkbox-mp" name="checkbox-h-54" id="checkbox-h-54" type="checkbox">
<label for="checkbox-h-54">Giraldo Arboled, Atilano Alonso</label>
<input class="checkbox-mp" name="checkbox-h-55" id="checkbox-h-55" type="checkbox">
<label for="checkbox-h-55">Gnecco Zuleta, Jose Alfredo</label>
<input class="checkbox-mp" name="checkbox-h-56" id="checkbox-h-56" type="checkbox">
<label for="checkbox-h-56">Gomez Martinez, Miguel</label>
<input class="checkbox-mp" name="checkbox-h-57" id="checkbox-h-57" type="checkbox">
<label for="checkbox-h-57">Gomez Velasquez, Wilson Hernand</label>
<input class="checkbox-mp" name="checkbox-h-58" id="checkbox-h-58" type="checkbox">
<label for="checkbox-h-58">Gomez Villamiza, Jorge Eliecer</label>
<input class="checkbox-mp" name="checkbox-h-59" id="checkbox-h-59" type="checkbox">
<label for="checkbox-h-59">Gonzalez De Per, Consuelo</label>
<input class="checkbox-mp" name="checkbox-h-60" id="checkbox-h-60" type="checkbox">
<label for="checkbox-h-60">Henao Martinez, Oscar Humberto</label>
<input class="checkbox-mp" name="checkbox-h-61" id="checkbox-h-61" type="checkbox">
<label for="checkbox-h-61">Hernandez Mogol, Carlos Eduardo</label>
<input class="checkbox-mp" name="checkbox-h-62" id="checkbox-h-62" type="checkbox">
<label for="checkbox-h-62">Herrera Diaz, Roberto Jose</label>
<input class="checkbox-mp" name="checkbox-h-63" id="checkbox-h-63" type="checkbox">
<label for="checkbox-h-63">Hinestrosa Sine, Jairo</label>
<input class="checkbox-mp" name="checkbox-h-64" id="checkbox-h-64" type="checkbox">
<label for="checkbox-h-64">Housni Jaller, Jack</label>
<input class="checkbox-mp" name="checkbox-h-65" id="checkbox-h-65" type="checkbox">
<label for="checkbox-h-65">Jimenez Lopez, Carlos Abraham</label>
<input class="checkbox-mp" name="checkbox-h-66" id="checkbox-h-66" type="checkbox">
<label for="checkbox-h-66">Jimenez Paterni, Nicolas Antoni</label>
<input class="checkbox-mp" name="checkbox-h-67" id="checkbox-h-67" type="checkbox">
<label for="checkbox-h-67">Lemos Uribe, Juan Felipe</label>
<input class="checkbox-mp" name="checkbox-h-68" id="checkbox-h-68" type="checkbox">
<label for="checkbox-h-68">Leon Celis, Carlos Eduardo</label>
<input class="checkbox-mp" name="checkbox-h-69" id="checkbox-h-69" type="checkbox">
<label for="checkbox-h-69">Leon Leon, Buenaventura</label>
<input class="checkbox-mp" name="checkbox-h-70" id="checkbox-h-70" type="checkbox">
<label for="checkbox-h-70">Londoño Jaramil, Juana Carolina</label>
<input class="checkbox-mp" name="checkbox-h-71" id="checkbox-h-71" type="checkbox">
<label for="checkbox-h-71">Madrid Hodeg, Rafael Antonio</label>
<input class="checkbox-mp" name="checkbox-h-72" id="checkbox-h-72" type="checkbox">
<label for="checkbox-h-72">Marin, Oscar De Jesus</label>
<input class="checkbox-mp" name="checkbox-h-73" id="checkbox-h-73" type="checkbox">
<label for="checkbox-h-73">Marquez Guenzat, Mercedes E</label>
<input class="checkbox-mp" name="checkbox-h-74" id="checkbox-h-74" type="checkbox">
<label for="checkbox-h-74">Martinez Gutier, Juan Carlos</label>
<input class="checkbox-mp" name="checkbox-h-75" id="checkbox-h-75" type="checkbox">
<label for="checkbox-h-75">Martinez Rosale, Rosmery</label>
<input class="checkbox-mp" name="checkbox-h-76" id="checkbox-h-76" type="checkbox">
<label for="checkbox-h-76">Mendez Bechara, Raymundo Elias</label>
<input class="checkbox-mp" name="checkbox-h-77" id="checkbox-h-77" type="checkbox">
<label for="checkbox-h-77">Mesa Betancur, Jose Ignacio</label>
<input class="checkbox-mp" name="checkbox-h-78" id="checkbox-h-78" type="checkbox">
<label for="checkbox-h-78">Mesa Botero, Jorge Hernan</label>
<input class="checkbox-mp" name="checkbox-h-79" id="checkbox-h-79" type="checkbox">
<label for="checkbox-h-79">Molina Triana, Alfredo Guille</label>
<input class="checkbox-mp" name="checkbox-h-80" id="checkbox-h-80" type="checkbox">
<label for="checkbox-h-80">Moreno Bandeira, Victor Hugo</label>
<input class="checkbox-mp" name="checkbox-h-81" id="checkbox-h-81" type="checkbox">
<label for="checkbox-h-81">Muvdi Aranguena, Pedro Mary</label>
<input class="checkbox-mp" name="checkbox-h-82" id="checkbox-h-82" type="checkbox">
<label for="checkbox-h-82">Naranjo Escobar, Diego Alberto</label>
<input class="checkbox-mp" name="checkbox-h-83" id="checkbox-h-83" type="checkbox">
<label for="checkbox-h-83">Navas Talero, Carlos German</label>
<input class="checkbox-mp" name="checkbox-h-84" id="checkbox-h-84" type="checkbox">
<label for="checkbox-h-84">Ochoa Zuluaga, Luis Fernando</label>
<input class="checkbox-mp" name="checkbox-h-85" id="checkbox-h-85" type="checkbox">
<label for="checkbox-h-85">Orozco Vivas, Felipe Fabian</label>
<input class="checkbox-mp" name="checkbox-h-86" id="checkbox-h-86" type="checkbox">
<label for="checkbox-h-86">Ortega Samboni, Jairo</label>
<input class="checkbox-mp" name="checkbox-h-87" id="checkbox-h-87" type="checkbox">
<label for="checkbox-h-87">Ortiz Urueña, Roberto</label>
<input class="checkbox-mp" name="checkbox-h-88" id="checkbox-h-88" type="checkbox">
<label for="checkbox-h-88">Osorio Salgado, Nidia Marcela</label>
<input class="checkbox-mp" name="checkbox-h-89" id="checkbox-h-89" type="checkbox">
<label for="checkbox-h-89">Ospina Ospina, Elkin Rodolfo</label>
<input class="checkbox-mp" name="checkbox-h-90" id="checkbox-h-90" type="checkbox">
<label for="checkbox-h-90">Pacheco Alvarez, Alvaro</label>
<input class="checkbox-mp" name="checkbox-h-91" id="checkbox-h-91" type="checkbox">
<label for="checkbox-h-91">Padaui Alvarez, Hernando Jose</label>
<input class="checkbox-mp" name="checkbox-h-92" id="checkbox-h-92" type="checkbox">
<label for="checkbox-h-92">Patiño Amariles, Diego</label>
<input class="checkbox-mp" name="checkbox-h-93" id="checkbox-h-93" type="checkbox">
<label for="checkbox-h-93">Pedraza Ortega, Telesforo</label>
<input class="checkbox-mp" name="checkbox-h-94" id="checkbox-h-94" type="checkbox">
<label for="checkbox-h-94">Penagos Giraldo, Hernan</label>
<input class="checkbox-mp" name="checkbox-h-95" id="checkbox-h-95" type="checkbox">
<label for="checkbox-h-95">Pereira Caballe, Pedrito Tomas</label>
<input class="checkbox-mp" name="checkbox-h-96" id="checkbox-h-96" type="checkbox">
<label for="checkbox-h-96">Perez Santos, Eduardo Enriqu</label>
<input class="checkbox-mp" name="checkbox-h-97" id="checkbox-h-97" type="checkbox">
<label for="checkbox-h-97">Perez Suarez, Jose Rodolfo</label>
<input class="checkbox-mp" name="checkbox-h-98" id="checkbox-h-98" type="checkbox">
<label for="checkbox-h-98">Pinilla Pedraza, Alba Luz</label>
<input class="checkbox-mp" name="checkbox-h-99" id="checkbox-h-99" type="checkbox">
<label for="checkbox-h-99">Posada Sanchez, Augusto</label>
<input class="checkbox-mp" name="checkbox-h-100" id="checkbox-h-100" type="checkbox">
<label for="checkbox-h-100">Prada Gil, Hernando Alfon</label>
<input class="checkbox-mp" name="checkbox-h-101" id="checkbox-h-101" type="checkbox">
<label for="checkbox-h-101">Puentes Diaz, Gustavo Hernan</label>
<input class="checkbox-mp" name="checkbox-h-102" id="checkbox-h-102" type="checkbox">
<label for="checkbox-h-102">Quintero Trujil, Jairo</label>
<input class="checkbox-mp" name="checkbox-h-103" id="checkbox-h-103" type="checkbox">
<label for="checkbox-h-103">Raad Hernandez, Elias</label>
<input class="checkbox-mp" name="checkbox-h-104" id="checkbox-h-104" type="checkbox">
<label for="checkbox-h-104">Ramirez Orrego, Marta Cecilia</label>
<input class="checkbox-mp" name="checkbox-h-105" id="checkbox-h-105" type="checkbox">
<label for="checkbox-h-105">Ramirez Valenci, Leon Dario</label>
<input class="checkbox-mp" name="checkbox-h-106" id="checkbox-h-106" type="checkbox">
<label for="checkbox-h-106">Rengifo Santiba, Adolfo Leon</label>
<input class="checkbox-mp" name="checkbox-h-107" id="checkbox-h-107" type="checkbox">
<label for="checkbox-h-107">Rincon Espinel, Mercedes</label>
<input class="checkbox-mp" name="checkbox-h-108" id="checkbox-h-108" type="checkbox">
<label for="checkbox-h-108">Rivera Florez, Guillermo Abel</label>
<input class="checkbox-mp" name="checkbox-h-109" id="checkbox-h-109" type="checkbox">
<label for="checkbox-h-109">Roa Sarmiento, Humphrey</label>
<input class="checkbox-mp" name="checkbox-h-110" id="checkbox-h-110" type="checkbox">
<label for="checkbox-h-110">Robledo Gomez, Angela Maria</label>
<input class="checkbox-mp" name="checkbox-h-111" id="checkbox-h-111" type="checkbox">
<label for="checkbox-h-111">Rodriguez Calvo, Constantino</label>
<input class="checkbox-mp" name="checkbox-h-112" id="checkbox-h-112" type="checkbox">
<label for="checkbox-h-112">Rodriguez Contr, Jaime</label>
<input class="checkbox-mp" name="checkbox-h-113" id="checkbox-h-113" type="checkbox">
<label for="checkbox-h-113">Rodriguez Gongo, Ruben Dario</label>
<input class="checkbox-mp" name="checkbox-h-114" id="checkbox-h-114" type="checkbox">
<label for="checkbox-h-114">Rodriguez Pinzo, Ciro Antonio</label>
<input class="checkbox-mp" name="checkbox-h-115" id="checkbox-h-115" type="checkbox">
<label for="checkbox-h-115">Rodriguez Rengi, Roosvelt</label>
<input class="checkbox-mp" name="checkbox-h-116" id="checkbox-h-116" type="checkbox">
<label for="checkbox-h-116">Rojas Ortiz, Carlos Augusto</label>
<input class="checkbox-mp" name="checkbox-h-117" id="checkbox-h-117" type="checkbox">
<label for="checkbox-h-117">Roldan Avendaño, John Jairo</label>
<input class="checkbox-mp" name="checkbox-h-118" id="checkbox-h-118" type="checkbox">
<label for="checkbox-h-118">Romero Piñeros, Rafael</label>
<input class="checkbox-mp" name="checkbox-h-119" id="checkbox-h-119" type="checkbox">
<label for="checkbox-h-119">Rozo Rodriguez, Jorge Enrique</label>
<input class="checkbox-mp" name="checkbox-h-120" id="checkbox-h-120" type="checkbox">
<label for="checkbox-h-120">Salamanca Corte, Pablo Enrique</label>
<input class="checkbox-mp" name="checkbox-h-121" id="checkbox-h-121" type="checkbox">
<label for="checkbox-h-121">Salas Moises, Luis Enrique</label>
<input class="checkbox-mp" name="checkbox-h-122" id="checkbox-h-122" type="checkbox">
<label for="checkbox-h-122">Salazar Uribe, Juan Carlos</label>
<input class="checkbox-mp" name="checkbox-h-123" id="checkbox-h-123" type="checkbox">
<label for="checkbox-h-123">Sanabria Astudi, Heriberto</label>
<input class="checkbox-mp" name="checkbox-h-124" id="checkbox-h-124" type="checkbox">
<label for="checkbox-h-124">Sanchez Franco, Juan Carlos</label>
<input class="checkbox-mp" name="checkbox-h-125" id="checkbox-h-125" type="checkbox">
<label for="checkbox-h-125">Sandoval Perill, Ivan Dario</label>
<input class="checkbox-mp" name="checkbox-h-126" id="checkbox-h-126" type="checkbox">
<label for="checkbox-h-126">Sarria Villa, Esmeralda</label>
<input class="checkbox-mp" name="checkbox-h-127" id="checkbox-h-127" type="checkbox">
<label for="checkbox-h-127">Serrano Morales, Luis Antonio</label>
<input class="checkbox-mp" name="checkbox-h-128" id="checkbox-h-128" type="checkbox">
<label for="checkbox-h-128">Sierra Leon, Pablo A</label>
<input class="checkbox-mp" name="checkbox-h-129" id="checkbox-h-129" type="checkbox">
<label for="checkbox-h-129">Sierra Palacio, Jimmy Javier</label>
<input class="checkbox-mp" name="checkbox-h-130" id="checkbox-h-130" type="checkbox">
<label for="checkbox-h-130">Suarez Florez, Mario</label>
<input class="checkbox-mp" name="checkbox-h-131" id="checkbox-h-131" type="checkbox">
<label for="checkbox-h-131">Taborda Castro, Libardo Antoni</label>
<input class="checkbox-mp" name="checkbox-h-132" id="checkbox-h-132" type="checkbox">
<label for="checkbox-h-132">Tamayo Tamayo, Gerardo</label>
<input class="checkbox-mp" name="checkbox-h-133" id="checkbox-h-133" type="checkbox">
<label for="checkbox-h-133">Tavera Amado, Didier Alberto</label>
<input class="checkbox-mp" name="checkbox-h-134" id="checkbox-h-134" type="checkbox">
<label for="checkbox-h-134">Torres Monsalvo, Efrain Antonio</label>
<input class="checkbox-mp" name="checkbox-h-135" id="checkbox-h-135" type="checkbox">
<label for="checkbox-h-135">Valdes Barcha, Juan Manuel</label>
<input class="checkbox-mp" name="checkbox-h-136" id="checkbox-h-136" type="checkbox">
<label for="checkbox-h-136">Valencia Girald, Noel Ricardo</label>
<input class="checkbox-mp" name="checkbox-h-137" id="checkbox-h-137" type="checkbox">
<label for="checkbox-h-137">Vanegas Osorio, Albeiro</label>
<input class="checkbox-mp" name="checkbox-h-138" id="checkbox-h-138" type="checkbox">
<label for="checkbox-h-138">Vargas Vives, Victoria</label>
<input class="checkbox-mp" name="checkbox-h-139" id="checkbox-h-139" type="checkbox">
<label for="checkbox-h-139">Vasquez Bustama, Jaime Alonso</label>
<input class="checkbox-mp" name="checkbox-h-140" id="checkbox-h-140" type="checkbox">
<label for="checkbox-h-140">Vasquez Villanu, Silvio</label>
<input class="checkbox-mp" name="checkbox-h-141" id="checkbox-h-141" type="checkbox">
<label for="checkbox-h-141">Velandia Sepulv, Orlando</label>
<input class="checkbox-mp" name="checkbox-h-142" id="checkbox-h-142" type="checkbox">
<label for="checkbox-h-142">Velasquez Jaram, Hugo Orlando</label>
<input class="checkbox-mp" name="checkbox-h-143" id="checkbox-h-143" type="checkbox">
<label for="checkbox-h-143">Villadiego Vill, Sandra Elena</label>
<input class="checkbox-mp" name="checkbox-h-144" id="checkbox-h-144" type="checkbox">
<label for="checkbox-h-144">Yepes Florez, Victor Raul</label>
<input class="checkbox-mp" name="checkbox-h-145" id="checkbox-h-145" type="checkbox">
<label for="checkbox-h-145">Yepes Martinez, Jaime Armando</label>
<input class="checkbox-mp" name="checkbox-h-146" id="checkbox-h-146" type="checkbox">
<label for="checkbox-h-146">Zabarain D Arce, Armando Antoni</label>
<input class="checkbox-mp" name="checkbox-h-147" id="checkbox-h-147" type="checkbox">
<label for="checkbox-h-147">Zambrano Erazo, Berner Leon</label>
<input class="checkbox-mp" name="checkbox-h-148" id="checkbox-h-148" type="checkbox">
<label for="checkbox-h-148">Zuluaga Diaz, Carlos Alberto</label>
<input class="checkbox-mp" name="checkbox-h-149" id="checkbox-h-149" type="checkbox">
<label for="checkbox-h-149">Zuluaga Henao, Obed De Jesus</label>
</fieldset>
</form>
</div> <!-- /additional-column -->
</div> <!-- /chart-content -->
<div class="description">
</div>
<script src="motion.js"></script>
</div> <!-- /content -->
</div><!-- /page -->
</body>
</html>
Raw
motion.js
// Various accessors that specify the four dimensions of data to visualize.
function x(d) { return d.d1; }
function y(d) { return d.d2; }
function z(d) { return d.d3; }
function radius(d) {
/*if (("#"+d.id).length > 0) {
return 2;
} else */
return 1;
}
function color(d) { return d.color; }
function mid(d) { return d.id; }
function key(d) { return d.id; }
function display(d) { return d.display;}
function mname(d) {return d.name;}
// Chart dimensions.
var margin = {top: 19.5, right: 19.5, bottom: 19.5, left: 39.5},
width = parameters.width - margin.right,
height = parameters.height - margin.top - margin.bottom;
// Various scales. These domains make assumptions of data, naturally.
var xScale = d3.scale.linear().domain([parameters.xscale[0], parameters.xscale[1]]).range([0, width]),
yScale = d3.scale.linear().domain([parameters.yscale[0], parameters.yscale[1]]).range([height, 0]),
radiusScale = d3.scale.sqrt().domain([0, 1]).range([0, 10]);
//colorScale = d3.scale.category10();
var colorScale = d3.scale.category20c();
// The x & y axes.
var xAxis = d3.svg.axis().orient("bottom").scale(xScale).ticks(12, d3.format(",d")),
yAxis = d3.svg.axis().scale(yScale).orient("left");
// Create the SVG container and set the origin.
var svg = d3.select("#chart 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 + ")");
// Add the x-axis.
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the y-axis.
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
// Add an x-axis label.
svg.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", width)
.attr("y", height - 6)
.text("Dimension 1");
// Add a y-axis label.
svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("y", 6)
.attr("dy", ".75em")
.attr("transform", "rotate(-90)")
.text("Dimension 2");
// Add the year label; the value is set on transition.
tmp_month = Math.ceil((parameters.start - Math.floor(parameters.start))*12);
tmp_year = Math.floor(parameters.start) + '/' + tmp_month;
var label = svg.append("text")
.attr("class", "year label")
.attr("text-anchor", "end")
.attr("y", height - 24)
.attr("x", width)
.text(tmp_year);
var formatTime = d3.time.format("%e %B");
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// Load the data.
d3.json(parameters.data, function(nations) {
// A bisector since many nation's data is sparsely-defined.
var bisect = d3.bisector(function(d) { return d[0]; });
// Add a dot per nation. Initialize the data at 1800, and set the colors.
var dot = svg.append("g")
.attr("class", "dots")
.selectAll(".dot")
.data(interpolateData(parameters.start)) //here we set up the dots at the beggining
.enter().append("circle")
.attr("class", "dot")
//.attr("id",function(d) {return "dot-"+key(d)}) //wrong!, shall be in position() and interpolateData
.call(position)
.call(checkCheckboxes)
.sort(order)
.on("mouseover", showTooltip)
.on("mouseout", hideTooltip)
.on("mousedown", switchHighlight);
/*FF keeps the checkboxes on reload, so we need to check them at the beginning*/
function checkCheckboxes() {
$(".checkbox-mp").each(function(i) {
a = $(this).attr('id').split('-');
id = a[a.length-1];
if ($('#checkbox-h-'+id).prop('checked'))
highlight($('#dot-'+id));
});
}
//switch highligth
function switchHighlight(d) {
a = d.id.split('-');
id = a[a.length-1];
if ($('#'+d.id).attr("class") == 'dot') {
highlight($('#'+d.id));
$("input#checkbox-h-"+id).attr("checked",true).checkboxradio("refresh");
} else {
dehighlight($('#'+d.id));
$("input#checkbox-h-"+id).attr("checked",false).checkboxradio("refresh");
}
}
// show/hide tooltip
function showTooltip(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(d.name + "<br/>" + d.group)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
}
function hideTooltip(d) {
div.transition()
.duration(500)
.style("opacity", 0)
}
var i=0;
var playing = false;
$("#play").click(function() {
if(playing === false) {
startPlaying();
} else {
stopPlaying();
}
});
function startPlaying() {
playing = true;
$("#playText").html("Stop ||");
$('#slider').slider('disable');
// Start a transition that interpolates the data based on year.
svg.transition()
.duration(30000*(parameters.untilchart-parseFloat($('#slider').val()))/(parameters.untilchart-parameters.sincechart+0.0001))
.ease("linear")
.tween("year", function() {return tweenYear($('#slider').val()) })
.each("end", stopPlaying);
}
function stopPlaying() {
playing = false;
$("#playText").html("Play >");
svg.transition().duration(0);
$('#slider').slider('enable');
}
// Positions the dots based on data.
function position(dot) {
dot .attr("cx", function(d) { return xScale(x(d)); })
.attr("cy", function(d) { return yScale(y(d)); })
.attr("r", function(d) { return radiusScale(radius(d)) })
.attr("id", function(d) {return mid(d);})
.style("fill", function (d) { return gradient(color(d)) })
.attr("display", function (d) { return display(d);})
.attr("title", function (d) {return mname(d);});
}
// Defines a sort order so that the smallest dots are drawn on top.
function order(a, b) {
return radius(b) - radius(a);
}
// Tweens the entire chart by first tweening the year, and then the data.
// For the interpolated data, the dots and label are redrawn.
function tweenYear(start) {
//if ((parseFloat(start)+0.01) >= parameters.untilchart) start=parameters.sincechart;
var year = d3.interpolateNumber(parseFloat(start),parameters.untilchart);
return function(t) { displayYear(year(t)); };
}
// Updates the display to show the specified year.
function displayYear(year) {
dot.data(interpolateData(year), key).call(position).sort(order);
month = Math.ceil((year - Math.floor(year))*12);
label.text(Math.floor(year) + '/' + month);
i++;
if ((i%25) == 0) { //to prevent jumping and for speed of animation -> "25"
$("#slider").val(year);
$('#slider').slider('refresh');
}
}
// Interpolates the dataset for the given (fractional) year.
function interpolateData(year) {
return nations.map(function(d) {
return {
name: d.name,
id: "dot-"+d.id,
d1: interpolateValues(d.d1, year),
d2: interpolateValues(d.d2, year),
color: findColor(d.color, year, true),
display: isDisplayed(d.d1, year),
title: d.name,
group: findColor(d.color, year, false)
};
});
}
// Finds (and possibly interpolates) the value for the specified year.
function interpolateValues(values, year) {
var i = bisect.left(values, year, 0, values.length - 1),
a = values[i];
if (i > 0) {
var b = values[i - 1],
t = (year - a[0]) / (b[0] - a[0]);
return a[1] * (1 - t) + b[1] * t;
}
return a[1];
}
function findColor(values, year, color) {
var i = bisect.left(values, year, 0, values.length - 1);
if (color)
return values[i][2];
else
return values[i][1];
}
function isDisplayed(values, year) {
if ( (year < values[0][0]) || (year > values[values.length - 1][0]))
return 'none';
else
return 'inherit';
}
function highlight(d) {
d.attr("class","dot highlighted");
//d.addClass("highlight"); we cannot use this, because http://bugs.jquery.com/ticket/10329
}
function dehighlight(d) {
d.attr('class','dot');
//d.removeClass("highlight"); we cannot use this, because http://bugs.jquery.com/ticket/10329
}
//checkboxes
$('.checkbox-mp').click (function () {
var thisCheck = $(this);
a = $(this).attr('id').split('-');
id = a[a.length-1];
if (thisCheck.is (':checked')) {
highlight($("#dot-"+id));
} else {
dehighlight($("#dot-"+id));
}
});
//slider
//see http://michalskop.tumblr.com/post/37352195911/strange-behaviour-of-jquery-change
$('#slider').ready(function() {
$('#slider').change(function(){
displayYear($(this).val());
});
});
//color gradients
//http://dexvis.wordpress.com/2012/12/25/motion-charts-revisited/
function shadeColor(color, percent) {
var R = parseInt(color.substring(1,3),16)
var G = parseInt(color.substring(3,5),16)
var B = parseInt(color.substring(5,7),16);
R = parseInt(R * (100 + percent) / 100);
G = parseInt(G * (100 + percent) / 100);
B = parseInt(B * (100 + percent) / 100);
R = (R<255)?R:255;
G = (G<255)?G:255;
B = (B<255)?B:255;
var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));
return "#"+RR+GG+BB;
}
function gradient(baseColor)
{
var gradientId = "gradient" + baseColor.substring(1)
console.log("COLOR: " + gradientId);
//var lightColor = shadeColor(baseColor, -10)
var darkColor = shadeColor(baseColor, -20)
var grad = d3.select("#gradients").selectAll("#" + gradientId)
.data([ gradientId ])
.enter()
.append("radialGradient")
.attr("id", gradientId)
.attr("gradientUnits", "objectBoundingBox")
.attr("fx", "30%")
.attr("fy", "30%")
grad.append("stop")
.attr("offset", "0%")
.attr("style", "stop-color:#FFFFFF")
// Middle
grad.append("stop")
.attr("offset", "40%")
.attr("style", "stop-color:" + baseColor)
// Outer Edges
grad.append("stop")
.attr("offset", "100%")
.attr("style", "stop-color:" + darkColor)
console.log("url(#" + gradientId + ")")
return "url(#" + gradientId + ")";
}
});
Raw
parameters.json
{"width":600,
"height":400,
"xscale":[-2,2],
"yscale":[-2,2],
"data":"co_camara_1y.json",
"start":2011,
"sincechart":2011,
"untilchart":2011
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment