Effectiveness
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.
xxxxxxxxxx
<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>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="datamaps.world.min.js"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
</head>
<body>
<div id="container1" style="border:1px dotted blue; width: 700px; height: 500px; position: absolute;"></div>
<script>
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