Skip to content

Instantly share code, notes, and snippets.

@jsanz
Last active November 11, 2019 13:20
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save jsanz/779f9b9954b92461fa50 to your computer and use it in GitHub Desktop.
Save jsanz/779f9b9954b92461fa50 to your computer and use it in GitHub Desktop.
OSGeo Charter Members

OSGeo Charter Members data

Check the viz.

What is this repository for?

This is a simple exercise to learn D3 basics using a data set I have at hand, the charter members of the Open Source Geospatial Foundation OSGeo.

It is intentionally simple, as I've tried to use the core D3 features, without the help of any other third party library except the d3.geo.projection plugin because I love the Robinson projection. Yes, I have a comfortable pair of running shoes, etc.

Comments are welcomed

Don't hesitate to comment about the visual aspect or the source code if you think that it can be more readable, less buggier, etc. Let me say it again: I'm learning :bowtie:.

Notes on how to process data on CARTO to include new Charter Members starting from the csv maintained here.

Insert values

insert into osgeo_charter_members(firstname, lastname,year,country) values
('Andy','Anderson',2016,'United States of America'),
('Bogdan','Grama',2016,'Romania'),
('Brent','Wood',2016,'New Zealand')
....
;

Update complete-name

update osgeo_charter_members
set complete_name = firstname || ' ' || lastname
where complete_name is null;

Geocode

UPDATE osgeo_charter_members 
SET the_geom = cdb_geocode_admin0_polygon(country)
where the_geom is null

Fix country names

update osgeo_charter_members 
set country = 'United States' where
country = 'United States of America';

update osgeo_charter_members 
set country = 'Korea, Republic of' where
country = 'South Korea';

Fill the region field

update osgeo_charter_members m
set region = 
(
  select 
    case 
	when region = '2' then 'Africa'
	when region = '9' then 'Australia & Oceania'
	when region = '142' then 'Asia'
	when region = '19' then 'North and South America'
	when region = '150' then 'Europe'
	else null
    end as region
 from world_borders w
  where m.country = w.name
  limit 1
)
where region is null
firstname lastname year country
Aaron Racicot 2007 United States of America
Adam Steer 2018 Australia
Alan Boudreault 2009 Canada
Aleda Freeman 2017 United States of America
Alejandro Díaz 2014 Spain
Alessandro Furieri 2013 Italy
Alessio Fabiani 2017 Italy
Alex Leith 2018 Australia
Alex Mandel 2010 United States of America
Alex Morega 2015 Romania
Alexander Bruy 2014 Ukraine
Alexander Kotsev 2018 Bulgaria
Alexander Salveson Nossum 2015 Norway
Alexandre Neto 2014 Portugal
Alvin Natividad 2015 Philippines
Andrea Aime 2012 Italy
Andrea Antonello 2014 Italy
Andrea Ross 2008 Canada
Andreas Hocevar 2010 Austria
Andreea Marin 2014 Romania
Andrew Turner 2008 United States of America
Andrey V. Kiselev 2006 Russia
Andy Anderson 2016 United States of America
Angelos Tzotsos 2012 Greece
Anita Graser 2012 Austria
Anna Petrasova 2014 Czech Republic
Anne Ghisla 2010 Italy
Antony Scott 2017 United Kingdom
Anujit Vansarochana 2017 Thailand
Ari Jolma 2006 Finland
Ariel Anthieni 2018 Argentina
Ariel Nuñez 2014 Colombia
Arne Schubert 2017 Germany
Arnulf Christl 2006 Germany
Asahi Kosuke 2015 Japan
Asger Sigurd Petersen 2015 Denmark
Astrid Emde 2010 Germany
Athina Trakas 2008 Germany
Barend Köbben 2012 Netherlands
Barry Rowlingson 2017 United Kingdom
Bart van den Eijnden 2017 Netherlands
Bastian Drees 2017 Germany
Ben Caradoc-Davies 2017 New Zealand
Ben Lewis 2017 United States of America
Ben Tuttle 2017 United States of America
BJ Jang 2014 South Korea
Björn Harrtell 2017 Sweden
Bob Basques 2011 United States of America
Bogdan Grama 2016 Romania
Borys Jurgiel 2013 Poland
Brent Wood 2016 New Zealand
Brian Case 2011 United States of America
Brian Hamlin 2012 United States of America
Bruce Bannerman 2014 Australia
Byeong-Hyeok Yu 2015 South Korea
Cameron Shorter 2006 Australia
Candan Eylül Kilsedar 2017 Italy
Carmen Diez 2018 Spain
Carolina Arias 2014 Italy
Carolyn Bennett 2017 United States of America
Cayetano Benavent 2018 Spain
César Medina 2012 Chile
Chaitanya Kumar 2014 India
Charlie Schweik 2008 United States of America
Chris Helm 2014 United States of America
Chris Holmes 2006 United States of America
Christian Mayer 2014 Germany
Christopher Schmidt 2007 United States of America
Christos Iosifidis 2014 Greece
Claude Philipona 2006 Switzerland
Codrina Maria Ilie 2013 Romania
Cristian Zamar 2018 Argentina
Cristina Domínguez 2017 Spain
Daisuke Yoshida 2009 Japan
Dan Ames 2013 United States of America
Dan Little 2014 United States of America
Dane Springmeyer 2009 United States of America
Daniel Berry 2016 United States of America
Daniel Kastl 2013 Germany
Daniel McInerney 2013 Ireland
Daniel Morissette 2006 Canada
Daniel Urdă 2016 Romania
Daniele Oxoli 2017 Italy
Daniele Strigaro 2017 Italy
Danilo Furtado 2010 Portugal
Daria Svidzinska 2015 Ukraine
Darrell Fuhirman 2014 United States of America
Dave McIlhagga 2006 Canada
David Bianco 2015 United States of America
David Bitner 2009 United States of America
David Fawcett 2014 United States of America
David Mateos 2016 Spain
David Percy 2014 United States of America
Denis Rouzaud 2016 Switzerland
Didier Richard 2015 France
Diego Moreira Carvalho 2018 Brazil
Dimitris Kotzinos 2012 Greece
Dirk Frigne 2013 Belgium
Doug Newcomb 2012 United States of America
Dražen Tutić 2017 Croatia
Duarte Carreira 2009 Portugal
Eddie Pickle 2017 United States of America
Eli Adam 2013 United States of America
Elżbieta Wołoszyńska-Wiśniewska 2015 Poland
Emmanuel Polidario Sambale 2011 Philippines
Eric Lemoine 2011 France
Erik Meerburg 2016 Netherlands
Etienne Delay 2015 France
Eugene Cheipesh 2018 United States of America
Eva Jelínková 2017 Czech Republic
Even Rouault 2011 France
Fernando Quadro 2018 Brazil
Florin Iosub 2014 Romania
François Prunayre 2013 France
Frank Warmerdam 2006 Canada
G. Hanumantha Rao 2011 India
Gabriel Roldán 2011 Argentina
Gabriele Prestifilippo 2017 Italy
Gaël Kruwialis 2016 Belgium
Gary Lang 2006 United States of America
Gary Sherman 2006 United States of America
Gavin Fleming 2010 South Africa
Geoff Zeiss 2008 Canada
George Porto Ferreira 2018 Brazil
Gérald Fenoy 2009 France
Gert-Jan van der Weijden 2015 Netherlands
Gildas Junior Boko 2017 Benin
Giovanni Manghi 2009 Portugal
Go Yonezawa 2015 Japan
Gonzalo Gabriel Pérez 2015 Argentina
Gowtham Gollapalle 2017 India
Gretchen Peterson 2017 United States of America
Guido Stein 2017 United States of America
Guillaume Pasero 2018 France
Hae-Kyong Kang 2017 South Korea
Hans Gregers Petersen 2015 Denmark
Hardeep S. Rai 2009 India
Haris Kurtagic 2009 Slovenia
Harish Kumar Solanki 2013 India
Helena Mitasova 2006 United States of America
Helmut Kudrnovsky 2013 Austria
Helton Uchoa 2006 Brazil
Hirofumi Hayashi 2010 Japan
Horacio Castellaro 2018 Argentina
Howard Butler 2006 United States of America
Hugo Mercier 2016 France
Hugo Santos 2014 Portugal
Ian Edwards 2013 United Kingdom
Ian Turton 2006 United Kingdom
Ionuț Iosifescu 2014 Switzerland
Ivan Minčik 2014 Slovakia
Iván Sánchez Ortega 2014 Norway
Jachym Cepicky 2011 Czech Republic
Jack Reed 2017 United States of America
Jackie Ng 2009 Australia
Jakob Miksch 2017 Germany
James MacGill 2006 United States of America
Jan-Oliver Wagner 2007 Germany
Jan Jezek 2012 Czech Republic
Javier Díaz 2015 Argentina
Jean-Marie Arsac 2015 France
Jean-Roc Morreale 2012 France
Jeff Hamm 2018 Canada
Jeff McKenna 2006 Canada
Jeffrey Johnson 2014 United States of America
Jeremy Morley 2014 United Kingdom
Jeroen Ticheler 2006 Netherlands
Jerome St-Louis 2016 Canada
Jéssica Sena Garcia 2018 Spain
Jim Hughes 2018 United States of America
Jim Klassen 2014 United States of America
Jo Cook 2010 United Kingdom
Jo Walsh 2006 United Kingdom
Joana Simões 2017 Portugal
Jody Garnett 2006 Australia
Johan Van de Wauw 2014 Belgium
John Bryant 2018 Australia
John Graham 2007 United States of America
Jon Scarbrough 2006 United States of America
Jonas Eberle 2016 Germany
Jorge Gustavo Rocha 2009 Portugal
Jorge Luis Batista 2016 Cuba
Jorge Samuel Mendes de Jesus 2017 Portugal
Jorge Arévalo 2014 Spain
Jorge Sanz 2008 Spain
José García 2014 Spain
Jose Santos 2014 Portugal
Josh Campbell 2017 United States of America
Josh Livni 2009 United States of America
Juan Luis Rodríguez Ponce 2017 Spain
Jukka Rahkonen 2014 Finland
Julien-Samuel Lacroix 2008 Canada
Julien Michel 2015 France
Junyoung Choi 2016 South Korea
Jürgen E. Fischer 2015 Germany
Just van den Broecke 2013 Netherlands
Justin Bronn 2009 United States of America
Justin de Olivera 2006 United States of America
K.S. Rajan 2009 India
Kampart Piyathamrongchai 2017 Thailand
Karel Charvat 2012 Czech Republic
Kari Salovaara 2015 Finland
Karine Jean 2018 Canada
Kate Chapman 2014 United States of America
Kenya Tamura 2015 Japan
Kevin Smith 2015 Canada
Khalifa Abacar Sarr 2017 Senegal
Ko Nagase 2015 Japan
Kristian Evers 2018 Denmark
Kristin Bott 2014 United States of America
Kurt Menke 2015 United States of America
Landon Blake 2007 United States of America
Larry Shaffer 2016 United States of America
Lene Fischer 2015 Denmark
Lluís Vicens 2011 Spain
Luca Congedo 2017 Italy
Luca Delucchi 2011 Italy
Luciene Delzari 2014 Brazil
Luigi Pirelli 2016 Spain
Luis W. Sevilla 2008 Spain
Luís de Sousa 2016 Switzerland
Luiz Motta 2018 Brazil
Lyzi Diamond 2017 United States of America
Maëlle Vercauteren 2015 Belgium
Malena Libman 2018 Argentina
Manuel Grizonet 2017 France
Manuel Retamozo 2018 Argentina
Marc Jansen 2013 Germany
Marc Vloemans 2015 Netherlands
Marco Bernasocci 2018 Switzerland
Marco Lechner 2013 Germany
Marco Minghini 2015 Italy
Margherita di Leo 2011 Italy
Maria Arias de Reyna 2013 Spain
Maria Brovelli 2010 Italy
Marie Anna Baovola 2018 Madagascar
Marie Silvestre 2014 France
Mark Cave-Ayland 2009 United Kingdom
Mark Iliffe 2017 United Kingdom
Mark Leslie 2013 Australia
Mark Lucas 2006 United States of America
Markus Metz 2017 Germany
Markus Muller 2008 New Zealand
Markus Neteler 2006 Germany
Martin Daly 2011 United Kingdom
Martin Davis 2008 Canada
Martin Dobias 2016 Czech Republic
Martin Landa 2011 Czech Republic
Massimiliano Cannata 2012 Italy
Massimo di Stefano 2011 Italy
Mateusz チチoskot 2007 United Kingdom
Matt Travis 2018 United Kingdom
Matt Walker 2017 United Kingdom
Matthew Hanson 2017 United States of America
Matthias Kuhn 2016 Switzerland
Mauricio Miranda 2012 Argentina
Maxim Dubinin 2013 Russia
Mayte Toscano 2017 Spain
Mayumi Kubo 2015 Japan
Micah Wengren 2017 United States of America
Michael P. Gerlek 2006 United States of America
Michael Smith 2012 United States of America
Michael Terner 2017 United States of America
Michele Tobias 2017 United States of America
Micho García 2013 Spain
Miguel Ángel Blanco 2014 Argentina
Mike Saunt 2018 United Kingdom
Mikel Maron 2017 United States of America
Milan Antonovic 2014 Switzerland
Milena Nowotarska 2010 Poland
Minpa Lee 2013 South Korea
Miriam González 2018 Mexico
Mirko Cardoso 2016 Switzerland
Mohammed Rashad 2014 India
Mohammed Zia 2017 Turkey
Moisés Arcos 2014 Spain
Monia Molinari 2016 Italy
Moritz Lennert 2015 Belgium
Msilikale Msilanga 2017 United Republic of Tanzania
Nadiia Gorash 2014 Ukraine
Narumasa Tsutsumida 2017 Japan
Nathan Woodrow 2013 Australia
Natraj Vaddadi 2017 India
Ned Horning 2006 United States of America
Neil Revello 2017 United States of America
Nicolas Bozon 2011 France
Nicolas Roelandt 2017 France
Nikos Alexandris 2014 Greece
Nikos Lambrinos 2017 Greece
Nikos Ves 2013 Greece
Nimalika Fernando 2014 Sri Lanka
Niroshan Bandara 2017 Sri Lanka
Nobusuke Iwasaki 2013 Japan
Norman Vine 2006 United States of America
Nuno Oliveira 2017 Portugal
Nyall Dawson 2017 Australia
Oliver May 2015 Belgium
Oliver Tonhofer 2014 Germany
Olivier Courtin 2014 France
Oscar López 2015 Argentina
Paolo Cavallini 2008 Italy
Paolo Corti 2013 Italy
Patricio Soriano 2014 Spain
Patrick Hogan 2017 United States of America
Paul Meems 2014 Netherlands
Paul Ramsey 2006 Canada
Paul Spencer 2006 Canada
Paulo van Breugel 2017 Netherlands
Peddada Jagadeeswara Rao 2018 India
Pedro-Juan Ferrer Matoses 2012 Spain
Pedro Pereira 2016 Portugal
Pedro Venancio 2015 Portugal
Pekka Sarkola 2013 Finland
Pericles Nacionales 2006 United States of America
Peter Batty 2009 United States of America
Peter Baumann 2013 Germany
Peter Löwe 2012 Germany
Peter Mooney 2015 Ireland
Phillip Davis 2013 United States of America
Pieter De Graef 2014 Belgium
Pirmin Kalberer 2014 Switzerland
Praveen K. Sinha 2012 India
Puneet Kishor 2007 United States of America
R.C. Parasad 2017 India
Rafael Medeiros Sperb 2006 Brazil
Rafael Moreno-Sanchez 2017 United States of America
Rafael Roset 2016 Spain
Ragi Yaser Burhum 2012 Peru
Rajat Shinde 2017 India
Rama Murthy Soma 2016 India
Ravi Kumar Vundavilli 2006 India
Regina Obe 2009 United States of America
Régis Haubourg 2014 France
Rémi Cresson 2017 France
Rich Signell 2017 United States of America
Rich Steele 2006 United States of America
Rob Atkinson 2007 Australia
Rob Emanuele 2017 United States of America
Robert Bray 2006 Canada
Robert Szczepanek 2009 Poland
Rohit Reddy 2017 India
S. Narendra Prasad 2008 India
Sandro Santilli 2009 Italy
Sanghee Shin 2011 South Korea
Santiago Higuera 2016 Spain
Santosh Gaikwad 2014 India
Santtu Pyykkönen 2017 Finland
Sara Safavi 2016 United States of America
Sarawut Ninsawat 2013 Thailand
Schuyler D. Erle 2006 United States of America
Scott Clark 2017 United States of America
Sebastiaan Couwenberg 2015 Netherlands
Selene Yang 2018 Nicaragua
Serena Coetzee 2012 South Africa
Sergio Acosta y Lara 2013 Uruguay
Seth Fitzsimmons 2017 United States of America
Shailesh Chaure 2016 India
Sidney Schaberle Goveia 2018 Brazil
Silvana Camboim 2013 Brazil
Silvia Franceschi 2014 Italy
Simon Georget 2018 France
Simon Mercier 2014 Canada
Simon Miles 2017 United Kingdom
Simone Dalmasso 2014 Italy
Simone Giannecchini 2007 Italy
Sittichai Choosumrong 2014 Thailand
Stephan Meißl 2014 Austria
Stephen Mather 2017 United States of America
Stephen Woodbridge 2011 United States of America
Steve Lime 2006 United States of America
Steven Feldman 2014 United Kingdom
Steven Ottens 2017 Netherlands
Suchith Anand 2011 United Kingdom
Taichi Furuhashi 2013 Japan
Takayuki Nuimura 2014 Japan
Tamas Szekeres 2007 Hungary
Tanya Haddad 2014 United States of America
Thierry Badard 2008 Canada
Thijs van Menen 2014 Netherlands
Thomas E. Burk 2006 United States of America
Thomas Bonfort 2012 France
Thomas Gratier 2014 France
Thomas Starnes 2018 United Kingdom
Till Adams 2013 Germany
Tim Schaub 2009 United States of America
Tim Sutton 2011 South Africa
Tina Cormier 2017 United States of America
Tom Chadwin 2017 United Kingdom
Tom Ingold 2018 United States of America
Tom Kralidis 2007 Canada
Tommy Oozeer 2016 Belgium
Tõnis Kärdi 2017 Estonia
Torben Barsballe 2017 Canada
Toru Mori 2006 Japan
Toshikazu Seto 2014 Japan
Tudor Bărăscu 2016 Romania
Tuong Thuy VU 2013 Malaysia
Tyler Mitchell 2006 Canada
V Rajesh Chowdhary 2018 Thailand
Václav Petras 2014 Czech Republic
Vasanthi Hargyono 2016 Indonesia
Vasile Craciunescu 2012 Romania
Venkatesh Raghavan 2006 Japan
Veronica Andreo 2017 Argentina
Vicky Vergara 2015 Mexico
Victor Ferreira 2009 Portugal
Victor Olaya 2012 Spain
Victoria Rautenbach 2016 South Africa
Vinayaraj Poliyapram 2017 Japan
Vincent Mora 2016 France
Vincent Picavet 2013 France
Vivek Saxena 2018 India
Vivien Deparday 2014 France
Volker Mische 2013 Germany
Werner Macho 2016 Austria
Wolf Bergenheim 2008 Finland
Xianfeng Song 2011 China
Yamakawa Junji 2017 Japan
Yann Chemin 2013 Sri Lanka
Yewondwossen Assefa 2007 Canada
Yoichi SEINO 2013 Japan
Yoicihi Kayama 2011 Japan
Yuichiro Nishimura 2015 Japan
Yves Jacolin 2008 France
Zoltan Siki 2014 Hungary
Ana Leticia Ma 2019 United States of America
Andi Lazăr 2019 Romania
Andrea Trovant 2019 Argentina
Antonio Cerciello 2019 Netherlands
Carmen Tawalika 2019 Germany
Cécile Le Calvez 2019 France
Cristina Vrînceanu 2019 Romania
Dan Ormsby 2019 United Kingdom
Daniel Santillan 2019 Austria
Daniel Silk 2019 New Zealand
Dennis Bauszus 2019 United Kingdom
Dimitris Karakostis 2019 Greece
Edoardo Neerhut 2019 Australia
Felipe Sodré Barros 2019 Brazil
Fiona Hemsley-Flint 2019 Scotland
Hennessy A. Becerra Ayala 2019 Mexico
Ion Nedelcu 2019 Romania
Ionuț Ungurianu 2019 Romania
Ivana Ivanova 2019 Australia
Ji Yoon Kim 2019 South Korea
Julia Wagemann 2019 Italy
Mahdi Farnaghi 2019 Iran
Marius Budileanu 2019 Romania
Narcélio de Sá 2019 Brazil
Olimpia Copăcenaru 2019 Romania
Pēteris Brūns 2019 Latvia
Robert Coup 2019 United Kingdom
Romel Vázquez Rodríguez 2019 Cuba
Ross McDonald 2019 Scotland
Saber Razmjooei 2019 United Kingdom
Seth Girvin 2019 Ireland
Sylvain Beorchia 2019 France
Tom Armitage 2019 United Kingdom
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>OSGeo Charter Members</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<style>
/* styles from scss file */
.axis path, .axis line {
fill: none;
stroke: #47aa42;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
fill: #47aa42; }
.graph .bar { fill: #47aa42; }
.graph rect.bar:hover {fill: orange; }
.graph .label {
fill: #f2faf1;
font-family: sans-serif;
font-size: 12px;
}
.graph .xaxe {
font-family: sans-serif;
font-size: 11px;
fill: #47aa42;
}
.graph .map .stroke {
fill: none;
stroke: #000;
stroke-width: 3px;
}
.graph .map .fill {fill: #fff; }
.graph .map .graticule {
fill: none;
stroke: #777;
stroke-width: 0.5px;
stroke-opacity: 0.5;
}
.graph .map .land {fill: #222; }
.graph .map .boundary {
fill: none;
stroke: #fff;
stroke-width: 0.5px;
}
h2 span.glyphicon {font-size: 15px; }
.inline-list span {display: inline-block;}
.highlighted {background-color: yellow; }
</style>
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container">
<div class="header">
<h1 class="text-muted">OSGeo Charter Members</h1>
</div>
<div class="row">
<div class="col-lg-12"><p>
<a href="https://gist.github.com/jsanz/779f9b9954b92461fa50">gist</a> ·
<a href="http://bl.ocks.org/jsanz/779f9b9954b92461fa50">bl.ocks.org</a>
</p></div>
</div>
<div id="byYear">
<div class="row">
<div class="col-lg-12"><h2>Charter Members by year added</h2></div>
</div>
<div class="row">
<div class="col-lg-12 graph"></div>
</div>
</div>
<div id="byRegion">
<div class="row">
<div class="col-lg-12">
<h2>Charter Members by region</h2>
<p>Hover the mouse over the pie chart to get region details</p>
</div>
</div>
<div class="row">
</div>
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-lg-12">
<p id="chartersByRegion" class="inline-list"></p>
</div>
<div class="col-lg-12 graphDetail"></div>
</div>
</div>
<div class="col-lg-4 graph"></div>
</div>
</div>
<div id="byCountry">
<div class="row">
<div class="col-lg-12"><h2>Charter Members by country</a></h2></div>
</div>
<div class="row">
<div class="col-lg-8 graph"></div>
<div class="col-lg-4"><p id="chartersByCountry" class="inline-list"></p></div>
</div>
</div>
<div class="footer">
<p><span class="glyphicon glyphicon-heart"></span>
<a href="https://www.jorgesanz.net">Jorge Sanz</a> 2019</p>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.9/d3.geo.projection.min.js" charset="utf-8"></script>
<script src="main.js"></script>
</body>
</html>
/*
* First attempt wit D3:
* This script loads a CSV file with OSGeo Charter Members
* information and presents it in several ways.
*
* Author: Jorge Sanz
* Date: 14/07/27
*/
/* almost stupid and optimistic way to normalize strings for comparison */
var norm = function(string){
return ( string + "" ).toLowerCase().trim();
}
/*
* Function to generate the bar chart for
* charters by year
*/
var processDataByYear = function(csv_data){
/* Graph for the year */
var w = 1024;
var h = 250;
var barPadding = 2;
var padding = 20;
var xoffset = 30;
/* group the data by year */
var dataByYear = d3.nest()
.key(function(d) { return d.year;})
.sortKeys(d3.ascending)
.entries(csv_data);
var svg = d3.select('#byYear .graph')
.append("svg")
.attr("width", w)
.attr("height", h)
.attr("class","graph");
var yScale = d3.scale.linear()
.domain([0, d3.max(dataByYear, function(d) { return d.values.length; })])
.rangeRound([h - padding, 0]);
var xScale = d3.scale.ordinal()
.domain(d3.range(dataByYear.length))
.rangeRoundBands([0, w - xoffset], 0.05);
svg.selectAll("rect")
.data(dataByYear)
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i) + xoffset;
})
.attr("y", function(d) {
return yScale(d.values.length);
})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
return h - yScale(d.values.length) - padding;
})
.attr("class","bar");
svg.append("g")
.selectAll("text")
.data(dataByYear)
.enter()
.append("text")
.text(function(d) {
return d.values.length;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return xScale(i) + xoffset + xScale.rangeBand()/2;
})
.attr("y", function(d) {
return yScale(d.values.length) + 14;
})
.attr("class", "label");
svg.append("g")
.selectAll("text")
.data(dataByYear)
.enter()
.append("text")
.text(function(d) {
return d.key;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
prop = ( w - xoffset) / dataByYear.length;
return i * prop + (prop - barPadding) / 2 + xoffset;
})
.attr("y", function(d) {
return h;
})
.attr("class", "label xaxe");
//Define X axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
//Create X axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + xoffset + ",0)")
.call(yAxis);
};
/*
* Function to process the countries geojson
* join it with charters data and
* produce the pie chart and the map
*/
var processDataByCountry = function(csv_data, countries){
/* group the data by country */
var w = 700,
h = 350,
colors = ["#ccc","#41ab5d","#238b45","#005a32"],
buckets = colors.length;
var quantize = d3.scale.quantile()
.domain([0,1,5,15,100])
.range(d3.range(buckets));
var dataByCountry = d3.nest()
.key(function(d) { return d.country;})
.rollup(function(d) {
return d3.sum(d, function(g) {return 1; });
})
.sortKeys(d3.ascending)
.entries(csv_data);
d3.select('#chartersByCountry')
.selectAll('span')
.data(dataByCountry)
.enter()
.append('span')
.attr("id",function(d,i){
return "charter-country-text-" + i;
})
.text(function(country,i){
result = country.key + " (" + country.values + ")";
return i < dataByCountry.length - 1 ? result + " · " : result;
})
.style("color", function(d) {return colors[quantize(d.values)]});
// data by Country
//Define map projection
var projection = d3.geo.robinson()
.scale(110)
.translate([w / 2, h / 2])
.precision(.1);
//Define path generator
var path = d3.geo.path()
.projection(projection);
var graticule = d3.geo.graticule();
// CREATE THE SVG
var svgMap = d3.select('#byCountry .graph')
.append("svg")
.attr("class","map")
.attr("width", w)
.attr("height", h);
svgMap.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
//Merge the ag. data and GeoJSON
var dataByCountryPushed = [];
var features_with_charters = countries.features.map(function(country){
var result = {
'type' : 'Feature',
'geometry' : country.geometry,
'properties' : {
'admin' : country.properties.admin,
'region' : country.properties.region_wb,
'charters' : 0
}
};
//find data into the dataByCountry
for (i in dataByCountry){
if (norm(dataByCountry[i].key) == norm(country.properties.admin)){
result.properties['charters'] = dataByCountry[i].values;
dataByCountryPushed.push(dataByCountry[i]);
break;
}
}
return result;
});
var countriesCharters = {'type':'FeatureCollection','features':features_with_charters};
if (dataByCountry.length != dataByCountryPushed.length){
dataByCountry.forEach(function(d){
console.assert(dataByCountryPushed.indexOf(d)!=-1,d)
})
}
svgMap.selectAll("path")
.data(countriesCharters.features)
.enter()
.append("path")
.attr("d", path)
.style("fill", function(d) {
color = colors[quantize(d.properties.charters)]
return color;
})
.on("mouseover",function(d){
var r = -1;
for (i in dataByCountry){
if (norm(d.properties.admin) === norm(dataByCountry[i].key)){
r = i;
break;
}
}
if (r != -1)
d3.select("#charter-country-text-"+i)
.classed("highlighted",true);
})
.on("mouseout",function(d){
var r = -1;
for (i in dataByCountry){
if (norm(d.properties.admin) === norm(dataByCountry[i].key)){
r = i;
break;
}
}
if (r != -1)
d3.select("#charter-country-text-"+i)
.classed("highlighted",false);
});;
// Regroup by regiov_wb
/* normalize countries and regions */
var dataByRegion = d3.nest()
.key(function(d) {
region = d.properties.region
return region;
})
.rollup(function(d) {
return {
'totalCharters' : d3.sum(d, function(g) {return g.properties.charters; }),
'countries' : d.map(function(country){
return {
'country' : country.properties.admin,
'charters': country.properties.charters
}
})
}
})
.sortKeys(d3.ascending)
.entries(countriesCharters.features.filter(function(d){return d.properties.charters>0;}));
var color = d3.scale.category10();
// Populate the list
d3.select('#chartersByRegion')
.selectAll('span')
.data(dataByRegion,function(d){return d.key})
.enter()
.append('span')
.attr("style", function(d, i) {
return "color:" + color(i);
})
.attr("id",function(d,i){
return "charter-region-text-" + i;
})
.text(function(d,i){
result = d.key + " (" + d.values.totalCharters + ")";
return i < dataByRegion.length - 1 ? result + " · " : result;
});
// Graph for the year
var pie = d3.layout.pie().value(function(d){return d.values.totalCharters});
var w = 200;
var h = 200;
var outerRadius = w / 2;
var innerRadius = 0;
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
var svgPie = d3.select('#byRegion .graph')
.append("svg")
.attr("width", w)
.attr("height", h)
.attr("class","graph");
var arcs = svgPie.append("g")
.attr("class","pieArcs")
.selectAll("g.arc")
.data(pie(dataByRegion))
.enter()
.append("g")
.attr("class", "arc")
.attr("transform", "translate(" + outerRadius + ", " + outerRadius + ")")
.append("path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", arc)
.on("mouseover",function(d,i){
d3.select('.graphDetail')
.append('h3')
.text(d.data.key);
d3.select('.graphDetail')
.append('p')
.attr("class","inline-list")
.selectAll('span')
.data(d.data.values.countries)
.enter()
.append('span')
.text(function(l,i){
result = l.country + " (" + l.charters + ")";
return i < d.data.values.countries.length - 1 ? result + " · " : result;
});
d3.select("#charter-region-text-"+i)
.classed("highlighted",true);
})
.on("mouseout",function(d,i){
d3.select('.graphDetail h3').remove();
d3.select('.graphDetail p').remove();
d3.select("#charter-region-text-"+i)
.classed("highlighted",false);
});
};
/*
* Where the action begins
*/
d3.csv("charters.csv", function(csv_data){
processDataByYear(csv_data);
d3.json("countries.json", function(error, countries) {
processDataByCountry(csv_data,countries);
});
});
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment