Skip to content

Instantly share code, notes, and snippets.

@sunnyuxuan

sunnyuxuan/2013 tourism expenditure.csv

Last active April 5, 2016 19:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sunnyuxuan/09f5a2af3c49459715592935d7e52953 to your computer and use it in GitHub Desktop.
Save sunnyuxuan/09f5a2af3c49459715592935d7e52953 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
2013 tourism expenditure.csv
CountryName ISO Expenditures Arrivals Receipts
Aruba ABW 340 979 1501
Angola AGO 319 650 1234
Albania ALB 1567 2857 1473
Argentina ARG 8150 5246 4313
Armenia ARM 579 1084 458
Antigua and Barbuda ATG 50 244 322
Australia AUS 34998 6382 31254
Austria AUT 12698 24813 20236
Azerbaijan AZE 3032 2130 2365
Belgium BEL 23981 7684 13426
Bangladesh BGD 1297 148 128
Bulgaria BGR 1755 6897 4059
Bahamas, The BHS 362 1364 2285
Bosnia and Herzegovina BIH 157 529 686
Belarus BLR 1333 137 791
Belize BLZ 42 294 351
Bermuda BMU 322 236 440
Bolivia BOL 507 798 573
Brazil BRA 29361 5813 6704
Bhutan BTN 67 116 83
Canada CAN 35170 16059 17656
Switzerland CHE 17935 8967 16881
Chile CHL 2476 3576 2181
China CHN 138298 55686 51664
Cameroon CMR 795 912 576
Colombia COL 4485 2288 3611
Cabo Verde CPV 126 503 462
Costa Rica CRI 571 2428 2665
Caribbean small states CSS 1795.341996 21145 25382
Curacao CUW 374 441 583
Cyprus CYP 1604 2405 2893
Czech Republic CZE 4655 10300 6993
Germany DEU 105267 31545 41279
Djibouti DJI 30.9 63 22
Dominica DMA 13 86 72
Denmark DNK 10131 8557 6939
Dominican Republic DOM 712 4690 5064
Algeria DZA 482 2733 350
Ecuador ECU 987 1364 1246
Spain ESP 22565 60675 62565
Estonia EST 1170 2873 1398
Finland FIN 6357 2797 4050
Fiji FJI 110 658 719
France FRA 53157 83633 56683
United Kingdom GBR 68094 31064 41028
Georgia GEO 537 2065 1720
Greece GRC 2486 17920 16139
Grenada GRD 11 116 119
Guatemala GTM 950 1331 1481
Guyana GUY 81 200 77
Hong Kong SAR, China HKG 21215 25661 38934
Honduras HND 504 863 608
Croatia HRV 922 10948 9525
Haiti HTI 419 420 568
Hungary HUN 2522 10675 5366
Indonesia IDN 10280 8802 9119
India IND 13840 6968 18397
Ireland IRL 6222 8260 4476
Iceland ISL 850 807 1077
Israel ISR 5176 2962 5668
Italy ITA 33504 47704 43912
Jamaica JAM 380 2008 2074
Japan JPN 32244 10364 15131
Kazakhstan KAZ 2033 4926 1344
Kyrgyz Republic KGZ 505 3076 530
Cambodia KHM 469 4210 2659
St. Kitts and Nevis KNA 16 107 100
Korea, Rep. KOR 24006 12176 14629
Lao PDR LAO 401 2510 596
Lesotho LSO 216 320 39
Lithuania LTU 1149 2012 1467
Luxembourg LUX 3817 945 4849
Latvia LVA 900 1536 864
Macao SAR, China MAC 1819 14268 51796
Morocco MAR 2002 10046 6854
Maldives MDV 246 1125 2333
Mexico MEX 11970 24151 13949
Myanmar MMR 131 1582 1404
Montenegro MNE 81 1324 884
Mongolia MNG 458 418 189
Mozambique MOZ 310 1324 884
Mauritius MUS 456 993 1321
Malaysia MYS 11950 25715 21496
Namibia NAM 128 1176 409
Nicaragua NIC 409 1229 417
Netherlands NLD 20758 12782 13779
Norway NOR 18882 4734 5675
Nepal NPL 594 798 438
New Zealand NZL 3851 2629 7472
Panama PAN 796 1658 3233
Peru PER 2114 3164 3009
Philippines PHL 8400 4681 4690
Palau PLW 18.2 105 112
Poland POL 9414 15800 11297
Puerto Rico PRI 1139 3200 3334
Portugal PRT 4928 8301 12284
Paraguay PRY 425 610 273
Romania ROU 2113 1715 1590
Russian Federation RUS 59504 28356 11988
Rwanda RWA 144 864 294
Sudan SDN 460 591 773
Singapore SGP 24578 11898 19301
Sierra Leone SLE 20 81 59
El Salvador SLV 270 1283 621
Serbia SRB 1290 922 1053
Suriname SUR 75 249 84
Slovenia SVN 1075 2259 2709
Sweden SWE 19944 11139 11544
Swaziland SWZ 96 968 13
Seychelles SYC 61 230 430
Thailand THA 8385 26547 41780
Timor-Leste TLS 57 79 29
Tunisia TUN 768 6269 2191
Turkey TUR 5268 37795 27997
Tuvalu TUV 7.56 1 2
Tanzania TZA 1101 1063 1880
Uganda UGA 592 1206 1180
Ukraine UKR 6300 24671 5083
Uruguay URY 1466 2684 1921
United States USA 136707 69995 172901
St. Vincent and the Grenadines VCT 14 72 97
Vietnam VNM 2050 7572 7250
Vanuatu VUT 43 110 265
Samoa WSM 13.9 116 136
South Africa ZAF 6490 9537 9238
Zambia ZMB 172 915 224
Raw
2013tourism_expenditure.csv
Aruba ABW 340 979 1501
Angola AGO 319 650 1234
Albania ALB 1567 2857 1473
Argentina ARG 8150 5246 4313
Armenia ARM 579 1084 458
Antigua and Barbuda ATG 50 244 322
Australia AUS 34998 6382 31254
Austria AUT 12698 24813 20236
Azerbaijan AZE 3032 2130 2365
Belgium BEL 23981 7684 13426
Bangladesh BGD 1297 148 128
Bulgaria BGR 1755 6897 4059
Bahamas, The BHS 362 1364 2285
Bosnia and Herzegovina BIH 157 529 686
Belarus BLR 1333 137 791
Belize BLZ 42 294 351
Bermuda BMU 322 236 440
Bolivia BOL 507 798 573
Brazil BRA 29361 5813 6704
Bhutan BTN 67 116 83
Canada CAN 35170 16059 17656
Switzerland CHE 17935 8967 16881
Chile CHL 2476 3576 2181
China CHN 138298 55686 51664
Cameroon CMR 795 912 576
Colombia COL 4485 2288 3611
Cabo Verde CPV 126 503 462
Costa Rica CRI 571 2428 2665
Caribbean small states CSS 1795.341996 21145 25382
Curacao CUW 374 441 583
Cyprus CYP 1604 2405 2893
Czech Republic CZE 4655 10300 6993
Germany DEU 105267 31545 41279
Djibouti DJI 30.9 63 22
Dominica DMA 13 86 72
Denmark DNK 10131 8557 6939
Dominican Republic DOM 712 4690 5064
Algeria DZA 482 2733 350
Ecuador ECU 987 1364 1246
Spain ESP 22565 60675 62565
Estonia EST 1170 2873 1398
Finland FIN 6357 2797 4050
Fiji FJI 110 658 719
France FRA 53157 83633 56683
United Kingdom GBR 68094 31064 41028
Georgia GEO 537 2065 1720
Greece GRC 2486 17920 16139
Grenada GRD 11 116 119
Guatemala GTM 950 1331 1481
Guyana GUY 81 200 77
Hong Kong SAR, China HKG 21215 25661 38934
Honduras HND 504 863 608
Croatia HRV 922 10948 9525
Haiti HTI 419 420 568
Hungary HUN 2522 10675 5366
Indonesia IDN 10280 8802 9119
India IND 13840 6968 18397
Ireland IRL 6222 8260 4476
Iceland ISL 850 807 1077
Israel ISR 5176 2962 5668
Italy ITA 33504 47704 43912
Jamaica JAM 380 2008 2074
Japan JPN 32244 10364 15131
Kazakhstan KAZ 2033 4926 1344
Kyrgyz Republic KGZ 505 3076 530
Cambodia KHM 469 4210 2659
St. Kitts and Nevis KNA 16 107 100
Korea, Rep. KOR 24006 12176 14629
Lao PDR LAO 401 2510 596
Lesotho LSO 216 320 39
Lithuania LTU 1149 2012 1467
Luxembourg LUX 3817 945 4849
Latvia LVA 900 1536 864
Macao SAR, China MAC 1819 14268 51796
Morocco MAR 2002 10046 6854
Maldives MDV 246 1125 2333
Mexico MEX 11970 24151 13949
Myanmar MMR 131 1582 1404
Montenegro MNE 81 1324 884
Mongolia MNG 458 418 189
Mozambique MOZ 310 1324 884
Mauritius MUS 456 993 1321
Malaysia MYS 11950 25715 21496
Namibia NAM 128 1176 409
Nicaragua NIC 409 1229 417
Netherlands NLD 20758 12782 13779
Norway NOR 18882 4734 5675
Nepal NPL 594 798 438
New Zealand NZL 3851 2629 7472
Panama PAN 796 1658 3233
Peru PER 2114 3164 3009
Philippines PHL 8400 4681 4690
Palau PLW 18.2 105 112
Poland POL 9414 15800 11297
Puerto Rico PRI 1139 3200 3334
Portugal PRT 4928 8301 12284
Paraguay PRY 425 610 273
Romania ROU 2113 1715 1590
Russian Federation RUS 59504 28356 11988
Rwanda RWA 144 864 294
Sudan SDN 460 591 773
Singapore SGP 24578 11898 19301
Sierra Leone SLE 20 81 59
El Salvador SLV 270 1283 621
Serbia SRB 1290 922 1053
Suriname SUR 75 249 84
Slovenia SVN 1075 2259 2709
Sweden SWE 19944 11139 11544
Swaziland SWZ 96 968 13
Seychelles SYC 61 230 430
Thailand THA 8385 26547 41780
Timor-Leste TLS 57 79 29
Tunisia TUN 768 6269 2191
Turkey TUR 5268 37795 27997
Tuvalu TUV 7.56 1 2
Tanzania TZA 1101 1063 1880
Uganda UGA 592 1206 1180
Ukraine UKR 6300 24671 5083
Uruguay URY 1466 2684 1921
United States USA 136707 69995 172901
St. Vincent and the Grenadines VCT 14 72 97
Vietnam VNM 2050 7572 7250
Vanuatu VUT 43 110 265
Samoa WSM 13.9 116 136
South Africa ZAF 6490 9537 9238
Zambia ZMB 172 915 224
Display the source blob
Display the rendered blob
Raw
countries.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
Homework week 11
International tourism map
Raw
index.html
<!DOCTYPE html>
<!-- This map code and design were inspired by the tutorial in Flowing Data: http://flowingdata.com/2015/02/19/make-an-interactive-map-with-category-filters/ -->
<head>
<title>International Tourism Trend</title>
<link rel="stylesheet" href="world_comparisons.css" type="text/css" media="screen" />
</head>
<div id="main-wrapper">
<h2>International Tourism Trend</h2>
<p>According to The World Tourism Organization (UNWTO), International tourist arrivals (overnight visitors) increased by 4.3% in 2014, reaching a total 1133 million after topping the 1 billion mark in 2012.</p>
<p> France, the United States, Spain and China continue to top the rankings by both international arrivals and receipts. Mexico re-entered the Top 10 by arrivals at position 10. By receipts, China and the United
Kingdom both moved up two places, to 3 and 7 respectively.</p>
<p>China, the top tourism source market in the world, has continued its exceptional pace of growth, increasing expenditure abroad by 27% in 2014 to reach a total of US$ 165 billion.</p>
<p>Source: <a href="http://beta.data.worldbank.org/?indicators=ST.INT.XPND.CD&view=map&year=2010">The World Bank </a> and <a href="http://mkt.unwto.org/publication/unwto-tourism-highlights-2015-edition">UNWTO</a></p>
<div id="metrics">
<div id="income">
<ul class="metrics_button">
<li data-metric="expend" class="selected expend">International Tourism Expenditures</li>
<li data-metric="arrivals" class="arrivals">International Tourist Arrivals</li>
<li data-metric="receipts" class="receipts">International Tourism Receipts</li>
</ul>
</div>
</div>
<div class="clr"></div>
<div id="tooltip" class="tooltip">
<h3 class="name"></h3>
<div data-metric="expend" class="line">
<div class="expend symbol"></div>Expenditures ($US million)
<div class="expend val"></div>
</div>
<div data-metric="arrivals" class="line">
<div class="arrivals symbol"></div>Arrivals (million)
<div class="arrivals val"></div>
</div>
<div data-metric="receipts" class="line">
<div class="receipts symbol"></div>Receipts ($US million)
<div class="receipts val"></div>
</div>
</div>
<div id="vis"></div>
</div><!-- @end #main-wrapper -->
<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="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.js"></script>
<script>
var width = 1000,
height = 700,
center = [width / 2, height / 2],
defaultFill = "#e0e0e0";
var baseColors = {
"expend": d3.scale.linear().range(["#c2f0c2", "#196619"]).interpolate(d3.interpolateLab),
"arrivals": d3.scale.linear().range(["#f0b3ff", "#8f00b3"]).interpolate(d3.interpolateLab),
"receipts": d3.scale.linear().range(["#cce0ff", "#0052cc"]).interpolate(d3.interpolateLab),
};
var countryById = d3.map(); // will have id's as keys for countries; see typeAndSet()
var projection = d3.geo.mercator()
.scale(160)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var zoom = d3.behavior.zoom()
.scaleExtent([1, 9])
.on("zoom", move);
var svg = d3.select("#vis").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.call(zoom);
svg.on("wheel.zoom", null);
svg.on("mousewheel.zoom", null);
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height);
svg.append("image")
.attr("xlink:href", "progress-anim.gif")
.attr("id", "progress-image")
.attr("width", 43)
.attr("height", 11)
.attr("x", width / 2)
.attr("y", height / 2);
var g = svg.append("g");
var tooltip = d3.select("#tooltip")
.attr("class", "tooltip")
.style("opacity", 0);
var CURR_SELECT = "expend";
queue()
.defer(d3.json, "countries.json")
.defer(d3.csv, "2013tourism_expenditure.csv", typeAndSet)
.await(ready);
function ready(error, world, tourism) {
console.log(error, world, tourism);
var domExpend = d3.extent(tourism, function(d) {return d.expend;});
var domArrivals = d3.extent(tourism, function(d) {return d.arrivals;});
var domReceipt = d3.extent(tourism, function(d) {return d.receipts;});
baseColors["expend"].domain(domExpend);
baseColors["arrivals"].domain(domArrivals);
baseColors["receipts"].domain(domReceipt);
g.append("g")
.attr("class", "countries")
.selectAll("path")
.data(topojson.feature(world, world.objects.units).features)
.enter()
.append("path")
.attr("d", path)
.on("mouseover", mouseover)
.on("mouseout", function() {
d3.select(this).classed("selected", false);
tooltip.transition().duration(300)
.style("opacity", 0);
});
updateFill();
d3.selectAll("#metrics li")
.on("click", function() {
var item = d3.select(this);
d3.selectAll(".metrics_button li").classed("selected", false);
CURR_SELECT = item.attr("data-metric");
item.classed("selected", true);
item.classed(item.attr("data-metric"), true);
updateFill();
});
make_buttons(); // create the zoom buttons
svg.select("#progress-image").remove(); // remove animation for loading
} // end function ready
function make_buttons() {
// Zoom buttons actually manually constructed, not images
svg.selectAll(".scalebutton")
.data(['zoom_in', 'zoom_out'])
.enter()
.append("g")
.attr("id", function(d){return d;}) // id is the zoom_in and zoom_out
.attr("class", "scalebutton")
.attr({x: 20, width: 20, height: 20})
.append("rect")
.attr("y", function(d,i) { return 20 + 25*i })
.attr({x: 20, width: 20, height: 20})
// Plus button
svg.select("#zoom_in")
.append("line")
.attr({x1: 25, y1: 30, x2: 35, y2: 30 })
.attr("stroke", "#fff")
.attr("stroke-width", "2px");
svg.select("#zoom_in")
.append("line")
.attr({x1: 30, y1: 25, x2: 30, y2: 35 })
.attr("stroke", "#fff")
.attr("stroke-width", "2px");
// Minus button
svg.select("#zoom_out")
.append("line")
.attr({x1: 25, y1: 55, x2: 35, y2: 55 })
.attr("stroke", "#fff")
.attr("stroke-width", "2px");
svg.selectAll(".scalebutton")
.on("click", function() {
d3.event.preventDefault();
var scale = zoom.scale(),
extent = zoom.scaleExtent(),
translate = zoom.translate(),
x = translate[0], y = translate[1],
factor = (this.id === 'zoom_in') ? 2 : 1/2,
target_scale = scale * factor;
var clamped_target_scale = Math.max(extent[0], Math.min(extent[1], target_scale));
if (clamped_target_scale != target_scale){
target_scale = clamped_target_scale;
factor = target_scale / scale;
}
// Center each vector, stretch, then put back
x = (x - center[0]) * factor + center[0];
y = (y - center[1]) * factor + center[1];
// Transition to the new view over 350ms
d3.transition().duration(350).tween("zoom", function () {
var interpolate_scale = d3.interpolate(scale, target_scale),
interpolate_trans = d3.interpolate(translate, [x,y]);
return function (t) {
zoom.scale(interpolate_scale(t))
.translate(interpolate_trans(t));
svg.call(zoom.event);
};
});
});
}
function mouseover(d){
d3.select(this).classed("selected", true);
d3.select(this).moveToFront();
tooltip.transition().duration(100)
.style("opacity", 1);
tooltip
.style("top", (d3.event.pageY - 10) + "px" )
.style("left", (d3.event.pageX + 10) + "px");
tooltip.selectAll(".symbol").style("opacity", "0");
tooltip.selectAll(".val").style("font-weight", "normal");
tooltip.selectAll(".val").style("color", "darkgray");
tooltip.select(".symbol." + CURR_SELECT).style("opacity", "1");
tooltip.select(".val." + CURR_SELECT).style({
"font-weight": "bolder",
"color": "black"
});
if (countryById.get(d.id) && countryById.get(d.id)[CURR_SELECT]) {
tooltip.select(".name").text(countryById.get(d.id)['CountryName'] + "(Year2013)");
tooltip.select(".expend.val").text(d3.round(countryById.get(d.id)["expend"]));
tooltip.select(".arrivals.val").text(d3.round(countryById.get(d.id)["arrivals"]));
tooltip.select(".receipts.val").text(d3.round(countryById.get(d.id)["receipts"]));
} else {
tooltip.select(".name").text("No data for " + d.properties.name);
tooltip.select(".expend.val").text("NA");
tooltip.select(".arrivals.val").text("NA");
tooltip.select(".receipts.val").text("NA");
}
} // end mouseover
function typeAndSet(d) {
d.expend = +d.Expenditures;
d.arrivals = +d.Arrivals;
d.receipts = +d.Receipts;
countryById.set(d.ISO, d); // this is a d3.map, being given a key, value pair.
return d;
}
function updateFill() {
svg.selectAll(".countries path")
.attr("fill", function(d) { return colorByCurrent(d.id) });
}
function colorByCurrent(FIPS) {
var countryObject = countryById.get(FIPS);
if ((typeof(countryObject) !== "undefined") && (countryObject[CURR_SELECT])) {
return baseColors[CURR_SELECT](countryObject[CURR_SELECT]);
}
else if (typeof(countryObject) == "undefined") {
return "#ccc";
} else if (!countryObject[CURR_SELECT]) {
return "#ccc";
}
}
d3.selection.prototype.moveToFront = function() {
return this.each(function(){
this.parentNode.appendChild(this);
});
};
function zoomIn() {
zoom.scale(zoom.scale()*2);
move();
}
function move() {
var t = d3.event.translate,
s = d3.event.scale;
t[0] = Math.min(width * (s - 1), Math.max(width * (1 - s), t[0]));
t[1] = Math.min(height * (s - 1), Math.max(height * (1 - s), t[1]));
zoom.translate(t);
g.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ")scale(" + s + ")");
}
</script>
Raw
world_comparisons.css
/* A lot of this CSS is inherited from the Flowing Data tutorial:
http://flowingdata.com/2015/02/19/make-an-interactive-map-with-category-filters/;
*/
body {
margin: 0;
padding: 0;
font-family: Helvetica, sans-serif;
}
#main-wrapper {
width: 1000px;
padding: 50px;
}
#metrics { width: 920px; margin: 20px auto 15px 0; font-family: Helvetica, sans-serif; }
#metrics h3 { font-size: 13px; font-family: Helvetica, sans-serif; text-align: center; margin-bottom: 0; }
#metrics ul { font-size: 12px; font-family: Helvetica, sans-serif; margin-left: 0; padding: 0; }
#metrics ul li {
list-style: none;
margin: 10px 10px 0 0;
padding: 2px 0;
display: inline-block;
width: 139px;
cursor: pointer;
text-align: center;
font-size: 14px;
}
#metrics ul li.bottom { margin-bottom: 0; }
#metrics #income { width: 461px; float: left; margin-right: 15px; }
#metrics #location { width: 250px; float: left; padding-left: 5px; }
#metrics .block-button { width: 80px; display: block; float:left; clear:both; }
.tooltip {
position: absolute;
z-index: 10;
text-align: left;
width: 170px;
padding: 10px;
font-size: 10px;
font-family: Helvetica, sans-serif;
background: #ffffff;
pointer-events: none;
opacity: 0;
}
.tooltip h3 {
font-size: 12px; margin: 0 0 7px 0;
line-height: 1.2em;
}
div.tooltip .line { clear: both; margin-top: 3px; font-size: 11px; }
div.tooltip .symbol { float: left; width: 6px; height: 6px; margin: 3px 4px 0 0; }
div.tooltip .val { float: right; width: 25px; text-align: center; margin-right: 4px; background: none; }
.overlay {
fill: none;
pointer-events: all;
}
.button {
fill: #000;
}
.scalebutton {
cursor: pointer;
}
.countries {
stroke: #fff;
stroke-linejoin: round;
}
.countries path.selected {
stroke: #000;
stroke-width: 0.5px;
}
path.expend, #metrics ul li.selected.expend, .tooltip .expend {color:white; background: #85e085;}
path.arrivals, #metrics ul li.selected.arrivals, .tooltip .arrivals {color:white; background: #e066ff;}
path.receipts, #metrics ul li.selected.receipts, .tooltip .receipts {color:white; background: #8080ff;}
.clr { clear: both; }
#vis {
padding: 25px;
display: inline-block;
}
.legendColors text {
font-size: .8em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment