Skip to content

Instantly share code, notes, and snippets.

@baderone

baderone/README.md

Last active September 16, 2015 05:34
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 baderone/6656e4e036e127db1606 to your computer and use it in GitHub Desktop.
Save baderone/6656e4e036e127db1606 to your computer and use it in GitHub Desktop.
Download ZIP
The longer the journey, the shorter the stay?
Raw
README.md

Scatterplot from the top 15 countries of origin of tourists in Grisons, Switzerland in June 2015. The Scatterplot shows the relation of travel distance and lenght of stay. The chart shows that tourists from Australia stay 1.5 nights in average whereas tourist from Belgium stay more than 6 nights in average.

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Transition Delays</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
body {
background-color: ghostwhite;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: ghostwhite;
}
circle:hover {
fill: orange;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<p> Average distance of countries of origin to Grisons, Switzerland in relation to the lenght of stay <br>Source: <a href="http://www.bfs.admin.ch/bfs/portal/de/index/themen/10.html">BFS Schweiz</a>, 2015</p>
<script type="text/javascript">
var w = 600;
var h = 450;
var padding = [ 20, 10, 50, 50 ]; //Top, right, bottom, left
var xScale = d3.scale.linear()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(15);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("swiss tourism5.csv", function(data) {
xScale.domain([
d3.min(data, function(d) {
return +d.grisonsduration;
}),
d3.max(data, function(d) {
return +d.grisonsduration;
})
]);
yScale.domain([
d3.max(data, function(d) {
return +d.distance;
}),
d3.min(data, function(d) {
return +d.distance;
})
]);
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle");
circles.attr("cx", function(d) {
return xScale(d.grisonsduration);
})
.attr("cy", function(d) {
return yScale(d.distance);
})
.attr("r", 0.1)
.attr("fill", "green")
.append("title")
.text(function(d) {
return "Average distance from " + d.countryoforigin + " is " + d.distance + "km, and the average duration of stay are " + d.grisonsduration + " nights";
});
circles.sort(function(a, b) {
return d3.ascending(+a.distance, +b.distance);
})
.transition()
.delay(function(d, i) {
return i * 50;
})
.duration(1500)
.attr("r", 5);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3] - 10) + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Raw
swiss tourism5.csv
id countryoforigin time distance grisonsarrival grisonsnights grisonsduration lucernearrivals lucernenights lucerneduration bernesealpsarrivals bernesealpsnights bernesealpsduration tessinarrivals tessinnights tessinduration bernarrivals bernnights bernduration zuricharrivals zurichnights zurichduration baselarrivals baselnights baselduration genevaarrivals genevanights genevaduration
mod4 Switzerland June15 100 70784 151242 2.0999999 77933 133195 1.7 67316 128828 1.9 67154 146375 2.2 30969 49892 1.6 98820 159424 1.6 28628 46419 1.6 26718 51478 1.9
mod4 Germany June15 688 20131 58572 2.9000001 15088 31836 2.0999999 8071 21941 2.7 9458 24377 2.5999999 6658 12343 1.9 35769 61732 1.7 11578 20780 1.8 5233 9570 1.8
mod4 United States June15 6762 4210 7916 1.9 20797 39744 1.9 13199 30207 2.3 3725 8473 2.3 2713 5354 2 28756 53402 1.9 6006 17132 2.9000001 12301 28378 2.3
mod4 UK June15 873 4737 11650 2.5 6586 13939 2.0999999 9433 31983 3.4000001 2382 5588 2.3 1348 2396 1.8 18275 30553 1.7 5243 10908 2.0999999 12258 22243 1.8
mod4 China June15 7980 907 1144 1.3 40522 44705 1.1 26019 32085 1.2 1936 2712 1.4 2791 3318 1.2 19242 24957 1.3 1321 2235 1.7 6701 10450 1.6
mod4 India June15 6098 533 886 1.7 15831 36439 2.3 9422 22521 2.4000001 1194 2032 1.7 304 646 2.0999999 18268 37531 2.0999999 714 2039 2.9000001 1999 5216 2.5999999
mod4 France June15 581 1213 1872 1.5 2150 3813 1.8 1895 3445 1.8 1986 3673 1.8 1162 1869 1.6 7932 12661 1.6 4307 7612 1.8 11428 18391 1.6
mod4 Italy June15 599 2189 4961 2.3 2551 4162 1.6 1462 2297 1.6 7986 13346 1.7 916 1711 1.9 6700 12252 1.8 2851 5382 1.9 3522 6253 1.8
mod4 Japan June15 9601 3551 5862 1.7 1246 1765 1.4 9446 14795 1.6 297 692 2.3 1365 1785 1.3 5204 7603 1.5 598 1384 2.3 2380 5668 2.4000001
mod4 the Netherlands June15 699 1717 6193 3.5999999 3365 5304 1.6 1590 4270 2.7 1799 3589 2 527 866 1.6 3921 6925 1.8 1722 2902 1.7 2124 3842 1.8
mod4 Belgium June15 584 1410 8788 6.1999998 1875 3189 1.7 491 1622 3.3 1557 2522 1.6 345 589 1.7 2047 3478 1.7 1272 2374 1.9 2510 4497 1.8
mod4 Austria June15 537 1721 3784 2.2 1591 3223 2 773 1630 2.0999999 1048 2637 2.5 677 1333 2 5799 10114 1.7 1017 2267 2.2 734 1424 1.9
mod4 Spain June15 1283 297 549 1.8 896 1907 2.0999999 866 1586 1.8 593 1480 2.5 664 1259 1.9 6566 11210 1.7 1068 2538 2.4000001 4043 7291 1.8
mod4 Australia June15 16503 1164 1709 1.5 4573 8855 1.9 1626 3947 2.4000001 597 1356 2.3 365 699 1.9 4425 8770 2 486 1047 2.2 1561 3849 2.5
mod4 South Korea June15 8780 108 146 1.4 3266 4474 1.4 10367 13674 1.3 226 340 1.5 727 981 1.3 2517 3497 1.4 463 879 1.9 622 1357 2.2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment