biovisualize · May 26, 2016 17:27
diff --git a/index.html b/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>

 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.mercator()
  .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: '#dde', 'stroke-width': 2, 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>
diff --git a/world_countries.json b/world_countries.json
diff --git a/world_population.csv b/world_population.csv
	<!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>

	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.mercator()
	.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: '#dde', 'stroke-width': 2, 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