Skip to content

Instantly share code, notes, and snippets.

@fdaudens

fdaudens/2011_participation.csv

Last active August 29, 2015 14:18
Show Gist options
  • Save fdaudens/f94c4bc655fcb306d564 to your computer and use it in GitHub Desktop.
Save fdaudens/f94c4bc655fcb306d564 to your computer and use it in GitHub Desktop.
Download ZIP
Résultats 2011
Raw
2011_participation.csv
province circonscription numeroCirconscription population electeurs tauxParticipation
Alberta Calgary--Nose Hill 48005 130942 101910 56.6
Alberta Calgary-Centre 48006 124197 89536 55.3
Alberta Calgary-Centre-Nord 48003 114615 84609 59.7
Alberta Calgary-Est 48002 110479 75850 45.9
Alberta Calgary-Nord-Est 48004 129015 87307 47.8
Alberta Calgary-Ouest 48009 132162 103812 62.3
Alberta Calgary-Sud-Est 48007 125738 106439 59.5
Alberta Calgary-Sud-Ouest 48008 120750 95026 60.4
Alberta Crowfoot 48010 114825 88881 59.2
Alberta Edmonton--Leduc 48014 116986 101532 58.7
Alberta Edmonton--Mill Woods--Beaumont 48011 112919 86529 53
Alberta Edmonton--Sherwood Park 48016 118073 94602 58.4
Alberta Edmonton--Spruce Grove 48017 128945 105599 55.8
Alberta Edmonton--St. Albert 48015 126447 97504 55.9
Alberta Edmonton--Strathcona 48018 99267 73444 66.5
Alberta Edmonton-Centre 48012 120326 86408 57.2
Alberta Edmonton-Est 48013 128199 92507 49.6
Alberta Fort McMurray--Athabasca 48001 100805 76298 40.3
Alberta Lethbridge 48019 113531 90036 53.7
Alberta Macleod 48020 107638 85720 60.4
Alberta Medicine Hat 48021 113085 82599 52.1
Alberta Peace River 48022 138009 98135 49
Alberta Red Deer 48023 124063 93723 53.5
Alberta Vegreville--Wainwright 48024 111427 83790 58.7
Alberta Westlock--St. Paul 48025 101010 76291 55.2
Alberta Wetaskiwin 48026 107914 80262 57.9
Alberta Wild Rose 48027 115872 95631 61.2
Alberta Yellowhead 48028 103111 75410 55.1
Colombie-Britannique Abbotsford 59001 124515 85143 59
Colombie-Britannique Burnaby--Douglas 59002 112119 84911 57.6
Colombie-Britannique Burnaby--New Westminster 59003 118713 84271 53.3
Colombie-Britannique Cariboo--Prince George 59004 106382 76216 57.3
Colombie-Britannique Chilliwack--Fraser Canyon 59005 112118 84930 58.1
Colombie-Britannique Colombie-Britannique-Southern Interior 59026 95477 75751 65.6
Colombie-Britannique Delta--Richmond-Est 59006 106103 80821 59.7
Colombie-Britannique Esquimalt--Juan de Fuca 59008 120669 98477 65.2
Colombie-Britannique Fleetwood--Port Kells 59009 123243 95797 52.9
Colombie-Britannique Île de Vancouver-Nord 59031 113356 90374 65.5
Colombie-Britannique Kamloops--Thompson--Cariboo 59010 114675 90855 62.7
Colombie-Britannique Kelowna--Lake Country 59011 122214 100884 59.8
Colombie-Britannique Kootenay--Columbia 59012 86811 67663 63.4
Colombie-Britannique Langley 59013 117858 90225 61.3
Colombie-Britannique Nanaimo--Alberni 59014 121434 98657 66.7
Colombie-Britannique Nanaimo--Cowichan 59015 125149 99872 64.2
Colombie-Britannique New Westminster--Coquitlam 59017 111231 84337 59.6
Colombie-Britannique Newton--Delta-Nord 59016 118649 75535 61.4
Colombie-Britannique North Vancouver 59019 122371 89416 66.9
Colombie-Britannique Okanagan--Coquihalla 59020 107316 86195 61.9
Colombie-Britannique Okanagan--Shuswap 59018 116236 91762 61.9
Colombie-Britannique Pitt Meadows--Maple Ridge--Mission 59007 120662 89613 59.3
Colombie-Britannique Port Moody--Westwood--Port Coquitlam 59021 116563 86190 56.5
Colombie-Britannique Prince George--Peace River 59022 105865 72580 53.3
Colombie-Britannique Richmond 59023 114137 85643 50.5
Colombie-Britannique Saanich--Gulf Islands 59024 115724 93380 73.9
Colombie-Britannique Skeena--Bulkley Valley 59025 91926 61043 57.7
Colombie-Britannique Surrey-Nord 59028 111960 72145 51.6
Colombie-Britannique Surrey-Sud--White Rock--Cloverdale 59027 111756 91485 64.3
Colombie-Britannique Vancouver Kingsway 59032 119815 82619 57.1
Colombie-Britannique Vancouver Quadra 59033 119627 87224 62.4
Colombie-Britannique Vancouver-Centre 59029 123701 102201 57.7
Colombie-Britannique Vancouver-Est 59030 106816 81801 54.4
Colombie-Britannique Vancouver-Sud 59034 120284 82509 54.9
Colombie-Britannique Victoria 59035 108771 89750 67.5
Colombie-Britannique West Vancouver--Sunshine Coast--Sea to Sky Country 59036 129241 99642 63.3
Île-du-Prince-Édouard Cardigan 11001 35067 27581 77
Île-du-Prince-Édouard Charlottetown 11002 32174 26760 69.4
Île-du-Prince-Édouard Egmont 11003 34814 27197 71
Île-du-Prince-Édouard Malpeque 11004 33796 26918 75.7
Manitoba Brandon--Souris 46001 84602 61289 57.5
Manitoba Charleswood--St. James--Assiniboia 46002 81469 62609 64.8
Manitoba Churchill 46003 75232 46068 43.8
Manitoba Dauphin--Swan River--Marquette 46004 75103 53701 54.9
Manitoba Elmwood--Transcona 46005 78700 59154 55.9
Manitoba Kildonan--St. Paul 46006 81532 63866 61.3
Manitoba Portage--Lisgar 46007 85653 59799 59.4
Manitoba Provencher 46008 87737 64104 61.7
Manitoba Saint-Boniface 46009 84473 65604 66.2
Manitoba Selkirk--Interlake 46010 90807 66370 62.3
Manitoba Winnipeg-Centre 46011 81017 54364 48.2
Manitoba Winnipeg-Centre-Sud 46014 78286 58075 69
Manitoba Winnipeg-Nord 46012 79366 51894 49.3
Manitoba Winnipeg-Sud 46013 84424 64144 68.4
Nouveau-Brunswick Acadie--Bathurst 13001 78948 66298 70.3
Nouveau-Brunswick Beauséjour 13002 76259 63267 71.2
Nouveau-Brunswick Fredericton 13003 85886 69732 64.2
Nouveau-Brunswick Fundy Royal 13004 69471 56795 64.6
Nouveau-Brunswick Madawaska--Restigouche 13005 62593 50966 69.8
Nouveau-Brunswick Miramichi 13006 53844 43547 71.4
Nouveau-Brunswick Moncton--Riverview--Dieppe 13007 89334 75298 65.2
Nouveau-Brunswick Nouveau-Brunswick-Sud-Ouest 13008 63232 49578 64.7
Nouveau-Brunswick Saint John 13009 82078 64264 58
Nouveau-Brunswick Tobique--Mactaquac 13010 68352 53073 63.9
Nouvelle-Écosse Cape Breton--Canso 12001 71968 57331 62.5
Nouvelle-Écosse Cumberland--Colchester--Musquodoboit Valley 12007 87895 69188 58.3
Nouvelle-Écosse Dartmouth--Cole Harbour 12003 87886 70756 61.4
Nouvelle-Écosse Halifax 12004 89448 73357 63
Nouvelle-Écosse Halifax-Ouest 12005 88756 72862 62.3
Nouvelle-Écosse Kings--Hants 12006 81531 65355 61.8
Nouvelle-Écosse Nova-Centre 12002 72966 57963 66
Nouvelle-Écosse Nova-Ouest 12011 86393 67938 63.7
Nouvelle-Écosse Sackville--Eastern Shore 12008 86963 70329 59.5
Nouvelle-Écosse South Shore--St. Margaret's 12009 82855 67296 62.2
Nouvelle-Écosse Sydney--Victoria 12010 76801 60719 61.5
Nunavut Nunavut 62001 29474 17349 45.7
Ontario Ajax--Pickering 35001 117183 93565 60.3
Ontario Algoma--Manitoulin--Kapuskasing 35002 77961 58857 61.9
Ontario Ancaster--Dundas--Flamborough--Westdale 35003 111844 86382 68.5
Ontario Barrie 35004 128430 94939 59.9
Ontario Beaches--East York 35005 104831 73302 66.7
Ontario Bramalea--Gore--Malton 35006 152698 108751 53.6
Ontario Brampton--Springdale 35007 131797 89017 57.7
Ontario Brampton-Ouest 35008 170422 117926 54
Ontario Brant 35009 125136 95508 60.3
Ontario Bruce--Grey--Owen Sound 35026 105947 79977 64.1
Ontario Burlington 35010 118310 91716 66.5
Ontario Cambridge 35011 129434 94591 58.5
Ontario Carleton--Mississippi Mills 35012 128915 107407 71.7
Ontario Chatham-Kent--Essex 35013 109484 74231 58.8
Ontario Davenport 35015 104615 66731 59.2
Ontario Don Valley-Est 35016 109640 69690 56.6
Ontario Don Valley-Ouest 35017 117083 82107 65.4
Ontario Dufferin--Caledon 35018 111486 81155 60.1
Ontario Durham 35014 118500 92470 63.2
Ontario Eglinton--Lawrence 35019 110066 73522 66.2
Ontario Elgin--Middlesex--London 35020 110028 81661 62.2
Ontario Essex 35021 123872 90421 58.5
Ontario Etobicoke--Lakeshore 35023 114641 87188 62.8
Ontario Etobicoke-Centre 35022 111349 81765 64.6
Ontario Etobicoke-Nord 35024 108501 63014 51.6
Ontario Glengarry--Prescott--Russell 35025 104309 85413 67.9
Ontario Guelph 35027 114943 91316 64.9
Ontario Haldimand--Norfolk 35028 107775 80640 62.8
Ontario Haliburton--Kawartha Lakes--Brock 35029 119141 93250 63
Ontario Halton 35030 151943 131924 61.7
Ontario Hamilton Mountain 35033 122729 89312 61.1
Ontario Hamilton-Centre 35031 117509 78562 53.6
Ontario Hamilton-Est--Stoney Creek 35032 116434 85710 57.1
Ontario Huron--Bruce 35034 104313 78695 68
Ontario Kenora 35035 64291 42036 58.8
Ontario Kingston et les Îles 35036 119069 96049 63.4
Ontario Kitchener--Conestoga 35038 114405 88766 60.4
Ontario Kitchener--Waterloo 35039 126742 95966 69.2
Ontario Kitchener-Centre 35037 107540 80480 62.1
Ontario Lambton--Kent--Middlesex 35046 107635 79754 64.5
Ontario Lanark--Frontenac--Lennox and Addington 35040 117389 91463 64.6
Ontario Leeds--Grenville 35041 99206 76802 64.4
Ontario London--Fanshawe 35042 107218 75138 57
Ontario London-Centre-Nord 35043 115250 88478 59.8
Ontario London-Ouest 35044 118335 93915 66.5
Ontario Markham--Unionville 35045 127191 92638 54.2
Ontario Mississauga--Brampton-Sud 35047 136470 94531 56.3
Ontario Mississauga--Erindale 35049 143361 105430 60.4
Ontario Mississauga--Streetsville 35051 130033 87480 57.8
Ontario Mississauga-Est--Cooksville 35048 126642 85018 55.7
Ontario Mississauga-Sud 35050 110932 78551 63.2
Ontario Nepean--Carleton 35052 133245 112535 71.2
Ontario Newmarket--Aurora 35053 121924 92731 63
Ontario Niagara Falls 35054 126696 96176 56.4
Ontario Niagara-Ouest--Glanbrook 35055 111024 89763 65.8
Ontario Nickel Belt 35056 89377 72280 62.1
Ontario Nipissing--Timiskaming 35057 90963 70754 60.1
Ontario Northumberland--Quinte West 35058 123706 96154 63.7
Ontario Oak Ridges--Markham 35059 169642 153972 59
Ontario Oakville 35060 113714 85920 68
Ontario Oshawa 35061 116881 89635 56.8
Ontario Ottawa--Orléans 35063 109950 89802 71.7
Ontario Ottawa--Vanier 35065 101611 79309 66.5
Ontario Ottawa-Centre 35062 109336 90008 72.4
Ontario Ottawa-Ouest--Nepean 35066 109735 82874 68.4
Ontario Ottawa-Sud 35064 117581 87399 67.8
Ontario Oxford 35067 102756 77035 61.9
Ontario Parkdale--High Park 35068 102142 74463 68.7
Ontario Parry Sound--Muskoka 35069 90281 71477 65.1
Ontario Perth--Wellington 35070 103874 73391 63.5
Ontario Peterborough 35071 116626 91709 64.7
Ontario Pickering--Scarborough-Est 35072 106602 78501 61.2
Ontario Prince Edward--Hastings 35073 113227 89208 61.4
Ontario Renfrew--Nipissing--Pembroke 35074 98803 78307 65.8
Ontario Richmond Hill 35075 122614 90924 55.2
Ontario Sarnia--Lambton 35078 105360 79688 62.6
Ontario Sault Ste. Marie 35079 89028 69259 64.2
Ontario Scarborough--Agincourt 35080 111867 73205 56
Ontario Scarborough--Guildwood 35082 108813 67728 56.8
Ontario Scarborough--Rouge River 35083 130974 85183 55
Ontario Scarborough-Centre 35081 108010 70274 54.3
Ontario Scarborough-Sud-Ouest 35084 102196 69389 58.4
Ontario Simcoe--Grey 35085 125985 99354 65.1
Ontario Simcoe-Nord 35086 119400 90779 64.1
Ontario St. Catharines 35076 112869 83475 60.5
Ontario St. Paul's 35077 111131 83367 66.5
Ontario Stormont--Dundas--South Glengarry 35087 99764 76915 62.1
Ontario Sudbury 35088 92161 72019 63.3
Ontario Thornhill 35089 131978 99867 60
Ontario Thunder Bay--Rainy River 35090 85153 62765 59.4
Ontario Thunder Bay--Superior-Nord 35091 82589 61546 59.9
Ontario Timmins--Baie James 35092 80791 60095 55.6
Ontario Toronto--Danforth 35094 103655 74409 65
Ontario Toronto-Centre 35093 121407 88810 62.9
Ontario Trinity--Spadina 35095 115361 101020 64.9
Ontario Vaughan 35096 154206 125059 55.1
Ontario Welland 35097 112875 85007 61.4
Ontario Wellington--Halton Hills 35098 111241 83499 66.2
Ontario Whitby--Oshawa 35099 135893 103125 62.5
Ontario Willowdale 35100 129356 93584 57.2
Ontario Windsor West 35102 122219 81984 48.8
Ontario Windsor-Ouest 35101 118478 84458 53
Ontario York--Simcoe 35104 120371 91662 57.9
Ontario York-Centre 35103 113457 71753 59
Ontario York-Ouest 35106 103948 58090 48.2
Ontario York-Sud--Weston 35105 114458 68361 51.9
Québec Abitibi--Baie-James--Nunavik--Eeyou 24046 80894 59325 53.3
Québec Abitibi--Témiscamingue 24001 102795 82079 59.7
Québec Ahuntsic 24002 100471 73254 64.7
Québec Alfred-Pellan 24003 104765 84630 65.7
Québec Argenteuil--Papineau--Mirabel 24004 111534 96723 61.1
Québec Bas-Richelieu--Nicolet--Bécancour 24054 91745 77290 65.7
Québec Beauce 24005 103617 84941 63
Québec Beauharnois--Salaberry 24006 106856 89454 62.1
Québec Beauport--Limoilou 24007 101331 84859 63.2
Québec Berthier--Maskinongé 24008 107911 90838 63.6
Québec Bourassa 24009 100683 70207 55.1
Québec Brome--Missisquoi 24010 92591 80371 66.1
Québec Brossard--La Prairie 24011 113985 96795 64.8
Québec Chambly--Borduas 24012 116925 99210 70.4
Québec Charlesbourg--Haute-Saint-Charles 24013 94522 82345 66.1
Québec Châteauguay--Saint-Constant 24015 107165 88908 63.9
Québec Chicoutimi--Le Fjord 24016 96483 79369 65.1
Québec Compton--Stanstead 24017 100148 80470 63.6
Québec Drummond 24018 92982 77280 62.5
Québec Gaspésie--Îles-de-la-Madeleine 24019 82007 69429 53.8
Québec Gatineau 24020 108742 89537 64.1
Québec Haute-Gaspésie--La Mitis--Matane--Matapédia 24041 73140 59397 59.7
Québec Hochelaga 24021 100915 80515 58.4
Québec Honoré-Mercier 24022 106196 81736 59.8
Québec Hull--Aylmer 24023 110902 91958 65
Québec Jeanne-Le Ber 24024 112863 89365 59.1
Québec Joliette 24025 108169 91695 63.3
Québec Jonquière--Alma 24026 97232 81098 65.8
Québec La Pointe-de-l'Île 24028 99685 80201 60.4
Québec Lac-Saint-Louis 24027 105622 82542 65.9
Québec LaSalle--Émard 24029 100327 74755 56.9
Québec Laurentides--Labelle 24030 105884 92025 62.2
Québec Laurier--Sainte-Marie 24031 101758 79772 63.4
Québec Laval 24032 102230 85204 60.6
Québec Laval--Les Îles 24033 111958 92755 58.9
Québec Lévis--Bellechasse 24034 105927 90515 65.9
Québec Longueuil--Pierre-Boucher 24035 98032 78791 67.1
Québec Lotbinière--Chutes-de-la-Chaudière 24036 100454 82725 69.2
Québec Louis-Hébert 24037 101730 82760 73.8
Québec Louis-Saint-Laurent 24038 96286 86945 66.2
Québec Manicouagan 24039 83608 65648 52
Québec Marc-Aurèle-Fortin 24040 107149 87923 67.5
Québec Mégantic--L'Érable 24042 87078 70238 64.6
Québec Mont-Royal 24044 98888 68556 57.4
Québec Montcalm 24043 122825 107677 61.5
Québec Montmagny--L'Islet--Kamouraska--Rivière-du-Loup 24058 97492 78969 61.1
Québec Montmorency--Charlevoix--Haute-Côte-Nord 24014 90535 76661 62.3
Québec Notre-Dame-de-Grâce--Lachine 24045 104715 77977 58.5
Québec Outremont 24047 95771 65573 59.7
Québec Papineau 24048 101019 70973 61.1
Québec Pierrefonds--Dollard 24049 105504 81767 59.2
Québec Pontiac 24050 99589 82670 59.7
Québec Portneuf--Jacques-Cartier 24051 93526 81093 65.9
Québec Québec 24052 95433 80608 66.1
Québec Repentigny 24053 109636 94047 66.8
Québec Richmond--Arthabaska 24055 100116 82637 65.6
Québec Rimouski-Neigette--Témiscouata--Les Basques 24056 84453 68625 62.9
Québec Rivière-des-Mille-Îles 24057 97258 79689 66.6
Québec Rivière-du-Nord 24059 101576 90638 60.1
Québec Roberval--Lac-Saint-Jean 24060 78895 63645 64.2
Québec Rosemont--La Petite-Patrie 24061 105864 81961 66.5
Québec Saint-Bruno--Saint-Hubert 24062 101416 82381 67.2
Québec Saint-Hyacinthe--Bagot 24063 95983 79289 66
Québec Saint-Jean 24064 102902 85777 62.3
Québec Saint-Lambert 24065 94541 73523 60.5
Québec Saint-Laurent--Cartierville 24066 109015 78870 52.2
Québec Saint-Léonard--Saint-Michel 24067 104786 71999 51.3
Québec Saint-Maurice--Champlain 24068 96968 80534 60.7
Québec Shefford 24069 100000 84666 64.8
Québec Sherbrooke 24070 101681 82918 63.4
Québec Terrebonne--Blainville 24071 107694 88734 65.7
Québec Trois-Rivières 24072 94272 79520 64.5
Québec Vaudreuil-Soulanges 24073 120395 104325 67.1
Québec Verchères--Les Patriotes 24074 97726 80472 71.4
Québec Westmount--Ville-Marie 24075 100360 77656 53.4
Saskatchewan Battlefords--Lloydminster 47001 71184 50655 56.9
Saskatchewan Blackstrap 47002 76273 61955 69.3
Saskatchewan Cypress Hills--Grasslands 47004 60551 44539 66.3
Saskatchewan Desnethé--Missinippi--Rivière Churchill 47003 67937 43739 50.4
Saskatchewan Palliser 47005 65956 50175 67.4
Saskatchewan Prince Albert 47006 71159 51656 60
Saskatchewan Regina--Lumsden--Lake Centre 47007 65885 51380 66.3
Saskatchewan Regina--Qu'Appelle 47008 66698 49386 60.4
Saskatchewan Saskatoon--Humboldt 47009 75051 57055 66.5
Saskatchewan Saskatoon--Rosetown--Biggar 47010 69547 49947 60.5
Saskatchewan Saskatoon--Wanuskewin 47011 72867 57654 63.1
Saskatchewan Souris--Moose Mountain 47012 63238 47061 62.2
Saskatchewan Wascana 47013 75717 57815 67.2
Saskatchewan Yorkton--Melville 47014 66094 50797 62.7
Terre-Neuve-et-Labrador Avalon 10001 78381 64424 56.8
Terre-Neuve-et-Labrador Bonavista--Gander--Grand Falls--Windsor 10002 86394 69936 44.8
Terre-Neuve-et-Labrador Humber--St. Barbe--Baie Verte 10003 73171 59109 50.9
Terre-Neuve-et-Labrador Labrador 10004 26364 20305 52.9
Terre-Neuve-et-Labrador Random--Burin--St. George's 10005 71219 57556 45.4
Terre-Neuve-et-Labrador St. John's-Est 10006 88002 76424 57.8
Terre-Neuve-et-Labrador St. John's-Sud--Mount Pearl 10007 81938 67025 58.3
Territoires du Nord-Ouest Western Arctic 61001 41464 29020 53.9
Yukon Yukon 60001 30372 24341 66.2
Raw
bar_chart.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Graphique en barres</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 20px;
margin: 0;
}
p {
font-size: 11px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
rect {
shape-rendering: crispEdges;
}
/* AJOUTÉ ceci pour donner l'illusion de barres aux nombres arrondis, car supprimé rangeRoundBands plus bas. */
rect:hover { /* configure le mouse */
fill: #6d6d6d;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.y.axis path,
.y.axis line {
opacity: 0; /* rend la barre invisible sur l'axe vertical */
}
</style>
</head>
<body>
<h1>Participation électorale en 2011</h1>
<p>Taux par circonscription. Source: <a href="http://www.elections.ca">Élections Canada</a></p>
<script type="text/javascript">
var w = 800;
var h = 3000;
var padding = [ 20, 10, 30, 280 ]; //Top, right, bottom, left
var widthScale = d3.scale.linear() // longueur des barres
.range([ 0, w - padding[1] - padding[3] ]);
var heightScale = d3.scale.ordinal() // écart entre les barres
.rangeBands([ padding[0], h - padding[2] ], 0.2);
// enlevé rangeRoundBands, car arrondir causait trop d'espace entre le début du graphique et les barres.
// Aussi, augmenté le padding à 0.2 pour espacer les barres.
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("2011_participation.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(+a.tauxParticipation, +b.tauxParticipation);
});
widthScale.domain([ 0, d3.max(data, function(d) {
return +d.tauxParticipation;
}) ]);
heightScale.domain(data.map(function(d) { return d.circonscription; } )); // va déterminer ce qui va être affiché dans l'axe vertical
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", padding[3])
.attr("y", function(d) {
return heightScale(d.circonscription); // détermine où aller chercher les données
})
.attr("width", function(d) { // la longueur des barres
return widthScale(d.tauxParticipation);
})
.attr("height", heightScale.rangeBand())
.attr("fill", "firebrick")
.append("title")
.text(function(d) {
return "Taux de participation dans " + d.circonscription + " : " + d.tauxParticipation + " %"
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scatterplot</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 20px;
margin: 0;
}
p {
font-size: 11px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
circle {
shape-rendering: crispEdges;
}
/* AJOUTÉ ceci pour donner l'illusion de barres aux nombres arrondis, car supprimé rangeRoundBands plus bas. */
circle:hover { /* configure le mouse */
fill: #6d6d6d;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.tooltip {
position: absolute;
pointer-events: none;
font: 12px sans-serif;
background: white;
}
</style>
</head>
<body>
<h1>Participation électorale en 2011</h1>
<p>Taux par circonscription. Source: <a href="http://www.elections.ca">Élections Canada</a></p>
<script type="text/javascript">
var w = 800;
var h = 400;
var padding = [ 20, 10, 30, 35 ]; //Top, right, bottom, left
var xScale = d3.scale.linear()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear() // écart entre les barres
.range([ padding[0], h - padding[2] ]);
// enlevé rangeRoundBands, car arrondir causait trop d'espace entre le début du graphique et les barres.
// Aussi, augmenté le padding à 0.2 pour espacer les barres.
var xAxis = d3.svg.axis()
.scale(xScale)
.ticks(5)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5)
.tickFormat(function(d) {
return d + " %";
});
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
d3.csv("2011_participation.csv", function(data) {
data.sort(function(a, b) {
return d3.descending(+a.tauxParticipation, +b.tauxParticipation);
});
xScale.domain([
d3.min(data, function(d) {
return +d.electeurs;
}),
d3.max(data, function(d) {
return +d.electeurs;
})
]);
yScale.domain([
d3.max(data, function(d) {
return +d.tauxParticipation;
}),
d3.min(data, function(d) {
return +d.tauxParticipation;
})
]);
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle");
/*
Après avoir changé tous les "rect" par "circle",
modifié "x" pour "cx", "y" pour "cy"
Enlevé le height, changé le "width" pour "r"
Modifié le "r" de function(d) { return xScale(d.tauxParticipation);} par "3" - hardcodé
Modifié le "cx" hardcodé du padding pour une fonction calée sur le nb d'électeurs, qu'on va ensuite encapsulé dans le xScale (sinon, seulement valeurs absolues)
Modifié le "cy", fonction qui affichait la circonscription pour une fonction calée sur le taux de participation. Idem : encapsulé dans le yScale.
Changé widthScale pour xScale, parce qu'on ne parle plus de longueur de barres, idem pour heightScale.
yScale : changé d'ordinal à linear, donc modifié rangeRoundBands pour seulement range + enlevé l'espace en extra entre les barres (0.2) à la fin du padding
Changé les xdomain et ydomain, y n'est plus sur le ".domain(data.map(function(d) { return d.circonscription; } ));", mais sur un d3.max.
Modifié le padding : .range([padding[3], w - padding[1] ]);
Inversé le 0 et le d3.max dans le y domain pour partir de 0 dans l'axe.
Changé les ticks de y et x
Ajouté des transitions pour les cercles (cf fichier 3_transitions)
Les délais : 4_delay : trier les points, les afficher après un court délai, avec une fonction.
*/
circles
.attr("cx", function(d) {
return xScale(d.electeurs);})
.attr("cy", function(d) {
return yScale(d.tauxParticipation);
})
.attr("r", 0.1)
.attr("fill", "firebrick")
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html(d.circonscription + "<br>" + "Nb d'électeurs : " + d.electeurs + "<br>" + "Taux de participation : " + d.tauxParticipation + " %")
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
// transition : on fait le tri (function nécessite a et b pour comparer), puis on ajoute un délai et on fait la transition
circles
.sort(function(a, b) {
return d3.ascending(+a.electeurs, +b.electeurs);
})
.transition()
.delay(function(d, i) {
return i * 15;
})
.duration(500)
.attr("r", 3);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2]) + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", (w - 45))
.attr("y", -6)
.style("text-anchor", "end")
.text("Nb d'électeurs");
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("x", -20)
.attr("y", 5)
.attr("dy", ".91em")
.style("text-anchor", "end")
.text("Taux de participation");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment