bob
/
westdc-zf1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
westdc-zf1/htdocs/js/timemap.2.0.1/examples/artists.html

228 lines
7.8 KiB
HTML
Raw Normal View History

import timemap.2.0.1
2011-11-08 09:02:14 +00:00
<!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 &ndash; 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:&nbsp;
<span id="artbox"><input type="checkbox" onclick="toggleDataset('artists', this.checked);" checked> Artists</span> &nbsp;&nbsp;&nbsp;
<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>