Create a gist now

Instantly share code, notes, and snippets.

@neelsmith /README.md
Last active Aug 29, 2015

What would you like to do?
Athenian Tribute Quota payments

Athenian Tribute quota payments: extant records

The Athenian Tribute Quota Lists

In the fifth century B.C., members of the "League of the Greeks" paid annual tribute to Athens. The Athenian Tribute Quota lists are a series of fragmentarily preserved inscriptions recording the proportion of that payment (1/60) that was handed over to the Treasurers of Athena.

Interaction

  • Hover over a site to see its name.
  • Select a year to see what states appear in surviving records for a give year.

The data set

The data about payment of tribute is automatically generated from electronic editions by Christine Bannan created as part of the Phoros project. Longitude-latitude coordinates are automatically harvested from the Pleiades project. Sites with unknown modern location are not included in this display.

(Yes, it is correct that there are no extant records for year 6.)

Links

Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8"/>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<style>
svg { fill : #ddd; }
.allSites {
fill : #999;
stroke: black;
stroke-width: "2"
}
.tooltip{
background-color: rgba(120,120,120,0.5);
color: #333;
margin: 10px;
height: 25px;
width: 200px;
padding-left: 10px;
padding-top: 10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
</style>
</head>
<body>
<header role="banner">
<nav role="navigation">
</nav>
</header>
<article role="main">
<form>
<label for="year">Select year:</label>
<select id="year">
<option>--choose a year--</option>
<option value="year_1">1</option>
<option value="year_2">2</option>
<option value="year_3">3</option>
<option value="year_4">4</option>
<option value="year_5">5</option>
<option value="year_6">6</option>
<option value="year_7">7</option>
<option value="year_8">8</option>
</select>
</form>
<script>
// All these globals should be placed in an 'app' object
// for namespacing ...
// The point data set, in geojson format:
var geoj
// The svg object to draw with:
var svg
var width = 1000,
height = 600;
var key = function(s) {
return s.properties.urn;
}
var proj = d3.geo.mercator()
.center([27,38.5])
.scale([3200])
;
var path = d3.geo.path()
.projection(proj)
.pointRadius(2)
;
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.text("a simple tooltip")
.attr("class","tooltip");
var buildPage = function(error, greece,lls) {
svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var coast = topojson.feature(greece, greece.objects.aegean);
svg.append("path")
.datum(coast)
.attr("d",path)
geoj = lls;
svg.selectAll(".allSites")
.data(geoj.features, key)
.enter()
.insert("a")
.attr("xlink:href",function(s){
return("http://beta.hpcc.uh.edu/tomcat/phoros/site.html?urn=" + s.properties.urn);
})
.append("path")
.attr("d",path)
.attr("class", "allSites")
.on("mouseover", function(s){
/* Add test here and set color based on year */
tooltip.text(s.properties.siteName);
return tooltip.style("visibility", "visible");
})
.on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");});
}
queue()
.defer(d3.json, "aegean.topojson")
.defer(d3.json,"phorosall.geojson")
.await(buildPage);
d3.select("#year").on("change", change)
function change() {
var yrStr = this.options[this.selectedIndex].value;
var sites = svg.selectAll(".allSites")
.data(geoj.features,key);
sites
.transition(8000)
.style("stroke-width",function(d){
if (d.properties[yrStr] !== undefined) {
return 8;
} else {
return 1;
}
})
.style("fill-opacity",function(d) {
if (d.properties[yrStr] !== undefined) {
return 1.0;
} else {
return 0.5;
}
})
.style("stroke",function(d) {
if (d.properties[yrStr] !== undefined) {
return "green";
} else {
return "#ffa500";
}
});
sites
.enter();
}
</script>
</article>
</body>
</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment