Visualización paises

Effectiveness

Map: It is relatively Effectiveness because it shows the country's position indicated.
Graphics: Although attributes are encoded with color channel (highest ranked channel), also it use 3D channel making complicated undertanding the representation of data.

Expressiveness

Map: Achieves the objective of representing the data displayed.
Graphics: Information is presented in way disorganized, it making difficult the expressiveness of visualization.

Although there is a relationship between the channel characteristics (color) and data are not easy to understand because they use similar hues. It generate confusion.

A better display would replace the graphics by bar charts, relating the color, position and length channels.

<!DOCTYPE html>
<html>
<head>
    <style>
        .active { fill: blue !important;}
        /*.datamaps-key dt, .datamaps-key dd {float: none !important;}
        .datamaps-key {right: -50px; top: 0;}*/
		path{cursor:pointer}
		.hoverinfo{
			font-family: "Oleo Script";
			font-weight: normal;
			font-size: 15px !important;
			text-align: center;
		}
		.a{
			font-size: 150px;
		}
		
		
		.tick text{
		font-size: 12px;
		}

.tick line{
		opacity: 0.2;
		}

.axis path,
		.axis line {
		  fill: none;
		  stroke: #000;
		  shape-rendering: crispEdges;
		}

.legend .legend-bg {
			fill: rgba(255, 255, 255, 0.5);
			//stroke: rgba(195, 33, 33, 0.5);
		}
		
		.d3-tip {
		  line-height: 1;
		  font-weight: bold;
		  padding: 12px;
		  background:rgb(226, 218, 218);
		  color: #000;
		  border-radius: 2px;
		}

/* Creates a small triangle extender for the tooltip */
		.d3-tip:after {
		  box-sizing: border-box;
		  display: inline;
		  font-size: 10px;
		  width: 100%;
		  line-height: 1;
		  color: rgba(0, 0, 0, 0.8);
		  content: "\25BC";
		  position: absolute;
		  text-align: center;
		}

/* Style northward tooltips differently */
		.d3-tip.n:after {
		  margin: -1px 0 0 0;
		  top: 100%;
		  left: 0;
		 }
    </style>

</head>
<body>

var paises;
    // paises con la información
d3.json('paises.json', function (error, paisesData) {
		if (error) {
			console.error(error);
		return;
		}
    paises = paisesData.map(function (d) {
      return {
        iso: d.iso,
		porc: d.porc,
		capital: d.capital,
		people: d.people,
        mediap: d.mediap,
		area: d.area,
		rank: d.rank,
      }
    });
   
    
    var dataset = {};
   
    var valores = paises.map(function(d){ return d.mediap; });
    var minValor = Math.min.apply(null, valores),
        maxValor = Math.max.apply(null, valores);

//----	PALETA DE COLORES	----//
    var EscalaColor = d3.scale.linear()
            .domain([minValor,maxValor])
            .range(["#EFEFFF","#02386F"]); // blue color
    // fill dataset in appropriate format
    paises.forEach(function(d){ 
        dataset[d.iso] = { 
			porcent: d.porc, 
			money:d.capital,
			people: d.people,
			area: d.area,
			rank: d.rank,
			fillColor: EscalaColor(d.mediap) };
    })
    
    new Datamap({
        element: document.getElementById('container1'),
        projection: 'mercator', // big world map
        // countries don't listed in dataset will be painted with this color
        fills: { defaultFill: '#F5F5F5' },
        data: dataset,
        geographyConfig: {
            borderColor: '#DEDEDE',
            highlightBorderWidth: 2,            // don't change color on mouse hover
            highlightFillColor: function(geo) {
                return geo['fillColor'] || '#F5F5F5';
            },
            // only change border
            highlightBorderColor: '#B7B7B7',
            // show desired information in tooltip
            popupTemplate: function(geo, data) {
                // don't show tooltip if country don't present in dataset
                if (!data) { return ; }
                // tooltip content
                return ['<div class="hoverinfo">',
                    '<a><strong>', geo.properties.name, '</strong></a><br>',
					'<br>Overall Rank: <br><strong>', data.rank, '</strong><br>',
                    '<br>Overall Score <br>(Out of 100):<br> <strong>', data.porcent, ' %</strong><br>',
					'<br>GDP/Capita: <br><strong>$ ', data.money, '</strong><br>',
					'<br>Million People: <br><strong>', data.people, '</strong><br>',
					'<br>Square Km: <br><strong>', data.people, '</strong><br>',
                    '</div>'].join('');
            }
        }
    })
});
</script>
<script>

var margin = {top: 20, right: 10, bottom: 30, left: 100},
    w = 500 - margin.left - margin.right,
    h = 400 - margin.top - margin.bottom;

var dataset = [
{"title": "HI","score":100,"color":"#7da1c5"},
{"title":"AQ",	"score":78.50,"color":"#b5d61f"},
{"title":"WS","score":100,"color":"#d6811f"},
{"title":"WR","score":95.18,"color":"#d61fa1"},
{"title":"AG","score":65.31,"color":"#d6461f"},
{"title":"FO",	"score":31.35,"color":"#b31561"},
{"title":"BH","score":100,"color":"#15a7b3"},
{"title":"FI", "score":13.40,"color":"#9015b3"},
{"title":"CE","score":62.77,"color":"#214f7d"}
];

var yScale = d3.scale.ordinal()
    .domain([0, d3.max(dataset, function(d){ return d.title; })])
    .rangeRoundBands([h, 0]);

var xScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d){ return d.score; })])
    .range([0, w]);

var svg = d3.select("body").append("svg")
    .attr("width", 1200)
    .attr("height", 500)
	.attr("id", "esta")
  .append("g")
    .attr("transform", "translate(740,110)");

var yScale = d3.scale.ordinal()
    .domain(dataset.map(function(d){ return d.title; }))
    .rangeRoundBands([h, 0]);

var xScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d){ return d.score; })])
    .range([0, w]);

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .innerTickSize(-h)
    .outerTickSize(0);

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .innerTickSize(-w)
    .outerTickSize(0)
    .tickPadding(10);
	
var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
	valor = d3.select(this).attr("valor");
	relleno = d3.select(this).attr("relleno");
    return "<strong>Score:</strong> <span style='color:"+relleno+"'>" + valor + "</span>";
  })
  
            
svg.call(tip);
    
svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + h + ")")
      .call(xAxis)
        .append('text')
  		.attr('dx', w)  
                .attr('x', 15)
                .attr('y', 5)	
  		.style('font-weight','bold')
                .style('','')
		.text('SCORE');

svg.append("g")
     .attr("class", "y axis")
     .call(yAxis)
        .append('text')
            .attr('x',40)
            .attr('y', -15)
            .attr('dy', '.71em')
            .style('text-anchor', 'end')
            .style('font-weight','bold');

var legendWidth  = 390, legendHeight = 110; 
 
var legend = svg.append('g')
    .attr('class', 'legend')
    .attr('transform', 'translate(0,'+ (-legendHeight) +')');

legend.append('rect')
    .attr('class', 'legend-bg')
    .attr('width',  legendWidth)
    .attr('height', legendHeight);

legend.append('text')
    .attr('x', 150)
    .attr('y', 25)
    .attr("font-family", "sans-serif")
    .attr("font-size", "10px")
    .attr("font-weight", "bold")
    .text('NAME OF INDICATOR'); 
    
legend.append('text')
	.attr('x', 0)
	.attr('y', 50)
	.attr("font-family", "sans-serif")
    .attr("font-size", "10px")
	.attr("fill","#7da1c5")
	.attr("font-weight", "bold")
	.text("EALTH IMPACTS (HI)");
	
legend.append('text')
	.attr('x', 150)
	.attr('y', 50)
	.attr("font-family", "sans-serif")
    .attr("font-size", "10px")
	.attr("fill","#b5d61f")
	.attr("font-weight", "bold")
	.text("AIR QUALITY	(AQ)");

legend.append('text')
	.attr('x', 260)
	.attr('y', 50)
	.attr("font-family", "sans-serif")
    .attr("font-size", "10px")
	.attr("fill","#d6811f")
	.attr("font-weight", "bold")
	.text("WATER - SANITATION (WS)");
	
legend.append('text')
	.attr('x', 0)
	.attr('y', 70)
	.attr("font-family", "sans-serif")
    .attr("font-size", "10px")
	.attr("fill","#d61fa1")
	.attr("font-weight", "bold")
	.text("WATER RESOURCES	(WR)");
	
legend.append('text')
	.attr('x', 150)
	.attr('y', 70)
	.attr("font-family", "sans-serif")
    .attr("font-size", "10px")
	.attr("fill","#d6461f")
	.attr("font-weight", "bold")
	.text("AGRICULTURE (AG)");

legend.append('text')
	.attr('x', 260)
	.attr('y', 70)
	.attr("font-family", "sans-serif")
    .attr("font-size", "10px")
	.attr("fill","#b31561")
	.attr("font-weight", "bold")
	.text("FORESTS (FO)");

legend.append('text')
	.attr('x', 0)
	.attr('y', 90)
	.attr("font-family", "sans-serif")
    .attr("font-size", "10px")
	.attr("fill","#15a7b3")
	.attr("font-weight", "bold")
	.text("BIODIVERSITY - HABITAT (BH)");
	
legend.append('text')
	.attr('x', 150)
	.attr('y', 90)
	.attr("font-family", "sans-serif")
    .attr("font-size", "10px")
	.attr("fill","#9015b3")
	.attr("font-weight", "bold")
	.text("FISHERIES (FI)");

legend.append('text')
	.attr('x', 260)
	.attr('y', 90)
	.attr("font-family", "sans-serif")
    .attr("font-size", "10px")
	.attr("fill","#214f7d")
	.attr("font-weight", "bold")
	.text("CLIMATE - ENERGY (CE))");
		
var    xPos = 0,
        yPosStart = h,
        yPosEnd = 0, 
		recta;
		
dataset.forEach(function (d) {
		xPos = xScale(d.score),
        yPosStart = h,
        yPosEnd = yScale(d.title)+20;
		
	var recta = svg.append('g')
			.attr('class', 'score')
			.style("fill", d.color)
			.style("stroke",  d.color)
			.attr('transform', 'translate(' + 0 + ', ' + yPosEnd + ')')
			.attr('opacity', 1);
		
	recta.append('rect')
        .attr('class', 'marker-bg')
		.attr("valor", d.score)
		.attr("relleno", d.color)
        .attr('width', xPos)
        .attr('height', 10)
       // .attr('transform', 'translate(' + 0 + ', ' + 0 + ')')
        .style("cursor", "pointer")
        .style("fill",  d.color)
        .style("stroke",  d.color)
		.on('mouseover', tip.show)
		.on('mouseout', tip.hide); 
  
  
  });
</script>
</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

https://d3js.org/d3.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js