228 lines
7.8 KiB
HTML
228 lines
7.8 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
|
|
<title>Renaissance Artists and Authors Example</title>
|
|
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAASI0kCI-azC8RgbOZzWc3VRRarOQe_TKf_51Omf6UUSOFm7EABRRhO0PO4nBAO9FCmVDuowVwROLo3w"
|
|
type="text/javascript"></script>
|
|
<script type="text/javascript" src="../lib/jquery-1.6.2.min.js"></script>
|
|
<script type="text/javascript" src="../lib/mxn/mxn.js?(google)"></script>
|
|
<script type="text/javascript" src="../lib/timeline-2.3.0.js"></script>
|
|
<script src="../lib/json2.pack.js" type="text/javascript"></script>
|
|
<script src="../src/timemap.js" type="text/javascript"></script>
|
|
<script src="../src/loaders/json.js" type="text/javascript"></script>
|
|
<script src="../src/loaders/metaweb.js" type="text/javascript"></script>
|
|
<script src="../src/manipulation.js" type="text/javascript"></script>
|
|
<script type="text/javascript">
|
|
|
|
var tm;
|
|
|
|
$(function() {
|
|
|
|
// These two queries are in the Metaweb Query Language syntax.
|
|
// See http://www.freebase.com/view/freebase/api for more details.
|
|
var artistQuery = [
|
|
{
|
|
"/common/topic/image" : {
|
|
"limit" : 1,
|
|
"id" : null,
|
|
"optional" : true
|
|
},
|
|
"limit":15,
|
|
"/people/deceased_person/date_of_death" : null,
|
|
"/people/person/date_of_birth" : null,
|
|
"/people/person/date_of_birth<" : "1700",
|
|
"/people/person/date_of_birth>" : "1440",
|
|
"/people/person/place_of_birth" : {
|
|
"geolocation" : {
|
|
"latitude" : null,
|
|
"longitude" : null
|
|
},
|
|
"name" : null
|
|
},
|
|
"name" : null,
|
|
"type" : "/visual_art/visual_artist"
|
|
}
|
|
];
|
|
|
|
var authorQuery = [
|
|
{
|
|
"/common/topic/image" : {
|
|
"limit" : 1,
|
|
"id" : null,
|
|
"optional" : true
|
|
},
|
|
"limit":15,
|
|
"/people/deceased_person/date_of_death" : null,
|
|
"/people/person/date_of_birth" : null,
|
|
"/people/person/date_of_birth<" : "1700",
|
|
"/people/person/date_of_birth>" : "1440",
|
|
"/people/person/place_of_birth" : {
|
|
"geolocation" : {
|
|
"latitude" : null,
|
|
"longitude" : null
|
|
},
|
|
"name" : null
|
|
},
|
|
"name" : null,
|
|
"type" : "/book/author"
|
|
}
|
|
];
|
|
|
|
// this is necessary for the old-style duration tape
|
|
var theme = Timeline.ClassicTheme.create();
|
|
theme.event.track.gap = -8;
|
|
theme.event.tape.height = 16;
|
|
|
|
tm = TimeMap.init({
|
|
mapId: "map", // Id of map div element (required)
|
|
timelineId: "timeline", // Id of timeline div element (required)
|
|
datasets: [
|
|
{
|
|
id: "artists",
|
|
title: "Artists",
|
|
theme: "green",
|
|
type: "metaweb", // Data to be loaded from freebase.com
|
|
options: {
|
|
query: artistQuery,
|
|
transformFunction: transformPersonData,
|
|
classicTape: true
|
|
}
|
|
},
|
|
{
|
|
id: "authors",
|
|
title: "Authors",
|
|
theme: "red",
|
|
type: "metaweb", // Data to be loaded from freebase.com
|
|
options: {
|
|
query: authorQuery,
|
|
transformFunction: transformPersonData,
|
|
classicTape: true
|
|
}
|
|
}
|
|
],
|
|
bandInfo: [
|
|
{
|
|
width: "85%",
|
|
intervalUnit: Timeline.DateTime.DECADE,
|
|
intervalPixels: 200,
|
|
theme: theme
|
|
},
|
|
{
|
|
width: "15%",
|
|
intervalUnit: Timeline.DateTime.CENTURY,
|
|
intervalPixels: 300,
|
|
overview: true
|
|
}
|
|
]
|
|
});
|
|
});
|
|
|
|
|
|
function transformPersonData(data) {
|
|
var start = data["/people/person/date_of_birth"];
|
|
var end = data["/people/deceased_person/date_of_death"];
|
|
var strBirth = data["/people/person/date_of_birth"].substr(0, 4);
|
|
if (data["/people/deceased_person/date_of_death"] != null)
|
|
var strDeath = data["/people/deceased_person/date_of_death"].substr(0, 4);
|
|
else return null;
|
|
var title = data["name"] + " (" + strBirth + "-" + strDeath + ")";
|
|
var description = data["/people/person/place_of_birth"]["name"];
|
|
var newData = {
|
|
"title" : title,
|
|
"start" : start,
|
|
"end" : end,
|
|
"options" : {
|
|
"description" : description
|
|
}
|
|
};
|
|
var lat = parseFloat(data["/people/person/place_of_birth"]["geolocation"]["latitude"]);
|
|
var lon = parseFloat(data["/people/person/place_of_birth"]["geolocation"]["longitude"]);
|
|
newData["point"] = {
|
|
"lat" : lat,
|
|
"lon" : lon
|
|
};
|
|
if ("/common/topic/image" in data && data["/common/topic/image"] != null) {
|
|
var imageUrl = "http://www.freebase.com/api/trans/image_thumb" +
|
|
data["/common/topic/image"]["id"] +
|
|
"?maxheight=120&maxwidth=120";
|
|
var infoHtml = '<div class="infotitle"><b>' + title + '</b></div>';
|
|
infoHtml += '<div style="padding:5px;width:130px;height:130px;"><img src="' + imageUrl + '"></div>';
|
|
newData["options"]["infoHtml"] = infoHtml;
|
|
}
|
|
return newData;
|
|
}
|
|
|
|
// toggle the visibility of a dataset
|
|
function toggleDataset(dsid, toggle) {
|
|
if (toggle) {
|
|
tm.datasets[dsid].show();
|
|
} else {
|
|
tm.datasets[dsid].hide();
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<link href="examples.css" type="text/css" rel="stylesheet"/>
|
|
<style>
|
|
div#timelinecontainer{
|
|
height: 300px;
|
|
|
|
}
|
|
div#mapcontainer{ height: 300px; }
|
|
div#fblicense {
|
|
font-size: x-small;
|
|
float: right;
|
|
padding: 1em;
|
|
margin-top: 28px;
|
|
}
|
|
span#artbox {
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
background: #19CF54;
|
|
float: left;
|
|
padding: 5px;
|
|
margin: 4px;
|
|
}
|
|
span#authbox {
|
|
color: #FFFFFF;
|
|
font-weight: bold;
|
|
background: #FE766A;
|
|
float: left;
|
|
padding: 5px;
|
|
margin: 4px;
|
|
}
|
|
/* This is necessary to get old-style duration events */
|
|
.timeline-event-label {
|
|
margin-top: -15px;
|
|
margin-left: 4px;
|
|
line-height: 12px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="fblicense"> <img src="http://www.freebase.com/api/trans/raw/freebase/attribution" style="float:left; margin-right: 5px" /> <div style="margin-left:30px"> Source: <a href="http://www.freebase.com" title="Freebase – The World's Database">Freebase</a> - The World's Database <br/> Freely licensed under <a href="http://www.freebase.com/view/common/license/cc_attribution_25">CC-BY</a>. </div> </div>
|
|
|
|
<div id="help">
|
|
<h1>Metaweb Datasets</h1>
|
|
<p>In this example, we're loading two Metaweb datasets from freebase.com. Toggle boxes like the ones below might be one way to deal with large datasets, which can be difficult to show on the timeline.</p>
|
|
|
|
<p>Show:
|
|
<span id="artbox"><input type="checkbox" onclick="toggleDataset('artists', this.checked);" checked> Artists</span>
|
|
<span id="authbox"><input type="checkbox" onclick="toggleDataset('authors', this.checked);" checked> Authors</span>
|
|
</p>
|
|
</div>
|
|
<div id="timemap">
|
|
<div id="timelinecontainer">
|
|
<div id="timeline"></div>
|
|
</div>
|
|
<div id="mapcontainer">
|
|
<div id="map"></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|