-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
134 lines (114 loc) · 4.62 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styles/normalize.css" media="all">
<link rel="stylesheet" type="text/css" href="styles/themes.css" media="all">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="scripts/topojson.min.js"></script>
<script src="scripts/datamaps.world.min.js"></script>
<script type="text/javascript">
d3.json("data/countries_2013.json", function(error, countries2013) {
//creates an object with the iso2 country name and an array with the Advancement Level and the "number" which is a placeholder for Goods
var countries = {};
var getCountries = function(countries2013) {
for (var item in countries2013) {
// create the ISO3 key
var country = countries2013[item].ISO3;
// create an object for each country under it's ISO3
countries[country] = {};
// get the name of each country to display on hover
countries[country] = {'iso': countries2013[item].ISO3, 'name': countries2013[item].Name};
if (countries2013[item].Advancement_Level && countries2013[item].Advancement_Level !== '') {
// get the fillKey value for each country to change it's color based on the advancement level
countries[country].fillKey = countries2013[item].Advancement_Level;
// get the advancement level for each country
countries[country].advancementLevel = countries2013[item].Advancement_Level;
}
countries[country].goods = [];
for (var k in countries2013[item].Goods) {
if (countries2013[item].Goods && countries2013[item].Goods.length > 0) {
// get the information for each good and store it as an object within the goods array
var good = {};
good = {'name': countries2013[item].Goods[k].Good_Name,
'good-sector': countries2013[item].Goods[k].Good_Sector,
'child-labor': countries2013[item].Goods[k].Child_Labor,
'forced-labor': countries2013[item].Goods[k].Forced_Labor,
'forced-child-labor': countries2013[item].Goods[k].Forced_Child_Labor,
'icon': 'design/icon-sets/' + countries2013[item].Goods[k].Good_Name + '.png'};
countries[country].goods.push(good);
}
}
}
};
getCountries(countries2013);
console.log(countries);
// sets up the map
var basic = new Datamap({
element: document.getElementById("basic"),
scope: 'world',
projection: 'mercator',
responsive: true,
fills: { // colors used to highlight countries based on their advancement level
'Significant Advancement': '#ABDDA4',
'Moderate Advancement': '#c8dda4',
'Minimal Advancement': '#ECE671',
'No Advancement': '#DC9595',
'No Assessment': '#DDDDDD',
defaultFill: '#DDDDDD'
},
data: countries, // set the map's data to our data object
geographyConfig: {
popupTemplate: function(data) {
var countrySelected = data.id; // get the data.id for the country hovered over
var selectedKey = '';
for (var j in countries) {
if (countries[j].iso === countrySelected) {
selectedKey = countries[j];
}
}
if (selectedKey !== '') {
var numberGoods; // Number of goods if greater than 0
if (selectedKey.goods && selectedKey.goods.length > 0) {
numberGoods = selectedKey.goods.length;
} else {
numberGoods = 0;
}
var goodsNames = ''; // Goods names for now
var goodsIcons = '';
if (numberGoods > 0) {
for (var l in selectedKey.goods) {
goodsIcons = goodsIcons + '<img src="' + selectedKey.goods[l].icon + '" class="hover-icon" />';
}
} else {
goodsIcons = '<p><strong>There is no data available about goods produced.</strong></p>';
}
return '<div class="hoverinfo"><h2>' + selectedKey.name + '</h2><br />' + goodsIcons + '</div>';
} else {
return '<div class="hoverinfo"><h2>' + data.properties.name + '</h2><p><strong>No Assessment</strong></p></div>';
}
}
}
});
// display the legend
basic.legend();
// resizes the map as the window is resized
d3.select(window).on('resize', function() {
basic.resize();
});
});
</script>
</head>
<body>
<header>
<h1>Visualizing Forced Labor and Child Labor</h1> <!-- Working title -->
</header>
<div id="map" style="height:890px;">
<div id="basic"></div>
</div>
<footer>
<p><small>Data from the <a href="http://www.dol.gov">Department of Labor's</a> <a href="http://www.dol.gov/ilab/">Bureau of International Labor Affairs (ILAB)</a> <a href="../data/countries2013.json">Download This Data</a><small></p> <!-- Basic requirement part, can be moved -->
</footer>
</body>
</html>