biovisualize/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg{
  /*border: 1px solid silver;*/
}
</style>
<body>

<div class="map-container"></div>

<div class="legend-component">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" height="50" width="600">
        <g class="panel" transform="translate(50, 0)">
            <defs><linearGradient id="legend-gradient"></linearGradient></defs>
            <rect height="30" width="500" class="color-band" fill="url(#legend-gradient)" />
            <g class="axis"></g>
            <text class="unit"></text>
        </g>
    </svg>
</div>

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 30},
            width = 1300 - margin.left - margin.right,
            height = 1000 - margin.top - margin.bottom;

var colors = ['#eaf8ff', '#beedfe', '#4bd0ff', '#05a5de', '#2882be']; // colors to tweak
var estoniaColor = '#004568';
var colorScale = d3.scale.linear()
     .range(colors);

var path = d3.geo.path();

var svg = d3.select(".map-container")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append('g')
    .attr('class', 'map');

var projection = d3.geo.winkel3()
  .scale(200)
  .translate( [width / 2, height / 1.6]);

var path = d3.geo.path().projection(projection);

queue()
    .defer(d3.json, "world_countries.json")
    .defer(d3.csv, "world_population.csv")
    .await(ready);

function ready(error, world, _population) {
  var populationByCode = {};
  var population = _population.sort(function(a, b){ return b.population - a.population; });

  console.log(population.map(function(d, i){ return d.name + ',' + d.population; }).slice(1, 11).join('\n'));

  population.forEach(function(d) {
    d.population = +d.population;
    populationByCode[d.code] = d.population;
  });

  var populationValues = population.map(function(d, i){ return d.population; });
  populationValues.sort(function(a, b){ return a - b; });
  var populationMin = populationValues[0];
  var populationMaxMinusBiggest = populationValues[populationValues.length - 2];
  var populationMiddle = populationMin + (populationMaxMinusBiggest - populationMin) / 2;

  console.log(populationMin, populationMiddle, populationMaxMinusBiggest);

  // get as many data stops as you have color stops
  colorScale.domain([populationMin, populationMin + 100, populationMin + 4000, populationMiddle, populationMaxMinusBiggest]);
  var allColors = [];

  svg.append("g")
      .attr("class", "continents")
    .selectAll("path")
      .data([topojson.feature(world, world.objects.land).geometry])
      .enter().append("path")
      .attr('d', path)
      // .style({stroke: 'none', fill: '#dff7ff'}); // continents color
      .style({stroke: 'none', 'stroke-width': 1, fill: 'none'}); // continents color

  svg.append("g")
      .attr("class", "countries")
    .selectAll("path")
      .data(topojson.feature(world, world.objects.countries).features)
      .enter().append("path")
      .filter(function(d){ return populationByCode[d.id]; })
      .attr('d', path)
      .style("fill", function(d) {
        var color = d.id === 233 ? estoniaColor : colorScale(populationByCode[d.id]);
        allColors.push(color);
        return color;
      })
      .style({stroke: 'none', 'stroke-width': 1.5})
      .append('title')
      .text(function(d){ return populationByCode[d.id]; });

  var stops = d3.select('#legend-gradient')
      .selectAll('stop')
      .data(colors)
      .enter().append('stop')
      .attr({
            offset: function(d, i){ return i*(100/(colors.length-1)) + '%'; },
            'stop-color': function(d){ return d; }
        });

  var labelValues = colorScale.domain();
  var labels = d3.select('.axis')
        .selectAll('line.tick-line')
        .data(labelValues)
        .enter().append('line').classed('tick-line', true)
        .attr({
            x1: function(d, i){ return i*(500/(labelValues.length-1)); },
            y1: 30,
            x2: function(d, i){ return i*(500/(labelValues.length-1)); },
            y2: 35,
            stroke: 'black'
        });

  var labels = d3.select('.axis')
        .selectAll('text.tick-label')
        .data(labelValues)
        .enter().append('text').classed('tick-label', true)
        .attr({
            x: function(d, i){ return i*(500/(labelValues.length-1)); },
            y: 50
        })
        .text(function(d){ return d; })
        .attr({
            dx: function(d, i){ return -(this.getBBox().width / 2); }
        });

        var uniqueColors = allColors.reduce(function(prev, cur) {
            return (prev.indexOf(cur) < 0) ? prev.concat([cur]) : prev;
           }, []);
        console.log(uniqueColors);

}

</script>
</body>
</html>

## world_countries.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world_countries.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## world_population.csv

          
            name
            code
            population

            
              Afganistan
              4
              5

            
              Albaania
              8
              2

            
              Ameerika Ühendriigid
              840
              3913

            
              Andorra
              20
              1

            
              Angola
              24
              1

            
              Araabia Ühendemiraadid
              784
              49

            
              Argentina
              32
              147

            
              Armeenia
              51
              23

            
              Aserbaidžaan
              31
              8

            
              Austraalia
              36
              2661

            
              Austria
              40
              283

            
              Bahrein
              48
              4

            
              Belgia
              56
              522

            
              Belize
              84
              2

            
              Bermuda (Gbr)
              60
              4

            
              Boliivia
              68
              3

            
              Bosnia ja Hertsegoviina
              70
              1

            
              Brasiilia
              76
              582

            
              Brunei Darussalam
              96
              1

            
              Bulgaaria
              100
              39

            
              Colombia (Kolumbia)
              170
              8

            
              Costa Rica
              188
              3

            
              Dominikaani Vabariik
              214
              3

            
              Ecuador
              218
              7

            
              Eesti
              233
              1120642

            
              Egiptus
              818
              20

            
              Fidži
              242
              2

            
              Filipiinid
              608
              9

            
              Ghana
              288
              1

            
              Gibraltar (Gbr)
              292
              1

            
              Gruusia
              268
              56

            
              Guatemala
              320
              5

            
              Hiina
              156
              32

            
              Hispaania
              724
              719

            
              Holland
              528
              650

            
              Honduras
              340
              42

            
              Hongkong (Chn)
              344
              13

            
              Horvaatia
              191
              13

            
              Iirimaa
              372
              2277

            
              Iisrael
              376
              579

            
              India
              356
              22

            
              Indoneesia
              360
              11

            
              Iraak
              368
              9

            
              Iraan
              364
              1

            
              Island
              352
              48

            
              Itaalia
              380
              541

            
              Jaapan
              392
              57

            
              Jersey (Gbr)
              832
              3

            
              Jordaania
              400
              1

            
              Kaimanisaared (Gbr)
              136
              1

            
              Kambodža
              116
              1

            
              Kamerun
              120
              3

            
              Kanada
              124
              3075

            
              Kasahstan
              398
              18

            
              Katar
              634
              5

            
              Kenya
              404
              4

            
              Kongo DV
              178
              1

            
              Korea Vabariik
              410
              3

            
              Kosovo
              
              1

            
              Kreeka
              300
              61

            
              Kuveit
              414
              1

            
              Kõrgõzstan
              417
              5

            
              Küpros
              196
              105

            
              Leedu
              440
              218

            
              Liechtenstein
              438
              1

            
              Liibanon
              422
              6

            
              Liibüa
              434
              1

            
              Luksemburg
              442
              239

            
              Läti
              428
              715

            
              Lõuna-Aafrika Vabariik
              710
              64

            
              Malaisia
              458
              10

            
              Mali
              466
              3

            
              Malta
              470
              25

            
              Mehhiko
              484
              18

            
              Moldova
              498
              39

            
              Monaco
              492
              25

            
              Montenegro
              499
              2

            
              Määramata
              
              1

            
              Namiibia
              516
              3

            
              Nigeeria
              566
              9

            
              Norra
              578
              1148

            
              Omaan
              512
              6

            
              Pakistan
              586
              1

            
              Palestiina
              275
              9

            
              Panama
              591
              4

            
              Peruu
              604
              10

            
              Poola
              616
              53

            
              Portugal
              620
              90

            
              Prantsusmaa
              250
              687

            
              Rootsi
              752
              4503

            
              Rumeenia
              642
              5

            
              Réunion (Fra)
              638
              1

            
              Saksamaa
              276
              4506

            
              Saudi Araabia
              682
              10

            
              Senegal
              686
              2

            
              Serbia
              688
              4

            
              Singapur
              702
              24

            
              Slovakkia
              703
              18

            
              Sloveenia
              705
              15

            
              Somaalia
              706
              1

            
              Soome
              246
              50865

            
              Suurbritannia
              826
              8105

            
              Svalbard ja Jan Mayen (Nor)
              744
              1

            
              Süüria
              760
              1

            
              Taani
              208
              583

            
              Tai
              764
              25

            
              Taiwan (Chn)
              158
              10

            
              Tansaania
              834
              1

            
              Tonga
              776
              1

            
              Türgi
              792
              60

            
              Tšehhi
              203
              99

            
              Tšiili
              152
              6

            
              Ukraina
              804
              483

            
              Ungari
              348
              57

            
              Uruguay
              858
              1

            
              Usa Neitsisaared (Usa)
              92
              1

            
              Usbekistan
              860
              4

            
              Uus-Meremaa
              554
              140

            
              Valgevene
              112
              178

            
              Vanuatu
              548
              2

            
              Venemaa
              643
              17044

            
              Venezuela
              862
              250

            
              Vietnam
              704
              9

            
              Wallis ja Futuna (Fra)
              876
              1

            
              Ühendriikide Hajasaared (Usa)
              581
              4

            
              Šveits
              756
              450
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	svg{
	/border: 1px solid silver;/
	}
	</style>
	<body>

	<div class="map-container"></div>

	<div class="legend-component">
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" height="50" width="600">
	<g class="panel" transform="translate(50, 0)">
	<defs><linearGradient id="legend-gradient"></linearGradient></defs>
	<rect height="30" width="500" class="color-band" fill="url(#legend-gradient)" />
	<g class="axis"></g>
	<text class="unit"></text>
	</g>
	</svg>
	</div>

	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script src="https://d3js.org/queue.v1.min.js"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>
	<script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
	<script>

	var margin = {top: 20, right: 20, bottom: 30, left: 30},
	width = 1300 - margin.left - margin.right,
	height = 1000 - margin.top - margin.bottom;

	var colors = ['#eaf8ff', '#beedfe', '#4bd0ff', '#05a5de', '#2882be']; // colors to tweak
	var estoniaColor = '#004568';
	var colorScale = d3.scale.linear()
	.range(colors);

	var path = d3.geo.path();

	var svg = d3.select(".map-container")
	.append("svg")
	.attr("width", width)
	.attr("height", height)
	.append('g')
	.attr('class', 'map');

	var projection = d3.geo.winkel3()
	.scale(200)
	.translate( [width / 2, height / 1.6]);

	var path = d3.geo.path().projection(projection);

	queue()
	.defer(d3.json, "world_countries.json")
	.defer(d3.csv, "world_population.csv")
	.await(ready);

	function ready(error, world, _population) {
	var populationByCode = {};
	var population = _population.sort(function(a, b){ return b.population - a.population; });

	console.log(population.map(function(d, i){ return d.name + ',' + d.population; }).slice(1, 11).join('\n'));

	population.forEach(function(d) {
	d.population = +d.population;
	populationByCode[d.code] = d.population;
	});

	var populationValues = population.map(function(d, i){ return d.population; });
	populationValues.sort(function(a, b){ return a - b; });
	var populationMin = populationValues[0];
	var populationMaxMinusBiggest = populationValues[populationValues.length - 2];
	var populationMiddle = populationMin + (populationMaxMinusBiggest - populationMin) / 2;

	console.log(populationMin, populationMiddle, populationMaxMinusBiggest);

	// get as many data stops as you have color stops
	colorScale.domain([populationMin, populationMin + 100, populationMin + 4000, populationMiddle, populationMaxMinusBiggest]);
	var allColors = [];

	svg.append("g")
	.attr("class", "continents")
	.selectAll("path")
	.data([topojson.feature(world, world.objects.land).geometry])
	.enter().append("path")
	.attr('d', path)
	// .style({stroke: 'none', fill: '#dff7ff'}); // continents color
	.style({stroke: 'none', 'stroke-width': 1, fill: 'none'}); // continents color

	svg.append("g")
	.attr("class", "countries")
	.selectAll("path")
	.data(topojson.feature(world, world.objects.countries).features)
	.enter().append("path")
	.filter(function(d){ return populationByCode[d.id]; })
	.attr('d', path)
	.style("fill", function(d) {
	var color = d.id === 233 ? estoniaColor : colorScale(populationByCode[d.id]);
	allColors.push(color);
	return color;
	})
	.style({stroke: 'none', 'stroke-width': 1.5})
	.append('title')
	.text(function(d){ return populationByCode[d.id]; });

	var stops = d3.select('#legend-gradient')
	.selectAll('stop')
	.data(colors)
	.enter().append('stop')
	.attr({
	offset: function(d, i){ return i*(100/(colors.length-1)) + '%'; },
	'stop-color': function(d){ return d; }
	});

	var labelValues = colorScale.domain();
	var labels = d3.select('.axis')
	.selectAll('line.tick-line')
	.data(labelValues)
	.enter().append('line').classed('tick-line', true)
	.attr({
	x1: function(d, i){ return i*(500/(labelValues.length-1)); },
	y1: 30,
	x2: function(d, i){ return i*(500/(labelValues.length-1)); },
	y2: 35,
	stroke: 'black'
	});

	var labels = d3.select('.axis')
	.selectAll('text.tick-label')
	.data(labelValues)
	.enter().append('text').classed('tick-label', true)
	.attr({
	x: function(d, i){ return i*(500/(labelValues.length-1)); },
	y: 50
	})
	.text(function(d){ return d; })
	.attr({
	dx: function(d, i){ return -(this.getBBox().width / 2); }
	});

	var uniqueColors = allColors.reduce(function(prev, cur) {
	return (prev.indexOf(cur) < 0) ? prev.concat([cur]) : prev;
	}, []);
	console.log(uniqueColors);

	}

	</script>
	</body>
	</html>
name	code	population
Afganistan	4	5
Albaania	8	2
Ameerika Ühendriigid	840	3913
Andorra	20	1
Angola	24	1
Araabia Ühendemiraadid	784	49
Argentina	32	147
Armeenia	51	23
Aserbaidžaan	31	8
Austraalia	36	2661
Austria	40	283
Bahrein	48	4
Belgia	56	522
Belize	84	2
Bermuda (Gbr)	60	4
Boliivia	68	3
Bosnia ja Hertsegoviina	70	1
Brasiilia	76	582
Brunei Darussalam	96	1
Bulgaaria	100	39
Colombia (Kolumbia)	170	8
Costa Rica	188	3
Dominikaani Vabariik	214	3
Ecuador	218	7
Eesti	233	1120642
Egiptus	818	20
Fidži	242	2
Filipiinid	608	9
Ghana	288	1
Gibraltar (Gbr)	292	1
Gruusia	268	56
Guatemala	320	5
Hiina	156	32
Hispaania	724	719
Holland	528	650
Honduras	340	42
Hongkong (Chn)	344	13
Horvaatia	191	13
Iirimaa	372	2277
Iisrael	376	579
India	356	22
Indoneesia	360	11
Iraak	368	9
Iraan	364	1
Island	352	48
Itaalia	380	541
Jaapan	392	57
Jersey (Gbr)	832	3
Jordaania	400	1
Kaimanisaared (Gbr)	136	1
Kambodža	116	1
Kamerun	120	3
Kanada	124	3075
Kasahstan	398	18
Katar	634	5
Kenya	404	4
Kongo DV	178	1
Korea Vabariik	410	3
Kosovo		1
Kreeka	300	61
Kuveit	414	1
Kõrgõzstan	417	5
Küpros	196	105
Leedu	440	218
Liechtenstein	438	1
Liibanon	422	6
Liibüa	434	1
Luksemburg	442	239
Läti	428	715
Lõuna-Aafrika Vabariik	710	64
Malaisia	458	10
Mali	466	3
Malta	470	25
Mehhiko	484	18
Moldova	498	39
Monaco	492	25
Montenegro	499	2
Määramata		1
Namiibia	516	3
Nigeeria	566	9
Norra	578	1148
Omaan	512	6
Pakistan	586	1
Palestiina	275	9
Panama	591	4
Peruu	604	10
Poola	616	53
Portugal	620	90
Prantsusmaa	250	687
Rootsi	752	4503
Rumeenia	642	5
Réunion (Fra)	638	1
Saksamaa	276	4506
Saudi Araabia	682	10
Senegal	686	2
Serbia	688	4
Singapur	702	24
Slovakkia	703	18
Sloveenia	705	15
Somaalia	706	1
Soome	246	50865
Suurbritannia	826	8105
Svalbard ja Jan Mayen (Nor)	744	1
Süüria	760	1
Taani	208	583
Tai	764	25
Taiwan (Chn)	158	10
Tansaania	834	1
Tonga	776	1
Türgi	792	60
Tšehhi	203	99
Tšiili	152	6
Ukraina	804	483
Ungari	348	57
Uruguay	858	1
Usa Neitsisaared (Usa)	92	1
Usbekistan	860	4
Uus-Meremaa	554	140
Valgevene	112	178
Vanuatu	548	2
Venemaa	643	17044
Venezuela	862	250
Vietnam	704	9
Wallis ja Futuna (Fra)	876	1
Ühendriikide Hajasaared (Usa)	581	4
Šveits	756	450