Skip to content

Instantly share code, notes, and snippets.

@HermanniB

HermanniB/balticcontainers2.csv

Created March 31, 2015 14:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save HermanniB/20b9c13e833709b8ca1c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save HermanniB/20b9c13e833709b8ca1c to your computer and use it in GitHub Desktop.
Download ZIP
20b9c13e833709b8ca1c
Raw
balticcontainers2.csv
Country 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013
Denmark 380000 430000 480000 487000 489000 499000 522000 538000 614000 684000 790000 747000 637000 734000 782000 763000 747000
Estonia 54585 55472 65535 76692 78072 88984 100875 141157 128634 153004 182328 182065 131278 152060 198193 228032 253900
Finland 758678 738609 731897 882978 975301 1062453 1124912 1129199 1300236 1393690 1554176 1594686 1104755 1219575 1398630 1449596 1472143
Germany 5246129 5486496 6200000 7172675 7913021 8699356 9568885 10822400 12100830 13801570 15257000 15667000 11915000 13096000 15271000 15325000 15552000
Latvia 96169 92164 66548 67985 76039 85098 112339 117873 122321 149930 175616 167491 145415 208508 246590 366824 385665
Lithuania 36736 32331 28678 39955 51675 71609 118366 174242 214322 231603 321432 373263 247995 295226 382194 381371 402733
Poland 185087 218344 158015 168533 191177 217509 269485 347812 396537 455829 576336 635387 660594 1041690 1330746 1648886 1975030
Russian Federation 0 0 0 0 0 0 0 0 0 0 0 2486200 1786500 2454800 3028300 3371000 3500900
Sweden 639479 633109 691576 732934 715374 788766 767004 853048 925235 995644 1087072 1081549 996444 1071238 1165087 1150775 1147065
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Baltic Container Traffic</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: white;
}
svg {
background-color: white;
}
</style>
</head>
<body>
<p>
<svg width="220" height="190">
<polygon points="62,1 147,43 105,64 21,21" fill="indianred" />
<polygon points="21,21 21,72 105,114 105,64 " fill="darkred" />
<polygon points="105,114 105,64 147,43 147,93 " fill="red" />
<text x="1" y="130" fill="indigo" font-size="14" font-weight="bold"
font-family="Helvetica">TRANSPORT OF CONTAINERS </text>
<text x="1" y="150" fill="indigo" font-size="14" font-weight="bold"
font-family="Helvetica">BALTIC SEA COUNTRIES 2013 </text>
<text x="1" y="170" fill="indigo" font-size="10" font-weight="bold"
font-family="Helvetica">volume in TEU carried by sea </text>
<text x="1" y="182" fill="indigo" font-size="10" font-weight="bold"
font-family="Helvetica">OECD and national statistics </text>
</svg>
</p>
<p>
<script type="text/javascript">
var svg = d3.select("body")
.append("svg")
.attr("width", 400)
.attr("height", 100);
d3.csv
("balticcontainers2.csv", function(data)
{data.sort(function(a, b) {return d3.descending(+a["2013"], +b["2013"]);});
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", 0)
.attr(
"y", function(d, i)
{return i * 10;}
)
.attr("width", function(d)
{return d["2013"] / 100000 * 1.33;}
)
.attr("height", 8)
.attr("fill", "indianred")
.append("title")
.text(function(d)
{return d.Country + "'s container traffic in 2013 was " + d["2013"] + " TEU";}
);
}
);
</script>
</p>
</body>
</html>
@HermanniB
Copy link
Author

HermanniB commented Mar 31, 2015

This is a d3 illustration test using data on total sea container traffic volumes (TEU) of countries around the Baltic Sea in 2013. Based on statistics from OECD and national statistics services.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment