先看demo再看例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="chart" style="600px;height:400px;"></div>
<!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]-->
<script src="js/flotr2.min.js"></script>
<script>
window.onload = function () {
// 显示在纵轴的数组
wins = [[0,13],[1,11],[2,15],[3,15],[4,18],[5,21],[6,28]];
// x轴
var years = [
[0, "2006"],
[1, "2007"],
[2, "2008"],
[3, "2009"],
[4, "2010"],
[5, "2011"],
[6, "2012"],
];
Flotr.draw(document.getElementById("chart"),[wins], {
title: "Manchester City Wins",
colors: ["#89AFD2"],
bars: {
show: true,
barWidth: 0.5,
shadowSize: 0,
fillOpacity: 1,
lineWidth: 0,
},
// 自定义y轴
yaxis: {
min: 0,
tickDecimals: 0,
},
// 自定义x轴
xaxis: {
ticks: years,
},
grid: {
horizontalLines: false,
verticalLines: false,
}
});
};
</script>
</body>
</html>
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="chart" style="600px;height:400px;"></div>
<!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]-->
<script src="js/flotr2.min.js"></script>
<script>
window.onload = function () {
var co2 = [
[ 1959, 315.97 ],
[ 1960, 316.91 ],
[ 1961, 317.64 ],
[ 1962, 318.45 ],
[ 1963, 318.99 ],
[ 1964, 319.62 ],
[ 1965, 320.04 ],
[ 1966, 321.38 ],
[ 1967, 322.16 ],
[ 1968, 323.04 ],
[ 1969, 324.62 ],
[ 1970, 325.68 ],
[ 1971, 326.32 ],
[ 1972, 327.45 ],
[ 1973, 329.68 ],
[ 1974, 330.18 ],
[ 1975, 331.08 ],
[ 1976, 332.05 ],
[ 1977, 333.78 ],
[ 1978, 335.41 ],
[ 1979, 336.78 ],
[ 1980, 338.68 ],
[ 1981, 340.10 ],
[ 1982, 341.44 ],
[ 1983, 343.03 ],
[ 1984, 344.58 ],
[ 1985, 346.04 ],
[ 1986, 347.39 ],
[ 1987, 349.16 ],
[ 1988, 351.56 ],
[ 1989, 353.07 ],
[ 1990, 354.35 ],
[ 1991, 355.57 ],
[ 1992, 356.38 ],
[ 1993, 357.07 ],
[ 1994, 358.82 ],
[ 1995, 360.80 ],
[ 1996, 362.59 ],
[ 1997, 363.71 ],
[ 1998, 366.65 ],
[ 1999, 368.33 ],
[ 2000, 369.52 ],
[ 2001, 371.13 ],
[ 2002, 373.22 ],
[ 2003, 375.77 ],
[ 2004, 377.49 ],
[ 2005, 379.80 ],
[ 2006, 381.90 ],
[ 2007, 383.77 ],
[ 2008, 385.59 ],
[ 2009, 387.37 ],
[ 2010, 389.85 ],
[ 2011, 391.62 ],
];
var temp = [
[ 1959, 0.0776 ],
[ 1960, 0.0280 ],
[ 1961, 0.1028 ],
[ 1962, 0.1289 ],
[ 1963, 0.1469 ],
[ 1964, -0.1171 ],
[ 1965, -0.0523 ],
[ 1966, 0.0063 ],
[ 1967, 0.0219 ],
[ 1968, 0.0093 ],
[ 1969, 0.1139 ],
[ 1970, 0.0684 ],
[ 1971, -0.0315 ],
[ 1972, 0.0558 ],
[ 1973, 0.1909 ],
[ 1974, -0.0527 ],
[ 1975, 0.0172 ],
[ 1976, -0.0753 ],
[ 1977, 0.1779 ],
[ 1978, 0.0990 ],
[ 1979, 0.1856 ],
[ 1980, 0.2301 ],
[ 1981, 0.2701 ],
[ 1982, 0.1521 ],
[ 1983, 0.3170 ],
[ 1984, 0.1259 ],
[ 1985, 0.1065 ],
[ 1986, 0.1956 ],
[ 1987, 0.3293 ],
[ 1988, 0.3407 ],
[ 1989, 0.2659 ],
[ 1990, 0.3988 ],
[ 1991, 0.3757 ],
[ 1992, 0.2323 ],
[ 1993, 0.2621 ],
[ 1994, 0.3245 ],
[ 1995, 0.4473 ],
[ 1996, 0.3170 ],
[ 1997, 0.5117 ],
[ 1998, 0.6286 ],
[ 1999, 0.4525 ],
[ 2000, 0.4264 ],
[ 2001, 0.5496 ],
[ 2002, 0.6121 ],
[ 2003, 0.6211 ],
[ 2004, 0.5779 ],
[ 2005, 0.6510 ],
[ 2006, 0.5977 ],
[ 2007, 0.5923 ],
[ 2008, 0.5134 ],
[ 2009, 0.5985 ],
[ 2010, 0.6621 ],
[ 2011, 0.5362 ],
];
var zero = []
for (yr=1959; yr<2012; yr++) { zero.push([yr, 0]); };
Flotr.draw(
document.getElementById("chart")
,[
{ data: zero, label: "20<sup>th</sup> Century Baseline Temperature", lines: {show:true, lineWidth: 1}, shadowSize: 0, color: "#545454" },
{ data: temp, label: "Yearly Temperature Difference (°C)", lines: {show:true}},
{ data: co2, label: "CO<sub>2</sub> Concentration (ppm)", lines: {show:true}, yaxis: 2 },
]
,{
title: "Global Temperature and CO<sub>2</sub> Concentration (NOAA Data)",
grid: {horizontalLines: false, verticalLines: false},
y2axis: {min: 300, max: 400},
yaxis: {min: -0.15, max: 0.69,
tickFormatter: function(val) {return val+" °C";}},
}
);
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="chart" style="400px;height:400px;"></div>
<!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]-->
<script src="js/flotr2.min.js"></script>
<script>
window.onload = function () {
data = [
{data: [[0,22.4]], label: "Extreme Poverty"},
{data: [[1,77.6]], label: "Rest of the World"}
];
Flotr.draw(document.getElementById("chart"),data, {
title: "How Much of the World Lives on $1.25/day?",
pie: {
show: true,
},
yaxis: {
showLabels: false,
},
xaxis: {
showLabels: false,
},
grid: {
horizontalLines: false,
verticalLines: false,
}
});
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="chart" style="600px;height:400px;"></div>
<!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]-->
<script src="js/flotr2.min.js"></script>
<script>
window.onload = function () {
var pacific_data = [
{ country: "Australia", spending: 9.1, life: 81.8 },
{ country: "New Zealand", spending: 10.1, life: 81.0 },
];
var europe_data = [
{ country: "Austria", spending: 11.0, life: 80.7 },
{ country: "Belgium", spending: 10.5, life: 80.3 },
{ country: "Czech Republic", spending: 7.5, life: 77.7 },
{ country: "Denmark", spending: 11.1, life: 79.3 },
{ country: "Estonia", spending: 6.3, life: 75.6 },
{ country: "Finland", spending: 8.9, life: 80.2 },
{ country: "France", spending: 11.6, life: 81.3 },
{ country: "Germany", spending: 11.6, life: 80.5 },
{ country: "Greece", spending: 10.2, life: 80.6 },
{ country: "Hungary", spending: 7.8, life: 74.3 },
{ country: "Iceland", spending: 9.3, life: 81.5 },
{ country: "Ireland", spending: 9.2, life: 81.0 },
{ country: "Italy", spending: 9.3, life: 82.0 },
{ country: "Luxembourg", spending: 7.9, life: 80.7 },
{ country: "Netherlands", spending: 12.0, life: 80.8 },
{ country: "Norway", spending: 9.4, life: 81.2 },
{ country: "Poland", spending: 7.0, life: 76.3 },
{ country: "Portugal", spending: 10.7, life: 79.8 },
{ country: "Slovak Republic", spending: 9.0, life: 75.2 },
{ country: "Slovenia", spending: 9.0, life: 79.5 },
{ country: "Spain", spending: 9.6, life: 82.2 },
{ country: "Sweden", spending: 9.6, life: 81.5 },
{ country: "Switzerland", spending: 11.4, life: 82.6 },
{ country: "Turkey", spending: 6.1, life: 74.3 },
{ country: "United Kingdom", spending: 9.6, life: 80.6 },
];
var americas_data = [
{ country: "Canada", spending: 11.4, life: 80.8 },
{ country: "Chile", spending: 8.0, life: 79.0 },
{ country: "Mexico", spending: 6.2, life: 75.5 },
{ country: "United States", spending: 17.6, life: 78.7 },
];
var mideast_data = [
{ country: "Israel", spending: 7.5, life: 81.7 },
];
var asia_data = [
{ country: "Japan", spending: 9.5, life: 83.0 },
{ country: "Korea", spending: 7.1, life: 80.7 },
];
var us_data = [
{ country: "United States", spending: 17.6, life: 78.7 },
];
var pacific=[], europe=[], americas=[], mideast=[], asia=[], us=[];
for (i = 0; i < pacific_data.length; i++) {
pacific.push([ pacific_data[i].spending, pacific_data[i].life ]);
}
for (i = 0; i < europe_data.length; i++) {
europe.push([ europe_data[i].spending, europe_data[i].life ]);
}
for (i = 0; i < americas_data.length; i++) {
americas.push([ americas_data[i].spending, americas_data[i].life ]);
}
for (i = 0; i < mideast_data.length; i++) {
mideast.push([ mideast_data[i].spending, mideast_data[i].life ]);
}
for (i = 0; i < asia_data.length; i++) {
asia.push([ asia_data[i].spending, asia_data[i].life ]);
}
for (i = 0; i < us_data.length; i++) {
us.push([ us_data[i].spending, us_data[i].life ]);
}
Flotr.draw(
document.getElementById("chart")
,[
{ data: pacific, label: "Pacific", points: {show:true} },
{ data: europe, label: "Europe", points: {show:true} },
{ data: americas, label: "Americas", points: {show:true} },
{ data: mideast, label: "Middle East", points: {show:true} },
{ data: asia, label: "Asia", points: {show:true} },
{ data: us, label: "United States", points: {show:true} },
]
,{
title: "Life Expectancy vs. Health Care Spending",
subtitle: "(by Country, 2010 OECD data)",
xaxis: {min: 5, max: 25, tickDecimals: 0, title: "Spending as Percentage of GDP", tickFormatter: function(val) {return val+"%"}},
yaxis: {min: 70, max: 85, tickDecimals: 0, title: "Years"},
legend: {position: "ne"},
}
);
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id='chart' style="600px;height:400px;"></div>
<!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]-->
<script src="js/flotr2.min.js"></script>
<script>
window.onload = function () {
var players = [
{ player: "Chris Bosh", points: 17.2, rebounds: 7.9, assists: 1.6, steals: 0.8, blocks: 0.8 },
{ player: "Shane Battier", points: 5.4, rebounds: 2.6, assists: 1.2, steals: 1.0, blocks: 0.5 },
{ player: "LeBron James", points: 28.0, rebounds: 8.4, assists: 6.1, steals: 1.9, blocks: 0.8 },
{ player: "Dwayne Wade", points: 22.3, rebounds: 5.0, assists: 4.5, steals: 1.7, blocks: 1.3 },
{ player: "Mario Chalmers", points: 10.2, rebounds: 2.9, assists: 3.6, steals: 1.4, blocks: 0.2 },
];
var team = {
points: 98.2,
rebounds: 41.3,
assists: 19.3,
steals: 8.5,
blocks: 5.3,
};
var get_player = function(name) {
for (var i=0; i<players.length; i++) {
if (players[i].player === name) return players[i];
}
}
var player_data = function(name) {
var obj = {}, i = 0;
obj.label = name;
obj.data = [];
for (var key in team) {
obj.data.push([i, 100*get_player(name)[key]/team[key]]);
i++;
};
return obj;
};
var labels = [
[0, "Points"],
[1, "Rebounds"],
[2, "Assists"],
[3, "Steals"],
[4, "Blocks"],
];
Flotr.draw(document.getElementById("chart"),
[
player_data("Chris Bosh"),
player_data("Shane Battier"),
player_data("LeBron James"),
player_data("Dwayne Wade"),
player_data("Mario Chalmers"),
],{
title: "2011/12 Miami Heat Starting Lineup - Contribution to Team Total",
radar: { show: true, radiusRatio: 0.9},
grid: { circular: true, },
xaxis: { ticks: labels, },
yaxis: { showLabels: false, min:0, max: 33, },
legend: { position: "nw" },
}
);
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="chart" style="600px;height:400px;"></div>
<!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]-->
<script src="js/flotr2.min.js"></script>
<script>
window.onload = function () {
Flotr.addType('errorbox', {
options: {
show: false, // => setting to true will show error boxes
lineWidth: 1, // => in pixels
candleWidth: 0.6, // => in units of the x axis
fill: true, // => true to fill from the point to the x axis
fillColor: '#00A8F0',
fillOpacity: 0.5, // => opacity of the fill color
},
draw : function (options) {
var context = options.context;
context.save();
context.lineJoin = 'miter';
context.lineCap = 'butt';
context.lineWidth = options.lineWidth;
this.plot(options);
context.restore();
},
plot : function (options) {
var
data = options.data,
context = options.context,
xScale = options.xScale,
yScale = options.yScale,
shadowSize = options.shadowSize,
lineWidth = options.lineWidth,
color,
datum, x, y, xerr, yerr,
left, right, bottom, top,
i;
if (data.length < 1) return;
for (i = 0; i < data.length; i++) {
datum = data[i];
x = datum[0];
y = datum[1];
xerr = datum[2];
yerr = datum[3];
left = xScale(x - xerr);
right = xScale(x + xerr);
bottom = yScale(y - yerr);
top = yScale(y + yerr);
color = options.fillColor;
if (options.fill) {
context.fillStyle = 'rgba(0,0,0,0.05)';
context.fillRect(left + shadowSize, top + shadowSize, right - left, bottom - top);
context.save();
context.globalAlpha = options.fillOpacity;
context.fillStyle = color;
context.fillRect(left, top + lineWidth, right - left, bottom - top);
context.restore();
}
if (lineWidth) {
x = Math.floor((left + right) / 2);
context.strokeStyle = color;
context.beginPath();
context.strokeRect(left, top + lineWidth, right - left, bottom - top);
context.closePath();
context.stroke();
}
}
},
extendXRange: function (axis, data, options) {
if (axis.options.max === null) {
axis.max = Math.max(axis.datamax + 0.5, axis.max);
axis.min = Math.min(axis.datamin - 0.5, axis.min);
}
}
});
var hubble_data = [
{ nebulae: "NGC 6822", distance: 0.500, distance_error: 0.010, velocity: 57, velocity_error: 2, },
{ nebulae: "NGC 221", distance: 0.763, distance_error: 0.024, velocity: 200, velocity_error: 6, },
{ nebulae: "NGC 598", distance: 0.835, distance_error: 0.105, velocity: 179, velocity_error: 3, },
{ nebulae: "NGC 4736", distance: 4.900, distance_error: 0.400, velocity: 308, velocity_error: 1, },
{ nebulae: "NGC 4258", distance: 7.000, distance_error: 0.500, velocity: 448, velocity_error: 3, },
{ nebulae: "NGC 5194", distance: 7.100, distance_error: 1.200, velocity: 463, velocity_error: 3, },
{ nebulae: "NGC 4826", distance: 7.400, distance_error: 0.610, velocity: 408, velocity_error: 4, },
{ nebulae: "NGC 3627", distance: 11.000, distance_error: 1.500, velocity: 727, velocity_error: 3, },
{ nebulae: "NGC 7331", distance: 12.200, distance_error: 1.000, velocity: 816, velocity_error: 1, },
{ nebulae: "NGC 4486", distance: 16.400, distance_error: 0.500, velocity: 1307, velocity_error: 7, },
{ nebulae: "NGC 4649", distance: 16.800, distance_error: 1.200, velocity: 1117, velocity_error: 6, },
];
var data = function(source) {
var result = [];
for (var i=0; i<source.length; i++) {
result.push([
source[i].distance,
source[i].velocity,
source[i].distance_error,
source[i].velocity_error,
]);
}
return result;
}(hubble_data);
var hubble_line = [ [0,0], [20,1400] ];
Flotr.draw(document.getElementById("chart"),
[
{ data: hubble_line,
lines: {
show: true,
lineWidth: 1,
},
color: "#735FB9",
label: "Best Current Estimate of H<sub>0</sub>",
},
{ data: data,
errorbox: {
show: true,
fillColor: "#FCA44E",
fillOpacity: 1.0,
},
color: "#FCA44E",
label: "Nearby Nebulae/Clusters",
}
],
{
title: "Hubble's Law: Velocity Shift vs. Distance",
xaxis: { min: 0, max: 20, tickFormatter: function(val) {return val+" Mpc"} },
yaxis: { min: 0, max: 1500, tickFormatter: function(val) {return val+" km/s"} },
}
);
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
.flotr-legend {
padding: 5px;
}
</style>
</head>
<body>
<p><strong>Hurricane Katrina 2005: Course and Wind Strength</strong></p>
<div id="chart" style="600px;height:400px;"></div>
<p>Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.</p>
<!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]-->
<script src="js/flotr2.min.js"></script>
<script>
window.onload = function () {
var katrina = [
{ north: 23.2, west: 75.5, wind: 35 },
{ north: 24.0, west: 76.4, wind: 35 },
{ north: 25.2, west: 77.0, wind: 45 },
{ north: 26.0, west: 77.6, wind: 45 },
{ north: 26.2, west: 78.7, wind: 50 },
{ north: 26.1, west: 79.9, wind: 75 },
{ north: 25.5, west: 80.7, wind: 75 },
{ north: 25.1, west: 82.2, wind: 100 },
{ north: 24.8, west: 82.9, wind: 100 },
{ north: 24.4, west: 84.0, wind: 110 },
{ north: 24.4, west: 84.6, wind: 115 },
{ north: 25.1, west: 86.8, wind: 145 },
{ north: 25.7, west: 87.7, wind: 160 },
{ north: 26.5, west: 88.6, wind: 175 },
{ north: 27.9, west: 89.5, wind: 160 },
{ north: 29.7, west: 89.6, wind: 135 },
{ north: 30.8, west: 89.6, wind: 105 },
{ north: 31.9, west: 89.6, wind: 75 },
{ north: 32.9, west: 88.9, wind: 65 },
{ north: 34.7, west: 88.4, wind: 50 },
];
var get_points = function(source_array, filter_function) {
var result = [];
for (var i=0; i<source_array.length; i++) {
if ( (typeof filter_function === "undefined")
|| (typeof filter_function !== "function")
|| filter_function(source_array[i]) ) {
result.push([
source_array[i].west * -1,
source_array[i].north,
source_array[i].wind,
]);
}
}
return result;
};
Flotr.draw(
document.getElementById("chart")
,[
{
data: get_points(katrina, function(obs) {
return (obs.wind < 39);
}),
color: "#74add1",
bubbles: {show:true, baseRadius: 0.3, lineWidth: 1},
},
{
data: get_points(katrina, function(obs) {
return (obs.wind >= 39) && (obs.wind < 74);
}),
color: "#abd9e9",
bubbles: {show:true, baseRadius: 0.3, lineWidth: 1},
},
{
data: get_points(katrina, function(obs) {
return (obs.wind >= 74) && (obs.wind < 95);
}),
color: "#ffffbf",
label: "Category 1",
bubbles: {show:true, baseRadius: 0.3, lineWidth: 1},
},
{
data: get_points(katrina, function(obs) {
return (obs.wind >= 95) && (obs.wind < 110);
}),
color: "#fee090",
label: "Category 2",
bubbles: {show:true, baseRadius: 0.3, lineWidth: 1},
},
{
data: get_points(katrina, function(obs) {
return (obs.wind >= 110) && (obs.wind < 130);
}),
color: "#fdae61",
label: "Category 3",
bubbles: {show:true, baseRadius: 0.3, lineWidth: 1},
},
{
data: get_points(katrina, function(obs) {
return (obs.wind >= 130) && (obs.wind < 157);
}),
color: "#f46d43",
label: "Category 4",
bubbles: {show:true, baseRadius: 0.3, lineWidth: 1},
},
{
data: get_points(katrina, function(obs) {
return (obs.wind >= 157);
}),
color: "#d73027",
label: "Category 5",
bubbles: {show:true, baseRadius: 0.3, lineWidth: 1},
},
]
,{
grid: {
backgroundImage: "img/gulf.png",
horizontalLines: false,
verticalLines: false
},
yaxis: {showLabels: false, min: 23.607, max: 33.657},
xaxis: {showLabels: false, min: -94.298, max: -77.586},
legend: {position: "sw", backgroundOpacity: 0,},
}
);
};
</script>
</body>
</html>
第二章与图表进行交互
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id='chart' style="500px;height:333px;float:left;"></div>
<button id='unzoom'>Reset Zoom</button>
<!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.7/jquery.flot.min.js"></script>
<script src="js/jquery.flot.selection.js"></script>
<script>
$(function() {
var eas = [[1960,0.155758351823196],[1961,0.154708338465889],[1962,0.15736247758304098],[1963,0.17547656667521702],[1964,0.201092708107488],[1965,0.224424367302655],[1966,0.250853905438728],[1967,0.271937157699548],[1968,0.29972272164425096],[1969,0.345245125270376],[1970,0.404076332139288],[1971,0.448189313184516],[1972,0.555899770509207],[1973,0.732943121555639],[1974,0.8446257577965429],[1975,0.92471123440837],[1976,1.01693953894779],[1977,1.21205555652957],[1978,1.52867990978479],[1979,1.66090086317477],[1980,1.7970442001228601],[1981,1.98544470116573],[1982,1.94171995168336],[1983,2.0583072141578502],[1984,2.20601162185217],[1985,2.33743726546771],[1986,3.0443225056739],[1987,3.5579035197859303],[1988,4.28276044965662],[1989,4.48235048932469],[1990,4.690184661696589],[1991,5.28108228407632],[1992,5.7623237053037],[1993,6.45362199757356],[1994,7.19724444570093],[1995,8.1232964264891],[1996,7.80979131929059],[1997,7.5076873747512005],[1998,6.70356675241045],[1999,7.46611962451055],[2000,8.07438034385162],[2001,7.50768899577212],[2002,7.62483790018704],[2003,8.37990440855396],[2004,9.39360115346774],[2005,9.991964308423539],[2006,10.594146717177301],[2007,11.8554473545105],[2008,13.6742820960544],[2009,14.058906333763401],[2010,16.3103027590767],[2011,18.80024281251]];
var ecs = [[1960,0.442123789761523],[1961,0.470625042294723],[1962,0.514526712663984],[1963,0.5673750409479831],[1964,0.628323089574272],[1965,0.6837343433635501],[1966,0.742801533835998],[1967,0.799189805253066],[1968,0.833514526468225],[1969,0.915211282101158],[1970,0.997071615936847],[1971,1.1236563816731102],[1972,1.3471312339680601],[1973,1.71159440705281],[1974,1.9332046356886798],[1975,2.2658386285940098],[1976,2.3569912659096803],[1977,2.67190283745206],[1978,3.2561968919296898],[1979,3.9772073423268903],[1980,4.50067613837895],[1981,4.00375560861233],[1982,3.85961883811108],[1983,3.7418081477691603],[1984,3.5955483699749],[1985,3.71983618846311],[1986,5.04725161653157],[1987,6.19475789463546],[1988,6.88454810595434],[1989,7.041961296771309],[1990,8.567004006990361],[1991,8.818893622221301],[1992,9.45086684368378],[1993,8.689515119252741],[1994,9.10000526118154],[1995,10.415187896762301],[1996,10.6160233905887],[1997,10.068795388689],[1998,10.3154689771872],[1999,10.202009273962199],[2000,9.59305543654579],[2001,9.69735893376965],[2002,10.615147773523901],[2003,12.950336729500199],[2004,15.0999960796641],[2005,16.0841434828981],[2006,17.4095801825782],[2007,20.3622644269488],[2008,22.35945362792],[2009,19.6446539546222],[2010,20.0380870635273],[2011,22.1459396328311]];
var lcn = [[1960,0.0810583157769874],[1961,0.086039249513451],[1962,0.09898911106657761],[1963,0.0993330958816766],[1964,0.11052782607136301],[1965,0.118171223561332],[1966,0.12974763243130902],[1967,0.132916283275957],[1968,0.143354817035995],[1969,0.160244131325496],[1970,0.174522985692565],[1971,0.19504777922012398],[1972,0.21936336364879902],[1973,0.287545371609099],[1974,0.37249623777013097],[1975,0.39074897611883197],[1976,0.43451945960377397],[1977,0.478041498578193],[1978,0.542613341499506],[1979,0.645906819281006],[1980,0.7688175429159251],[1981,0.884636949015867],[1982,0.828337327411261],[1983,0.735072067887652],[1984,0.725859673183313],[1985,0.74647366583182],[1986,0.760611990028521],[1987,0.800975236180132],[1988,0.909214325336314],[1989,0.995013057222604],[1990,1.15944793617358],[1991,1.23136220660055],[1992,1.3347002868484699],[1993,1.4524700762704699],[1994,1.7345289971112199],[1995,1.82861238036786],[1996,1.97315660752926],[1997,2.15125895051574],[1998,2.15795985749246],[1999,1.93021642749839],[2000,2.14286503964013],[2001,2.08874204880004],[2002,1.87617223589982],[2003,2.0114139050788102],[2004,2.31452328782426],[2005,2.79322485324156],[2006,3.27516601743138],[2007,3.85594024590809],[2008,4.47511240568074],[2009,4.19082275122277],[2010,5.1785301821609195],[2011,5.80210091858771]];
var mea = [[1968,0.0382776953642079],[1969,0.042624369594480696],[1970,0.0470598970641582],[1971,0.054973393035313005],[1972,0.0676686598254512],[1973,0.09078985072499851],[1974,0.16540514120448802],[1975,0.182116564995811],[1976,0.22516522746663198],[1977,0.261685363713554],[1978,0.279601868653891],[1979,0.364712398407265],[1980,0.46444286638335197],[1981,0.481589833611813],[1982,0.47826048992101705],[1983,0.483888324348839],[1984,0.490212611772452],[1985,0.49759468341290997],[1986,0.504598657814654],[1987,0.46404027084501503],[1988,0.453941109555849],[1989,0.47118090407685603],[1990,0.525619315674148],[1991,0.526291363172931],[1992,0.572424422929412],[1993,0.5766128135301121],[1994,0.599240191164733],[1995,0.6785277928745489],[1996,0.765053204168066],[1997,0.7952105902387541],[1998,0.777917073810625],[1999,0.8338252119188321],[2000,0.938461963249183],[2001,0.930376895135725],[2002,0.9298111309789681],[2003,1.04201348346088],[2004,1.2070642720771398],[2005,1.4389445620190802],[2006,1.68824641105752],[2007,1.9763463725553898],[2008,2.46882672762301],[2009,2.18144694675463],[2010,2.5170676997869],[2011,3.04899800706971]];
var sas = [[1960,0.0478247732151856],[1961,0.0383225958869648],[1962,0.0388874166372837],[1963,0.0433593791506997],[1964,0.049312969226400806],[1965,0.0753559563796575],[1966,0.06323585646800489],[1967,0.0696076427752867],[1968,0.0730763830538578],[1969,0.0802343499298316],[1970,0.086417938527656],[1971,0.0920998975067543],[1972,0.0934253781138569],[1973,0.10710018826296401],[1974,0.12908199902446402],[1975,0.137467192139294],[1976,0.134237452196152],[1977,0.155501137089905],[1978,0.17700129114045499],[1979,0.19822748152728],[1980,0.23950133755200698],[1981,0.253323520001952],[1982,0.26216138766225],[1983,0.27763291864135103],[1984,0.27745895731883696],[1985,0.300252692811231],[1986,0.318138309467094],[1987,0.353457233833646],[1988,0.379356926533544],[1989,0.38176068169897304],[1990,0.411674940336935],[1991,0.367122939515263],[1992,0.38985315145683197],[1993,0.385975784343698],[1994,0.438017870225571],[1995,0.486561796291813],[1996,0.526479595262552],[1997,0.5524917029445889],[1998,0.560339831029537],[1999,0.5987139908417021],[2000,0.622822096306051],[2001,0.637169916840114],[2002,0.671288997652188],[2003,0.78410428905078],[2004,0.9111221170662099],[2005,1.04470909960678],[2006,1.1851178245492],[2007,1.50437408329898],[2008,1.5345956549431599],[2009,1.68265470743355],[2010,2.04610459367539],[2011,2.27108779326152]];
var ssf = [[1960,0.0297069247951595],[1961,0.030839996076188498],[1962,0.0334481365054735],[1963,0.0383823611974043],[1964,0.0373850974886355],[1965,0.0416450915296278],[1966,0.0449663430505477],[1967,0.0443902237290978],[1968,0.0474989382955448],[1969,0.0544475973839497],[1970,0.06407395567512329],[1971,0.0651193411871049],[1972,0.073484524388417],[1973,0.0940813608163604],[1974,0.122647461479448],[1975,0.13510131992306598],[1976,0.146968976317949],[1977,0.161442020615343],[1978,0.18036146588774601],[1979,0.215716578215229],[1980,0.271497709190136],[1981,0.271614311096045],[1982,0.25356040764095],[1983,0.23715413820644102],[1984,0.226106529627964],[1985,0.210647386817865],[1986,0.23276451310215202],[1987,0.27515897477430296],[1988,0.289718130440563],[1989,0.300906379088857],[1990,0.300398027434827],[1991,0.310977090696925],[1992,0.309478936793128],[1993,0.294653422749536],[1994,0.288787623577666],[1995,0.32726678754607397],[1996,0.33979176406183503],[1997,0.3487737245021],[1998,0.326510741354684],[1999,0.327930693483309],[2000,0.33695797490608503],[2001,0.32866718429288705],[2002,0.345227225537291],[2003,0.44651030536218],[2004,0.557848242700248],[2005,0.653503724718657],[2006,0.7602800186887111],[2007,0.8820445340076181],[2008,0.999925234189761],[2009,0.93629057710226],[2010,1.14097465468216],[2011,1.28322590173042]];
var $el = $("#chart"),
data = [
{ data: eas, label: "East Asia & Pacific" },
{ data: ecs, label: "Europe & Central Asia" },
{ data: lcn, label: "Latin America & Caribbean" },
{ data: mea, label: "Middle East & North Africa" },
{ data: sas, label: "South Asia" },
{ data: ssf, label: "Sub-Saharan Africa" },
],
options = {legend: {position: "nw"}, selection: {mode: "xy"}},
plotObj;
$el.on("plotselected", function(ev, ranges) {
plotObj = $.plot($el, data,
$.extend(true, {}, options, {
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
})
);
});
plotObj = $.plot($el, data, options);
$("#unzoom").click(function() {
plotObj = $.plot($el, data, options);
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
label {
cursor: pointer;
display: block;
padding-left: 20px;
min-height: 20px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id='visualization'>
<div>Gross Domestic Product (Current US$ in Trillions)</div>
<div id='chart' style="500px;height:333px;float:left;"></div>
<div id='controls' style="float:left;">
<p>Select Regions to Include:</p>
</div>
</div>
<!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.7/jquery.flot.min.js"></script>
<script>
$(function() {
var eas = [[1960,0.155758351823196],[1961,0.154708338465889],[1962,0.15736247758304098],[1963,0.17547656667521702],[1964,0.201092708107488],[1965,0.224424367302655],[1966,0.250853905438728],[1967,0.271937157699548],[1968,0.29972272164425096],[1969,0.345245125270376],[1970,0.404076332139288],[1971,0.448189313184516],[1972,0.555899770509207],[1973,0.732943121555639],[1974,0.8446257577965429],[1975,0.92471123440837],[1976,1.01693953894779],[1977,1.21205555652957],[1978,1.52867990978479],[1979,1.66090086317477],[1980,1.7970442001228601],[1981,1.98544470116573],[1982,1.94171995168336],[1983,2.0583072141578502],[1984,2.20601162185217],[1985,2.33743726546771],[1986,3.0443225056739],[1987,3.5579035197859303],[1988,4.28276044965662],[1989,4.48235048932469],[1990,4.690184661696589],[1991,5.28108228407632],[1992,5.7623237053037],[1993,6.45362199757356],[1994,7.19724444570093],[1995,8.1232964264891],[1996,7.80979131929059],[1997,7.5076873747512005],[1998,6.70356675241045],[1999,7.46611962451055],[2000,8.07438034385162],[2001,7.50768899577212],[2002,7.62483790018704],[2003,8.37990440855396],[2004,9.39360115346774],[2005,9.991964308423539],[2006,10.594146717177301],[2007,11.8554473545105],[2008,13.6742820960544],[2009,14.058906333763401],[2010,16.3103027590767],[2011,18.80024281251]];
var ecs = [[1960,0.442123789761523],[1961,0.470625042294723],[1962,0.514526712663984],[1963,0.5673750409479831],[1964,0.628323089574272],[1965,0.6837343433635501],[1966,0.742801533835998],[1967,0.799189805253066],[1968,0.833514526468225],[1969,0.915211282101158],[1970,0.997071615936847],[1971,1.1236563816731102],[1972,1.3471312339680601],[1973,1.71159440705281],[1974,1.9332046356886798],[1975,2.2658386285940098],[1976,2.3569912659096803],[1977,2.67190283745206],[1978,3.2561968919296898],[1979,3.9772073423268903],[1980,4.50067613837895],[1981,4.00375560861233],[1982,3.85961883811108],[1983,3.7418081477691603],[1984,3.5955483699749],[1985,3.71983618846311],[1986,5.04725161653157],[1987,6.19475789463546],[1988,6.88454810595434],[1989,7.041961296771309],[1990,8.567004006990361],[1991,8.818893622221301],[1992,9.45086684368378],[1993,8.689515119252741],[1994,9.10000526118154],[1995,10.415187896762301],[1996,10.6160233905887],[1997,10.068795388689],[1998,10.3154689771872],[1999,10.202009273962199],[2000,9.59305543654579],[2001,9.69735893376965],[2002,10.615147773523901],[2003,12.950336729500199],[2004,15.0999960796641],[2005,16.0841434828981],[2006,17.4095801825782],[2007,20.3622644269488],[2008,22.35945362792],[2009,19.6446539546222],[2010,20.0380870635273],[2011,22.1459396328311]];
var lcn = [[1960,0.0810583157769874],[1961,0.086039249513451],[1962,0.09898911106657761],[1963,0.0993330958816766],[1964,0.11052782607136301],[1965,0.118171223561332],[1966,0.12974763243130902],[1967,0.132916283275957],[1968,0.143354817035995],[1969,0.160244131325496],[1970,0.174522985692565],[1971,0.19504777922012398],[1972,0.21936336364879902],[1973,0.287545371609099],[1974,0.37249623777013097],[1975,0.39074897611883197],[1976,0.43451945960377397],[1977,0.478041498578193],[1978,0.542613341499506],[1979,0.645906819281006],[1980,0.7688175429159251],[1981,0.884636949015867],[1982,0.828337327411261],[1983,0.735072067887652],[1984,0.725859673183313],[1985,0.74647366583182],[1986,0.760611990028521],[1987,0.800975236180132],[1988,0.909214325336314],[1989,0.995013057222604],[1990,1.15944793617358],[1991,1.23136220660055],[1992,1.3347002868484699],[1993,1.4524700762704699],[1994,1.7345289971112199],[1995,1.82861238036786],[1996,1.97315660752926],[1997,2.15125895051574],[1998,2.15795985749246],[1999,1.93021642749839],[2000,2.14286503964013],[2001,2.08874204880004],[2002,1.87617223589982],[2003,2.0114139050788102],[2004,2.31452328782426],[2005,2.79322485324156],[2006,3.27516601743138],[2007,3.85594024590809],[2008,4.47511240568074],[2009,4.19082275122277],[2010,5.1785301821609195],[2011,5.80210091858771]];
var mea = [[1968,0.0382776953642079],[1969,0.042624369594480696],[1970,0.0470598970641582],[1971,0.054973393035313005],[1972,0.0676686598254512],[1973,0.09078985072499851],[1974,0.16540514120448802],[1975,0.182116564995811],[1976,0.22516522746663198],[1977,0.261685363713554],[1978,0.279601868653891],[1979,0.364712398407265],[1980,0.46444286638335197],[1981,0.481589833611813],[1982,0.47826048992101705],[1983,0.483888324348839],[1984,0.490212611772452],[1985,0.49759468341290997],[1986,0.504598657814654],[1987,0.46404027084501503],[1988,0.453941109555849],[1989,0.47118090407685603],[1990,0.525619315674148],[1991,0.526291363172931],[1992,0.572424422929412],[1993,0.5766128135301121],[1994,0.599240191164733],[1995,0.6785277928745489],[1996,0.765053204168066],[1997,0.7952105902387541],[1998,0.777917073810625],[1999,0.8338252119188321],[2000,0.938461963249183],[2001,0.930376895135725],[2002,0.9298111309789681],[2003,1.04201348346088],[2004,1.2070642720771398],[2005,1.4389445620190802],[2006,1.68824641105752],[2007,1.9763463725553898],[2008,2.46882672762301],[2009,2.18144694675463],[2010,2.5170676997869],[2011,3.04899800706971]];
var sas = [[1960,0.0478247732151856],[1961,0.0383225958869648],[1962,0.0388874166372837],[1963,0.0433593791506997],[1964,0.049312969226400806],[1965,0.0753559563796575],[1966,0.06323585646800489],[1967,0.0696076427752867],[1968,0.0730763830538578],[1969,0.0802343499298316],[1970,0.086417938527656],[1971,0.0920998975067543],[1972,0.0934253781138569],[1973,0.10710018826296401],[1974,0.12908199902446402],[1975,0.137467192139294],[1976,0.134237452196152],[1977,0.155501137089905],[1978,0.17700129114045499],[1979,0.19822748152728],[1980,0.23950133755200698],[1981,0.253323520001952],[1982,0.26216138766225],[1983,0.27763291864135103],[1984,0.27745895731883696],[1985,0.300252692811231],[1986,0.318138309467094],[1987,0.353457233833646],[1988,0.379356926533544],[1989,0.38176068169897304],[1990,0.411674940336935],[1991,0.367122939515263],[1992,0.38985315145683197],[1993,0.385975784343698],[1994,0.438017870225571],[1995,0.486561796291813],[1996,0.526479595262552],[1997,0.5524917029445889],[1998,0.560339831029537],[1999,0.5987139908417021],[2000,0.622822096306051],[2001,0.637169916840114],[2002,0.671288997652188],[2003,0.78410428905078],[2004,0.9111221170662099],[2005,1.04470909960678],[2006,1.1851178245492],[2007,1.50437408329898],[2008,1.5345956549431599],[2009,1.68265470743355],[2010,2.04610459367539],[2011,2.27108779326152]];
var ssf = [[1960,0.0297069247951595],[1961,0.030839996076188498],[1962,0.0334481365054735],[1963,0.0383823611974043],[1964,0.0373850974886355],[1965,0.0416450915296278],[1966,0.0449663430505477],[1967,0.0443902237290978],[1968,0.0474989382955448],[1969,0.0544475973839497],[1970,0.06407395567512329],[1971,0.0651193411871049],[1972,0.073484524388417],[1973,0.0940813608163604],[1974,0.122647461479448],[1975,0.13510131992306598],[1976,0.146968976317949],[1977,0.161442020615343],[1978,0.18036146588774601],[1979,0.215716578215229],[1980,0.271497709190136],[1981,0.271614311096045],[1982,0.25356040764095],[1983,0.23715413820644102],[1984,0.226106529627964],[1985,0.210647386817865],[1986,0.23276451310215202],[1987,0.27515897477430296],[1988,0.289718130440563],[1989,0.300906379088857],[1990,0.300398027434827],[1991,0.310977090696925],[1992,0.309478936793128],[1993,0.294653422749536],[1994,0.288787623577666],[1995,0.32726678754607397],[1996,0.33979176406183503],[1997,0.3487737245021],[1998,0.326510741354684],[1999,0.327930693483309],[2000,0.33695797490608503],[2001,0.32866718429288705],[2002,0.345227225537291],[2003,0.44651030536218],[2004,0.557848242700248],[2005,0.653503724718657],[2006,0.7602800186887111],[2007,0.8820445340076181],[2008,0.999925234189761],[2009,0.93629057710226],[2010,1.14097465468216],[2011,1.28322590173042]];
var source = [
{ data: eas, show: true, color: "#E41A1C", name: "East Asia & Pacific" },
{ data: ecs, show: true, color: "#377EB8", name: "Europe & Central Asia" },
{ data: lcn, show: true, color: "#4DAF4A", name: "Latin America & Caribbean" },
{ data: mea, show: true, color: "#984EA3", name: "Middle East & North Africa" },
{ data: sas, show: true, color: "#FF7F00", name: "South Asia" },
{ data: ssf, show: true, color: "#FFFF33", name: "Sub-Saharan Africa" },
];
var plotObj = $.plot(
$("#chart"),
$.map(
$.grep(source, function (obj) { return obj.show; }),
function (obj) { return { data: obj.data, color: obj.color }; }
)
);
$.each(source, function(idx, obj) {
var input = $("<input>").attr("id","chk-"+idx).attr("type","checkbox");
if (obj.show) {
$(input).prop("checked",true);
}
var span = $("<span>").css({
'background-color': obj.color,
'display': "inline-block",
'height': "0.9em",
'width': "0.9em",
'margin-right': "0.25em",
});
var label = $("<label>").addClass("checkbox").append(input).append(span).append(obj.name);
$("#controls").append(label);
});
$("input[id^='chk-']").click(function(ev) {
var idx = ev.target.id.substr(4);
source[idx].show = !source[idx].show
plotObj.setData(
$.map(
$.grep(source, function (obj) { return obj.show; }),
function (obj) { return { data: obj.data, color: obj.color }; }
)
);
plotObj.draw();
})
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="chart" style="600px;height:400px;"></div>
<!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.7/jquery.flot.min.js"></script>
<script>
$(function() {
// At least for now, the World Bank has a nasty bug in their
// API implementation. Their server converts the name of the
// JSONP callback function to lowercase. By default, jQuery
// uses a callback function of the form `jQuery9876_1234`
// (except the number strings are **much** longer) and so
// the JSONP response that the World Bank returns fails
// trying to execute `jquery9876_1234`. To workaround this
// bug, we'll intercept all of jQuery's AJAX calls before
// they're executed. We look for the World Bank callback
// parameter `prefix=` and, if it's present and the value isn't
// lowercase, create a lowercase wrapper function around the
// real callback that jQuery has created.
$.ajaxSetup({
beforeSend: function(xhr, settings) {
var prefix = settings.url.match(/prefix=(.*?)&/);
if (prefix.length > 1) {
var callback = prefix[1];
if (callback !== callback.toLowerCase()) {
window[callback.toLowerCase()] =
new Function("response", callback + "(response)");
}
}
}
});
var deferredRegionsRequest = $.getJSON(
"http://api.worldbank.org/regions/?prefix=?",
{format: "jsonp"}
);
var deferredRegionsAvailable = $.Deferred();
deferredRegionsRequest.done(function(response) {
deferredRegionsAvailable.resolve(
$.map(
$.grep(response[1], function(regionObj) {
return (regionObj.id != "");
}),
function(regionObj) {
return {
code: regionObj.code,
name: regionObj.name.replace(" (all income levels)","")
};
}
)
);
});
var deferredAllDataAvailable = $.Deferred();
deferredRegionsAvailable.done(function(regions) {
$.each(regions, function(idx, regionObj) {
regionObj.deferredDataRequest = $.getJSON(
"http://api.worldbank.org/countries/"
+ regionObj.code
+ "/indicators/NY.GDP.MKTP.CD"
+ "?prefix=?"
,{ format: "jsonp", per_page: 9999 }
);
regionObj.deferredDataAvailable = $.Deferred();
regionObj.deferredDataRequest.done(function(response) {
regionObj.rawData = response[1] || [];
regionObj.deferredDataAvailable.resolve();
});
});
$.when.apply(this,$.map(regions, function(regionObj) {
return regionObj.deferredDataAvailable
})).done(function() {
deferredAllDataAvailable.resolve(regions);
});
});
var deferredChartDataReady = $.Deferred();
deferredAllDataAvailable.done(function(regions) {
$.each(regions, function(idx, regionObj) {
regionObj.flotData = $.map(
$.grep(regionObj.rawData, function(dataObj) {
return (dataObj.value !== null);
}),
function(dataObj) {
return [[
parseInt(dataObj.date),
parseFloat(dataObj.value)/1e12
]];
}
)
})
deferredChartDataReady.resolve(regions);
});
deferredChartDataReady.done(function(regions) {
$.plot($("#chart"),
$.map(regions, function(regionObj) {
return {
label: regionObj.name,
data: regionObj.flotData
};
})
,{ legend: { position: "nw"} }
);
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="chart-wrapper" style="position:relative;margin-left:20px;">
<div id='marker' style="position:absolute;z-index:1;display:none;1px;border-left: 1px solid black;"></div>
<div id='charts' style="float:left;"></div>
<div id='chart-legends' style="float:left;"></div>
</div>
<!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.7/jquery.flot.min.js"></script>
<script>
$(function() {
exports = [
{ label: "East Asia & Pacific", data: [[1960,13.2276851887342],[1961,11.7963550115751],[1962,11.8527980604573],[1963,11.5193731199916],[1964,12.1462436254811],[1965,14.7735530286652],[1966,15.392959002981],[1967,14.7075382740546],[1968,15.624382546969],[1969,16.2816050814992],[1970,14.5649474898921],[1971,15.2884641261261],[1972,15.0015320021371],[1973,16.0284929526502],[1974,18.6511317729209],[1975,17.5804113463697],[1976,18.9436231952687],[1977,18.7821652757197],[1978,17.9488824204533],[1979,19.0468767857484],[1980,21.3393417930367],[1981,22.0909822022235],[1982,21.3090391197168],[1983,20.8442411776676],[1984,21.8400993915342],[1985,21.1458104329789],[1986,19.757946686421],[1987,20.6412220711762],[1988,20.9264902385545],[1989,20.5902982946096],[1990,20.6814669463882],[1991,20.6645429837375],[1992,20.6924775643734],[1993,20.4336023800945],[1994,20.845289346812],[1995,21.5602831916366],[1996,21.6864023007465],[1997,22.906249785916],[1998,24.2127839857015],[1999,23.352678984083],[2000,25.3374687942381],[2001,24.4607627993162],[2002,25.2650793852501],[2003,27.1463987585805],[2004,29.8875064650765],[2005,31.3917164652029],[2006,33.3278063791139],[2007,34.2228863625396],[2008,34.7899262988985],[2009,29.0476124098204],[2010,32.1722358333244],[2011,33.0010633522658]]},
{ label: "Europe & Central Asia", data: [[1960,19.6961338419723],[1961,19.4263903109578],[1962,19.0734034092803],[1963,18.9387571341282],[1964,19.0832256139865],[1965,19.2946988304665],[1966,19.4998532548064],[1967,19.200188149306],[1968,20.2082693324487],[1969,21.1367934284921],[1970,20.4843044277948],[1971,20.4997307068905],[1972,20.4905301794328],[1973,21.6273425199398],[1974,24.7556277274978],[1975,23.0308947334987],[1976,24.1103251055369],[1977,24.5909475817424],[1978,24.3243030088367],[1979,25.1154698344328],[1980,25.6824524877455],[1981,27.0170313493366],[1982,27.0796299973304],[1983,27.3979773141537],[1984,29.1846266640435],[1985,29.5213373257113],[1986,26.4658761485097],[1987,25.9309536203352],[1988,26.0544615588169],[1989,27.0875113337688],[1990,26.8989516439025],[1991,26.6709015495564],[1992,27.7651674424686],[1993,27.3545458678608],[1994,28.369217241554],[1995,29.8885534752313],[1996,30.318073918799],[1997,32.0912352355683],[1998,32.3133372651189],[1999,32.8439011709889],[2000,36.2760907452683],[2001,36.1996099048017],[2002,35.3053920392553],[2003,34.5615153605405],[2004,35.8315654131583],[2005,37.1633367985355],[2006,39.3847151036765],[2007,39.8029366982984],[2008,40.7666142018548],[2009,36.4024694388194],[2010,39.6998241363],[2011,42.1714373233388]]},
{ label: "Latin America & Caribbean", data: [[1960,11.6801502887395],[1961,11.3068909825283],[1962,9.97309295285666],[1963,12.0317810092424],[1964,10.5444686012308],[1965,11.0047958728952],[1966,10.7325991368299],[1967,10.2989619967186],[1968,10.3163959201847],[1969,10.599783107639],[1970,10.8576274587034],[1971,10.3325749300224],[1972,10.9702596266082],[1973,12.0589626872199],[1974,13.3468415036769],[1975,11.9939213617285],[1976,12.5891378419163],[1977,13.5394722623608],[1978,13.053399273666],[1979,13.8315865018492],[1980,14.6318252137661],[1981,14.1820944144479],[1982,14.821027293738],[1983,16.9316858199973],[1984,17.6251531823604],[1985,17.5042284635814],[1986,16.119768783866],[1987,16.6993232372486],[1988,17.889447887822],[1989,18.4934356031643],[1990,17.2531165484436],[1991,15.9173222169095],[1992,16.9266968463263],[1993,16.4380776103162],[1994,16.5637373981862],[1995,19.9306959714869],[1996,20.5249314107752],[1997,19.7368777125796],[1998,19.2402544769975],[1999,20.3665517169769],[2000,21.2674511194714],[2001,20.8103491951474],[2002,23.9379669771566],[2003,24.2371887383376],[2004,25.644895888235],[2005,25.6485125271523],[2006,25.8229227711689],[2007,25.1220734261609],[2008,25.1499944862104],[2009,22.2265963037048],[2010,23.6355416877128],[2011,23.4716727623892]]},
{ label: "Middle East & North Africa", data: [[1968,31.1954177605503],[1969,31.7532529831496],[1970,32.8237340314584],[1971,34.7691366131319],[1972,36.9923168026396],[1973,49.7819316540798],[1974,45.3845558951964],[1975,46.1395528114332],[1976,42.5935638169774],[1977,41.2226890670249],[1978,38.025661102971],[1979,42.0240110913826],[1980,42.8324808711264],[1981,42.4055018084372],[1982,36.8277815986071],[1983,32.3090877438323],[1984,31.0779265154029],[1985,29.4370693262713],[1986,24.4390675691177],[1987,27.030237340151],[1988,26.9057588528943],[1989,28.5322869730439],[1990,31.8635763937074],[1991,29.6799247729981],[1992,30.7107074561456],[1993,31.4958669148517],[1994,31.8699580120762],[1995,31.5168366196111],[1996,32.1653504917391],[1997,31.456930199297],[1998,26.6130023089219],[1999,30.542038536622],[2000,36.0114784286415],[2001,34.8841891512082],[2002,36.3238453040025],[2003,39.5771649404076],[2004,44.065950650746],[2005,48.4776410382859],[2006,49.4755109777419],[2007,49.7233865337523],[2008,54.0728367559881],[2009,44.0788366315137],[2010,45.5278302716793]]},
{ label: "North America", data: [[1960,5.94754327218195],[1961,5.92748715818847],[1962,5.82680801788986],[1963,5.92540080473158],[1964,6.21758930041988],[1965,6.06570506420214],[1966,6.14885214241397],[1967,6.2320872942773],[1968,6.33580926376179],[1969,6.36006573222534],[1970,6.88876422201218],[1971,6.67777678552917],[1972,6.80427193995872],[1973,8.00559848264531],[1974,9.55759320325411],[1975,9.4393954324239],[1976,9.1589415612032],[1977,8.89591296242441],[1978,9.29730938599535],[1979,10.1965027290889],[1980,11.3028057083913],[1981,10.9346501604645],[1982,9.86474906803964],[1983,9.0309584062782],[1984,9.09976766519785],[1985,8.57495931810531],[1986,8.56759112911168],[1987,8.9723543125207],[1988,9.92708416485426],[1989,10.3084286019779],[1990,10.6457960274042],[1991,11.0305505721746],[1992,11.2339107004334],[1993,11.2646964199533],[1994,11.8335841544427],[1995,12.7568858481879],[1996,12.9478457113902],[1997,13.3603630283757],[1998,12.8815121298915],[1999,12.7350723006425],[2000,13.2704733197558],[2001,12.2020797739052],[2002,11.5402434865045],[2003,11.2400844659383],[2004,11.8358462338256],[2005,12.1582006160079],[2006,12.6693167660766],[2007,13.391711895893],[2008,14.4173948139286],[2009,12.5385969514618],[2010,13.8639721540984],[2011,15.0782435440303]]},
{ label: "South Asia", data: [[1960,5.70858107039607],[1961,5.58067092255634],[1962,5.47386897904943],[1963,5.46535397218645],[1964,4.95934426187296],[1965,4.65879667211718],[1966,5.26997707946099],[1967,5.46835451845537],[1968,5.40697860254654],[1969,5.04207163165542],[1970,5.18643063673445],[1971,4.85196389375989],[1972,5.52975382514087],[1973,5.97778216101029],[1974,6.27896931907707],[1975,6.57611948068063],[1976,7.56369610033929],[1977,7.50526771590905],[1978,7.33453718123928],[1979,7.82439473212815],[1980,7.60725113913815],[1981,7.39363587943556],[1982,7.06455717952971],[1983,7.14155450720459],[1984,7.1989219087044],[1985,6.46898262008126],[1986,6.50206413328255],[1987,6.99517788157208],[1988,7.41924119628763],[1989,8.23610832868556],[1990,8.55451743624778],[1991,9.8108313873773],[1992,10.3173148583811],[1993,11.1433526427079],[1994,11.1947252827273],[1995,12.245678814517],[1996,11.8981020737746],[1997,12.1934226343976],[1998,12.5561764997632],[1999,12.7747607030488],[2000,13.8978924450432],[2001,13.7043216681814],[2002,14.9778075894547],[2003,15.6784668668869],[2004,17.8165795679021],[2005,19.1072703192181],[2006,20.5586174659141],[2007,20.0091409944781],[2008,22.2215822543986],[2009,19.3862828436976],[2010,21.3637889508312],[2011,23.2417030986612]]},
{ label: "Sub-Saharan Africa", data: [[1960,25.5082919987422],[1961,25.3967773829262],[1962,25.1513207204418],[1963,25.5604700351516],[1964,25.3764620706126],[1965,24.1720056044611],[1966,23.9473505637721],[1967,23.1708677868734],[1968,23.7006023135273],[1969,22.8548438248376],[1970,21.8363985230441],[1971,21.7465020197567],[1972,23.5933285153941],[1973,24.2284484067143],[1974,27.9894806993338],[1975,25.3782250522716],[1976,26.4445568645147],[1977,28.4323827652335],[1978,28.2407545259293],[1979,30.3521260132356],[1980,31.917317287295],[1981,26.5400231625996],[1982,24.7747478424802],[1983,23.8817206037714],[1984,25.2744113314672],[1985,28.2894089087691],[1986,27.3511102707732],[1987,28.0077656429154],[1988,26.4212638615689],[1989,26.7086793755833],[1990,26.3876153111575],[1991,24.1693577701585],[1992,25.0669216843661],[1993,26.1576055766999],[1994,27.9355565590642],[1995,27.8004944512353],[1996,29.8041432729699],[1997,28.7978103968031],[1998,27.5741510834576],[1999,28.2655108010711],[2000,32.5347628932871],[2001,31.9725896316694],[2002,32.1351335294832],[2003,31.1255948548804],[2004,31.2391270237925],[2005,32.80491104427],[2006,33.734986466356],[2007,34.6169758938263],[2008,36.8990503688163],[2009,29.8949887488995],[2010,31.412629197565],[2011,33.5660459229262]]}
];
$.each(exports, function(idx,region) {
var div = $("<div>").css({
"600px",
height: "50px"
});
$("#charts").append(div);
$.plot(div, [region.data], {
series: {lines: {fill: true, lineWidth: 1}, shadowSize: 0},
xaxis: {show: true, labelHeight: 0, min:1960, max: 2011, tickFormatter: function() {return "";}},
yaxis: {show: false, min: 0, max: 60},
grid: {show: true, margin: 0, borderWidth: 0, borderColor: null, margin: 0, labelMargin: 0, axisMargin: 0, minBorderMargin: 0, hoverable: true, autoHighlight: false},
});
var legend = $("<p>").text(region.label).css({
'height': "17px",
'margin-bottom': "0",
'margin-left': "10px",
'margin-top': "0",
'padding-top': "33px"
});
$("#chart-legends").append(legend);
var value = $("<div>").css({
'position': "absolute",
'top': (div.position().top - 3) + "px",
'display': "none",
'z-index': 1,
'font-size': "11px",
'color': "black" // "#fc7d00"
});
region.value = value;
$("#chart-wrapper").append(value);
});
var dummy = []
for (var i=1960; i<2012; i++) dummy.push([i, 0]);
var div = $("<div>").css({
"600px",
height: "15px"
});
$("#charts").append(div);
var dummyPlot = $.plot(div, [dummy], {
xaxis: {show: true, labelHeight: 12, min:1960, max: 2011},
yaxis: {show: false, min: 100, max: 200},
grid: {show: true, margin: 0, borderWidth: 0, margin: 0, labelMargin: 0, axisMargin: 0, minBorderMargin: 0},
});
$("#charts").on("plothover", function(ev, pos) {
var year = Math.round(pos.x);
var left = dummyPlot.pointOffset(pos).left;
var height = $("#charts").height();
$("#marker").css({
'top': 0,
'left': left,
'width': "1px",
'height': height
}).show();
$.each(exports, function(idx, region) {
matched = $.grep(region.data, function(pt) { return pt[0] === year; });
if (matched.length > 0) {
region.value.text(year + ": " + Math.round(matched[0][1]) + "%");
} else {
region.value.text("");
}
region.value.css("left", (left+4)+"px").show();
});
}).on("mouseout", function(ev) {
if (ev.relatedTarget.id !== "marker") {
$("#marker").hide();
$.each(exports, function(idx, region) {
region.value.hide();
});
}
});
$("#marker").on("mouseout", function(ev) {
$("#marker").hide();
$.each(exports, function(idx, region) {
region.value.hide();
});
});
});
</script>
</body>
</html>
第三章在页面整合图表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table>
<thead>
<tr>
<th>Symbol</th>
<th>Company</th>
<th>2012 Performance</th>
<th>Annual Gain (Loss)</th>
</tr>
</thead>
<tbody>
<tr class='barclays'>
<td>AAPL</td>
<td>Apple Inc.</td>
<td class='sparkline'>418.68,416.11,416.6,443.34,455.63,489.08,497.7,517.81,540.38,540.37,580.42,590.8,594.27,628.1,599.9,567.94,597.69,560.27,561.72,525.71,557.34,556.05,575.21,569.08,576.98,578.86,600.55,599.64,598.98,580.01,610.28,618.87,645.16,660.2,662.22,677.35,688.14,696.91,664.07,649.62,626.85,607.07,601.25,574.18,547.06,527.68,571.5,585.28,533.25,509.79,519.33,509.59,532.17</td>
<td>27%</td>
</tr>
<tr class='barclays'>
<td>ALTR</td>
<td>Altera Corporation</td>
<td class='sparkline'>37.1,36.92,39.93,39.81,40.43,39.76,39.73,38.55,36.89,37.68,39.18,38.47,39.49,37.85,37.17,34.95,35.26,33.4,33.53,33.03,34.21,32.09,33.29,32.86,33.24,33.64,32.54,31.16,31.04,35.82,35.58,37,36.23,36.23,37.21,37.85,38.03,36.62,33.89,33.32,32.22,32.4,30.3,30.41,30.64,30.45,31.86,32.39,31.58,32.86,34.5,34.01,34.39</td>
<td>(7%)</td>
</tr>
<tr>
<td>BMY</td>
<td>Bristol Meyers Squibb Co.</td>
<td class='sparkline' data-LineColor='#5ab7aa' data-FillColor='#a2e3d9'>32.86,32.46,31.36,31.01,30.98,30.64,31.81,31.31,31.3,31.61,31.87,31.65,32.41,32.67,31.57,33.21,32.32,32.37,32.12,31.74,32.1,32.33,33.34,33.21,34.3,34.88,33.9,34.64,34.69,35.31,31.97,31.07,30.92,31.9,32.33,32.61,32.55,32.92,33.05,33.28,32.73,33.45,33.26,32.82,31.88,31.37,32.27,32.28,32.21,32.38,32.21,31.56,32.24</td>
<td>(2%)</td>
</tr>
<tr>
<td>BRKA</td>
<td>Berkshire Hathaway Inc.</td>
<td class='sparkline'>114500,116520,119775,119211,119800,117980,119190,120000,117434,119065,122190,122170,121900,121295,118385,118580,120925,121950,122795,119850,119500,119845,122000,123375,122670,124945,123898,126625,125730,127735,128479,127175,128880,128225,126560,129942,133000,134584,132700,135555,132502,133841,129725,130550,127585,129345,132606,131916,131090,133795,134800,133000,134060</td>
<td>17%</td>
</tr>
<tr>
<td>COP</td>
<td>ConocoPhillips</td>
<td class='sparkline'>52.95,51.26,51.89,50.58,51.35,52.65,53.95,55.85,57.1,56.74,56.76,56.26,55.9,55.42,54.15,53.59,52.93,51.29,51.61,49.65,50.91,50.01,52.73,54.18,52.18,54.59,53.49,53.71,55.34,54.34,55.07,56.62,56.73,55.71,56.14,55.99,57.54,56.7,56.52,56.92,56.17,57.45,57.31,57.65,55.67,55.03,56.67,56.94,57.94,57.69,58.61,57.07,57.99</td>
<td>10%</td>
</tr>
<tr class='barclays'>
<td>CTXS</td>
<td>Citrix Systems, Inc.</td>
<td class='sparkline'>62.02,64.85,68.12,65.14,68.78,71.46,74.77,75.16,75.43,76.27,78.2,77.68,78.91,78.28,75.12,77.78,85.78,82.85,79.46,74.82,75.43,70.79,77.12,80.12,80.14,83.94,77.45,76.63,80.75,77.81,72.44,76.26,78.08,77,77.69,80.59,81.74,81.19,76.53,71.57,67.7,64.16,62.82,62.77,60.17,59.21,61.77,61.16,62.03,65.02,66.15,64.3,65.62</td>
<td>6%</td>
</tr>
<tr>
<td>CVX</td>
<td>Chevron Corporation</td>
<td class='sparkline'>104.78,102.63,103.4,100.57,102.06,101.85,103.97,106.33,106.85,106.81,107.5,103.68,104.51,102.11,98.24,99.94,103.52,101.11,100.1,96.84,97.24,94.83,99.18,102.62,98.79,103.77,103.34,104.27,107.4,107.47,109.3,111.69,111.7,111.05,111.2,113.03,116.25,116.79,115.56,116.5,111.11,112.41,110.23,107.44,104.94,102.4,105.47,105.69,106.99,107.82,109.71,106.45,108.14</td>
<td>3%</td>
</tr>
<tr>
<td>F</td>
<td>Ford Motor Company</td>
<td class='sparkline'>11.5,11.82,12.36,12.03,12.6,12.26,12.57,12.05,12.54,12.4,12.33,12.14,12.3,12.29,11.75,11.24,11.43,10.56,10.47,9.91,10.49,10.02,10.55,10.24,10.09,9.49,9.4,9.18,9.12,8.91,9.05,9.3,9.58,9.44,9.29,10.09,10.48,10.35,9.81,10.11,10.07,10.13,10.31,11.17,10.93,10.5,11.1,11.45,11.48,11.1,11.86,12.87,12.95</td>
<td>13%</td>
</tr>
<tr>
<td>FNMA</td>
<td>Federal National Mortgage Association</td>
<td class='sparkline'>0.2,0.23,0.24,0.23,0.24,0.3,0.38,0.32,0.32,0.32,0.31,0.31,0.29,0.28,0.27,0.29,0.28,0.27,0.3,0.27,0.27,0.26,0.26,0.26,0.26,0.26,0.25,0.24,0.24,0.24,0.24,0.28,0.24,0.25,0.25,0.24,0.28,0.28,0.28,0.28,0.27,0.27,0.27,0.27,0.28,0.27,0.28,0.27,0.27,0.27,0.26,0.26,0.26</td>
<td>30%</td>
</tr>
<tr>
<td>GE</td>
<td>General Electric Company</td>
<td class='sparkline'>18.03,18.21,18.51,18.39,18.38,18.25,18.64,18.76,18.5,18.57,19.7,19.29,19.57,19.01,18.41,18.88,19.29,18.86,18.54,18.48,18.72,18.08,18.72,19.5,19.48,20.5,19.67,19.44,19.54,20.57,20.61,20.75,20.65,20.46,20.37,21.23,21.74,22.33,22.5,22.91,22.28,21.83,20.92,21.12,20.81,19.97,20.85,20.94,21.27,21.42,20.88,20.44,20.99</td>
<td>16%</td>
</tr>
<tr class='barclays'>
<td>GLW</td>
<td>Corning Incorporated</td>
<td class='sparkline'>13.18,13.64,14.05,12.3,13.23,13.25,13.49,13.4,12.73,13.02,14.04,13.74,13.8,13.27,13.31,12.91,14.16,13.39,13.04,12.49,12.65,12.43,12.94,12.82,12.67,12.74,12.61,12.14,12.09,11.36,11.18,11.4,11.82,11.35,11.89,12.45,13.01,13.11,13.04,13.19,12.88,13.41,11.72,11.61,11.25,10.9,11.29,12.23,12.54,12.62,12.6,12.47,12.62</td>
<td>(4%)</td>
</tr>
<tr>
<td>GM</td>
<td>General Motors Company</td>
<td class='sparkline'>22.92,24.29,25,24.37,26.18,25.5,27.34,26.07,26.45,25.62,25.57,25.17,25.65,24.81,23.8,23.6,23.53,22.36,22,21.18,22.44,22.01,22.05,21.74,20.6,19.72,20.31,19.62,19.36,19.67,20.04,20.54,22.01,21.18,21.35,23.37,24.14,24.8,22.75,24.8,24.44,24.59,23.28,25.79,25.04,23.85,25.21,25.88,25.19,24.61,27.32,27.85,28.83</td>
<td>26%</td>
</tr>
<tr>
<td>HPQ</td>
<td>Hewlett-Packard Company</td>
<td class='sparkline'>25.67,25.76,27.35,27.11,28.27,27.91,28.77,25.9,24.62,23.51,23.93,23.09,23.29,22.58,24.01,23.95,24.19,23.72,22.62,20.97,21.82,20.77,21.8,21.27,20.02,19.77,19.24,18.66,18.29,18.25,17.95,19.37,19.19,17.28,16.59,17.12,18,17.42,16.9,14.59,14.27,14.34,13.96,13.63,13.48,12.73,12.32,12.87,13.81,14.75,14.34,13.68,14.25</td>
<td>(44%)</td>
</tr>
<tr class='barclays'>
<td>QCOM</td>
<td>QUALCOMM, Inc.</td>
<td class='sparkline'>55.28,55.65,56.83,56.88,60.1,60.76,61.54,62.45,61.66,63.14,64.61,65.86,67.22,66.36,65.85,61.49,63.39,61.15,61.1,55.29,56.62,54.68,58.29,56.05,55.19,55.23,54.87,54.54,57.22,58.86,59.76,61.48,62.78,61.93,60.97,61.69,64.62,64.02,62.22,62.39,58.66,58.52,58.81,59.07,61.38,61.69,62.88,63.37,63.86,59.83,61.61,60.64,61.86</td>
<td>12%</td>
</tr>
<tr class='barclays'>
<td>TER</td>
<td>Teradyne, Inc.</td>
<td class='sparkline'>14.63,14.84,16.14,16.95,17.03,16.5,17.01,16.38,16.11,16.21,17.05,16.82,16.89,16.42,16.29,16.3,17.39,16.13,15.71,14.32,14.79,13.61,14.38,14.46,14.31,14.06,13.67,13.21,13.64,14.97,14.8,15.59,15.94,15.74,15.62,16.28,16.43,14.6,14.22,14.07,13.62,14.12,14.5,15.31,15.51,15.03,15.93,15.64,15.84,16.49,16.75,16.42,16.89</td>
<td>15%</td>
</tr>
<tr class='barclays'>
<td>TSLA</td>
<td>Tesla Motors Inc</td>
<td class='sparkline'>26.91,22.79,26.6,29.33,31.15,31.1,34.97,33.75,34.04,34.74,35.32,34.08,37.24,34.48,33.59,33.16,33.34,31.83,32.25,27.56,29.81,28.15,30.08,29.91,33.79,31.29,30.99,34.25,31.79,29.51,27.27,29.94,30.01,29.5,28.52,29.35,30.39,30.02,29.28,28.89,27.64,27.74,27.38,28.92,30.32,31.84,32.13,33.82,34.17,33.81,34,33.22,33.87</td>
<td>26%</td>
</tr>
<tr>
<td>WMT</td>
<td>Wal-Mart Stores, Inc.</td>
<td class='sparkline'>57.58,58.11,59.54,59.25,60.54,60.41,60.98,57.38,57.59,59.03,59.77,59.68,60.13,59.61,58.72,61.35,57.99,57.67,58.77,61.75,64.6,64.84,67.48,67.01,66.57,68.96,70.58,72.38,71.46,73.71,73.74,73.27,71.59,71.71,72.2,73.41,74.09,74.04,73.39,74.72,75.39,75.2,74.7,72.37,71.91,67.65,69.81,71.62,72.29,68.75,68.65,67.61,68.23</td>
<td>18%</td>
</tr>
<tr>
<td>XOM</td>
<td>Exxon Mobil Corporation</td>
<td class='sparkline'>83.01,82.78,85.33,83.71,82.82,82.17,83.96,85.65,84.66,82.67,84.76,83.89,85.05,83.17,81.34,83.65,84.41,82.93,82.05,80.44,81.04,76.94,79.82,82.17,81.07,84.49,83.73,84.39,84.86,86.34,86.44,87.89,87.85,87.5,86.76,89.36,91.73,91.35,90.88,91.97,90.46,91.58,90.06,89.71,87.21,86.45,89.09,88.14,88.6,88.08,87.23,85.1,86.55</td>
<td>4%</td>
</tr>
</tbody>
</table>
<!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.0.0/jquery.sparkline.min.js"></script>
<script>
$(function() {
var sparkline_default = {
lineColor: "#fca44e",
fillColor: "#fcdea2",
spotColor: false,
minSpotColor: false,
maxSpotColor: false,
enableTagOptions: true,
tagOptionsPrefix: "data-"
};
var sparkline_barclays = $.extend( {}, sparkline_default, {
lineColor: "#745eb7",
fillColor: "#95a7e8",
});
$('tr:not(.barclays) .sparkline').sparkline('html',sparkline_default);
$('tr.barclays .sparkline').sparkline('html',sparkline_barclays);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="stock">
<div style="float:left">
<div class="chart"></div>
<div class="info" style="font-size:0.8em"> </div>
</div>
<div style="float:left">
<div class="details" style="font-size:0.8em;line-height:1.3em;padding-left:10px;padding-top:1px"></div>
</div>
</div>
<!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.0.0/jquery.sparkline.min.js"></script>
<script>
$(function() {
var stock = [
{ date: "2012-01-03", open: 409.40, high: 422.75, low: 409.00, close: 422.40, volume: 10283900, adj_close: 416.26 },
{ date: "2012-01-09", open: 425.50, high: 427.75, low: 418.66, close: 419.81, volume: 9327900, adj_close: 413.70 },
{ date: "2012-01-17", open: 424.20, high: 431.37, low: 419.75, close: 420.30, volume: 10673200, adj_close: 414.19 },
{ date: "2012-01-23", open: 422.67, high: 454.45, low: 419.55, close: 447.28, volume: 17397900, adj_close: 440.77 },
{ date: "2012-01-30", open: 445.71, high: 460.00, low: 445.39, close: 459.68, volume: 10817600, adj_close: 452.99 },
{ date: "2012-02-06", open: 458.38, high: 497.62, low: 458.20, close: 493.42, volume: 17778800, adj_close: 486.24 },
{ date: "2012-02-13", open: 499.53, high: 526.29, low: 486.63, close: 502.12, volume: 28314900, adj_close: 494.82 },
{ date: "2012-02-21", open: 506.88, high: 522.90, low: 504.12, close: 522.41, volume: 18499900, adj_close: 514.81 },
{ date: "2012-02-27", open: 521.31, high: 548.21, low: 516.28, close: 545.18, volume: 22964000, adj_close: 537.25 },
{ date: "2012-03-05", open: 545.42, high: 547.74, low: 516.22, close: 545.17, volume: 23951800, adj_close: 537.24 },
{ date: "2012-03-12", open: 548.98, high: 600.01, low: 547.00, close: 585.57, volume: 32158400, adj_close: 577.05 },
{ date: "2012-03-19", open: 598.37, high: 609.65, low: 589.05, close: 596.05, volume: 24402100, adj_close: 587.38 },
{ date: "2012-03-26", open: 599.79, high: 621.45, low: 595.26, close: 599.55, volume: 22840000, adj_close: 590.83 },
{ date: "2012-04-02", open: 601.83, high: 634.66, low: 600.38, close: 633.68, volume: 23635600, adj_close: 624.46 },
{ date: "2012-04-09", open: 626.13, high: 644.00, low: 603.51, close: 605.23, volume: 26127500, adj_close: 596.43 },
{ date: "2012-04-16", open: 610.06, high: 620.25, low: 570.42, close: 572.98, volume: 34975300, adj_close: 564.65 },
{ date: "2012-04-23", open: 570.61, high: 618.00, low: 555.00, close: 603.00, volume: 27794600, adj_close: 594.23 },
{ date: "2012-04-30", open: 597.80, high: 598.40, low: 565.17, close: 565.25, volume: 17607600, adj_close: 557.03 },
{ date: "2012-05-07", open: 561.50, high: 575.88, low: 558.73, close: 566.71, volume: 15505800, adj_close: 558.47 },
{ date: "2012-05-14", open: 562.57, high: 567.51, low: 522.18, close: 530.38, volume: 20281200, adj_close: 522.67 },
{ date: "2012-05-21", open: 534.50, high: 576.50, low: 534.05, close: 562.29, volume: 19540000, adj_close: 554.11 },
{ date: "2012-05-29", open: 570.90, high: 581.50, low: 560.52, close: 560.99, volume: 17166000, adj_close: 552.83 },
{ date: "2012-06-04", open: 561.50, high: 580.58, low: 548.50, close: 580.32, volume: 14813900, adj_close: 571.88 },
{ date: "2012-06-11", open: 587.72, high: 588.50, low: 566.70, close: 574.13, volume: 14293200, adj_close: 565.78 },
{ date: "2012-06-18", open: 570.96, high: 590.00, low: 570.37, close: 582.10, volume: 12654100, adj_close: 573.63 },
{ date: "2012-06-25", open: 577.30, high: 584.00, low: 565.61, close: 584.00, volume: 10630300, adj_close: 575.51 },
{ date: "2012-07-02", open: 584.73, high: 614.34, low: 583.60, close: 605.88, volume: 13795700, adj_close: 597.07 },
{ date: "2012-07-09", open: 605.30, high: 619.87, low: 592.68, close: 604.97, volume: 15001100, adj_close: 596.17 },
{ date: "2012-07-16", open: 605.12, high: 615.35, low: 603.15, close: 604.30, volume: 12013700, adj_close: 595.51 },
{ date: "2012-07-23", open: 594.40, high: 609.68, low: 570.00, close: 585.16, volume: 19578500, adj_close: 576.65 },
{ date: "2012-07-30", open: 590.92, high: 617.98, low: 587.82, close: 615.70, volume: 13593200, adj_close: 606.74 },
{ date: "2012-08-06", open: 617.29, high: 625.00, low: 615.26, close: 621.70, volume: 8955900, adj_close: 615.29 },
{ date: "2012-08-13", open: 623.39, high: 648.19, low: 623.25, close: 648.11, volume: 11240200, adj_close: 641.43 },
{ date: "2012-08-20", open: 650.01, high: 674.88, low: 648.11, close: 663.22, volume: 20349200, adj_close: 656.38 },
{ date: "2012-08-27", open: 679.99, high: 680.87, low: 657.25, close: 665.24, volume: 10987500, adj_close: 658.38 },
{ date: "2012-09-04", open: 665.76, high: 682.48, low: 664.50, close: 680.44, volume: 12724300, adj_close: 673.42 },
{ date: "2012-09-10", open: 680.45, high: 696.98, low: 656.00, close: 691.28, volume: 20736000, adj_close: 684.15 },
{ date: "2012-09-17", open: 699.35, high: 705.07, low: 693.62, close: 700.09, volume: 14332600, adj_close: 692.87 },
{ date: "2012-09-24", open: 686.86, high: 695.12, low: 660.35, close: 667.10, volume: 20459000, adj_close: 660.22 },
{ date: "2012-10-01", open: 671.16, high: 676.75, low: 650.65, close: 652.59, volume: 18290000, adj_close: 645.86 },
{ date: "2012-10-08", open: 646.88, high: 647.56, low: 623.55, close: 629.71, volume: 21378800, adj_close: 623.21 },
{ date: "2012-10-15", open: 632.35, high: 652.79, low: 609.62, close: 609.84, volume: 18514400, adj_close: 603.55 },
{ date: "2012-10-22", open: 612.42, high: 635.38, low: 591.00, close: 604.00, volume: 24908300, adj_close: 597.77 },
{ date: "2012-10-31", open: 594.88, high: 603.00, low: 574.75, close: 576.80, volume: 17508000, adj_close: 570.85 },
{ date: "2012-11-05", open: 583.52, high: 590.74, low: 533.72, close: 547.06, volume: 26312500, adj_close: 543.89 },
{ date: "2012-11-12", open: 554.15, high: 554.50, low: 505.75, close: 527.68, volume: 25590900, adj_close: 524.62 },
{ date: "2012-11-19", open: 540.71, high: 572.00, low: 539.88, close: 571.50, volume: 18856200, adj_close: 568.19 },
{ date: "2012-11-26", open: 575.90, high: 594.25, low: 572.26, close: 585.28, volume: 18505600, adj_close: 581.89 },
{ date: "2012-12-03", open: 593.65, high: 594.59, low: 518.63, close: 533.25, volume: 28073100, adj_close: 530.16 },
{ date: "2012-12-10", open: 525.00, high: 549.56, low: 505.58, close: 509.79, volume: 23891500, adj_close: 506.84 },
{ date: "2012-12-17", open: 508.93, high: 534.90, low: 501.23, close: 519.33, volume: 20790100, adj_close: 516.32 },
{ date: "2012-12-24", open: 520.35, high: 524.25, low: 504.66, close: 509.59, volume: 11496300, adj_close: 506.64 },
{ date: "2012-12-31", open: 510.53, high: 535.40, low: 509.00, close: 532.17, volume: 23553300, adj_close: 529.09 },
];
$('#stock .chart').sparkline(
$.map(stock, function(wk) { return wk.volume; }),
{
type: "bar",
barColor: "#fcdea2",
height: 40,
180,
disableTooltips: true,
highlightLighten: 0.8,
}
)
.sparkline(
$.map(stock, function(wk) { return wk.adj_close; }),
{
composite: true,
lineColor: "#745eb7",
fillColor: "rgba(149, 167, 232, 0.2)",
spotColor: false,
minSpotColor: "#fca44e",
maxSpotColor: "#fca44e",
disableTooltips: true,
highlightLighten: 0.8,
}
)
.on('sparklineRegionChange', function(ev) {
var idx = ev.sparklines[1].getCurrentRegionFields().offset;
if (idx) {
$("#stock .info").html(
"Week of " + stock[idx].date
+ " Close: $" + stock[idx].adj_close
+ " Volume: " + Math.round(stock[idx].volume/10000)/100 + "M"
);
$("#stock .details")
.sparkline([
stock[idx].low,
Math.min(stock[idx].open,stock[idx].close),
stock[idx].adj_close,
Math.max(stock[idx].open,stock[idx].close),
stock[idx].high
], {
type: "box",
showOutliers: false,
boxLineColor: "#745eb7",
whiskerColor: "#745eb7",
boxFillColor: "#E0E3F0",
medianColor: (stock[idx].open < stock[idx].close) ? "#3fb582" : "#f90023"
});
}
}).on('mouseout', function() {
$("#stock .info").html(" ");
$("#stock .details").empty();
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="chart"></div>
<div id="widget-control" style="600px;display:none">
<a href="#" title="Click to hide" style="float:right">×</a>
</div>
<div id="widget" style="600px;height:600px;display:none">
<iframe class="wolframAlphaWidgetResults" id="wolframAlphaWidgetResults44381" width="100%" frameborder="0" style="background-color: transparent; height: 600px; background-position: initial initial; background-repeat: initial initial; " src="http://www.wolframalpha.com/widget/input/?input=%5B%2F%2Fstock%3Aaapl%2F%2F%5D&id=a80a2e4562755353141f214b5ad28081"></iframe>
</div>
<!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.0.0/jquery.sparkline.min.js"></script>
<script>
$(function() {
var stock = [
{ date: "2012-01-03", open: 409.40, high: 422.75, low: 409.00, close: 422.40, volume: 10283900, adj_close: 416.26 },
{ date: "2012-01-09", open: 425.50, high: 427.75, low: 418.66, close: 419.81, volume: 9327900, adj_close: 413.70 },
{ date: "2012-01-17", open: 424.20, high: 431.37, low: 419.75, close: 420.30, volume: 10673200, adj_close: 414.19 },
{ date: "2012-01-23", open: 422.67, high: 454.45, low: 419.55, close: 447.28, volume: 17397900, adj_close: 440.77 },
{ date: "2012-01-30", open: 445.71, high: 460.00, low: 445.39, close: 459.68, volume: 10817600, adj_close: 452.99 },
{ date: "2012-02-06", open: 458.38, high: 497.62, low: 458.20, close: 493.42, volume: 17778800, adj_close: 486.24 },
{ date: "2012-02-13", open: 499.53, high: 526.29, low: 486.63, close: 502.12, volume: 28314900, adj_close: 494.82 },
{ date: "2012-02-21", open: 506.88, high: 522.90, low: 504.12, close: 522.41, volume: 18499900, adj_close: 514.81 },
{ date: "2012-02-27", open: 521.31, high: 548.21, low: 516.28, close: 545.18, volume: 22964000, adj_close: 537.25 },
{ date: "2012-03-05", open: 545.42, high: 547.74, low: 516.22, close: 545.17, volume: 23951800, adj_close: 537.24 },
{ date: "2012-03-12", open: 548.98, high: 600.01, low: 547.00, close: 585.57, volume: 32158400, adj_close: 577.05 },
{ date: "2012-03-19", open: 598.37, high: 609.65, low: 589.05, close: 596.05, volume: 24402100, adj_close: 587.38 },
{ date: "2012-03-26", open: 599.79, high: 621.45, low: 595.26, close: 599.55, volume: 22840000, adj_close: 590.83 },
{ date: "2012-04-02", open: 601.83, high: 634.66, low: 600.38, close: 633.68, volume: 23635600, adj_close: 624.46 },
{ date: "2012-04-09", open: 626.13, high: 644.00, low: 603.51, close: 605.23, volume: 26127500, adj_close: 596.43 },
{ date: "2012-04-16", open: 610.06, high: 620.25, low: 570.42, close: 572.98, volume: 34975300, adj_close: 564.65 },
{ date: "2012-04-23", open: 570.61, high: 618.00, low: 555.00, close: 603.00, volume: 27794600, adj_close: 594.23 },
{ date: "2012-04-30", open: 597.80, high: 598.40, low: 565.17, close: 565.25, volume: 17607600, adj_close: 557.03 },
{ date: "2012-05-07", open: 561.50, high: 575.88, low: 558.73, close: 566.71, volume: 15505800, adj_close: 558.47 },
{ date: "2012-05-14", open: 562.57, high: 567.51, low: 522.18, close: 530.38, volume: 20281200, adj_close: 522.67 },
{ date: "2012-05-21", open: 534.50, high: 576.50, low: 534.05, close: 562.29, volume: 19540000, adj_close: 554.11 },
{ date: "2012-05-29", open: 570.90, high: 581.50, low: 560.52, close: 560.99, volume: 17166000, adj_close: 552.83 },
{ date: "2012-06-04", open: 561.50, high: 580.58, low: 548.50, close: 580.32, volume: 14813900, adj_close: 571.88 },
{ date: "2012-06-11", open: 587.72, high: 588.50, low: 566.70, close: 574.13, volume: 14293200, adj_close: 565.78 },
{ date: "2012-06-18", open: 570.96, high: 590.00, low: 570.37, close: 582.10, volume: 12654100, adj_close: 573.63 },
{ date: "2012-06-25", open: 577.30, high: 584.00, low: 565.61, close: 584.00, volume: 10630300, adj_close: 575.51 },
{ date: "2012-07-02", open: 584.73, high: 614.34, low: 583.60, close: 605.88, volume: 13795700, adj_close: 597.07 },
{ date: "2012-07-09", open: 605.30, high: 619.87, low: 592.68, close: 604.97, volume: 15001100, adj_close: 596.17 },
{ date: "2012-07-16", open: 605.12, high: 615.35, low: 603.15, close: 604.30, volume: 12013700, adj_close: 595.51 },
{ date: "2012-07-23", open: 594.40, high: 609.68, low: 570.00, close: 585.16, volume: 19578500, adj_close: 576.65 },
{ date: "2012-07-30", open: 590.92, high: 617.98, low: 587.82, close: 615.70, volume: 13593200, adj_close: 606.74 },
{ date: "2012-08-06", open: 617.29, high: 625.00, low: 615.26, close: 621.70, volume: 8955900, adj_close: 615.29 },
{ date: "2012-08-13", open: 623.39, high: 648.19, low: 623.25, close: 648.11, volume: 11240200, adj_close: 641.43 },
{ date: "2012-08-20", open: 650.01, high: 674.88, low: 648.11, close: 663.22, volume: 20349200, adj_close: 656.38 },
{ date: "2012-08-27", open: 679.99, high: 680.87, low: 657.25, close: 665.24, volume: 10987500, adj_close: 658.38 },
{ date: "2012-09-04", open: 665.76, high: 682.48, low: 664.50, close: 680.44, volume: 12724300, adj_close: 673.42 },
{ date: "2012-09-10", open: 680.45, high: 696.98, low: 656.00, close: 691.28, volume: 20736000, adj_close: 684.15 },
{ date: "2012-09-17", open: 699.35, high: 705.07, low: 693.62, close: 700.09, volume: 14332600, adj_close: 692.87 },
{ date: "2012-09-24", open: 686.86, high: 695.12, low: 660.35, close: 667.10, volume: 20459000, adj_close: 660.22 },
{ date: "2012-10-01", open: 671.16, high: 676.75, low: 650.65, close: 652.59, volume: 18290000, adj_close: 645.86 },
{ date: "2012-10-08", open: 646.88, high: 647.56, low: 623.55, close: 629.71, volume: 21378800, adj_close: 623.21 },
{ date: "2012-10-15", open: 632.35, high: 652.79, low: 609.62, close: 609.84, volume: 18514400, adj_close: 603.55 },
{ date: "2012-10-22", open: 612.42, high: 635.38, low: 591.00, close: 604.00, volume: 24908300, adj_close: 597.77 },
{ date: "2012-10-31", open: 594.88, high: 603.00, low: 574.75, close: 576.80, volume: 17508000, adj_close: 570.85 },
{ date: "2012-11-05", open: 583.52, high: 590.74, low: 533.72, close: 547.06, volume: 26312500, adj_close: 543.89 },
{ date: "2012-11-12", open: 554.15, high: 554.50, low: 505.75, close: 527.68, volume: 25590900, adj_close: 524.62 },
{ date: "2012-11-19", open: 540.71, high: 572.00, low: 539.88, close: 571.50, volume: 18856200, adj_close: 568.19 },
{ date: "2012-11-26", open: 575.90, high: 594.25, low: 572.26, close: 585.28, volume: 18505600, adj_close: 581.89 },
{ date: "2012-12-03", open: 593.65, high: 594.59, low: 518.63, close: 533.25, volume: 28073100, adj_close: 530.16 },
{ date: "2012-12-10", open: 525.00, high: 549.56, low: 505.58, close: 509.79, volume: 23891500, adj_close: 506.84 },
{ date: "2012-12-17", open: 508.93, high: 534.90, low: 501.23, close: 519.33, volume: 20790100, adj_close: 516.32 },
{ date: "2012-12-24", open: 520.35, high: 524.25, low: 504.66, close: 509.59, volume: 11496300, adj_close: 506.64 },
{ date: "2012-12-31", open: 510.53, high: 535.40, low: 509.00, close: 532.17, volume: 23553300, adj_close: 529.09 },
];
$('#chart')
.sparkline(
$.map(stock, function(wk) { return wk.adj_close; }),
{
height: 40,
200,
lineColor: "#745eb7",
fillColor: "#95a7e8",
spotColor: false,
minSpotColor: "#fca44e",
maxSpotColor: "#fca44e",
disableHighlight: true,
tooltipFormatter: function() {return "Click for details"; }
}
).on('sparklineClick', function(ev) {
$("#widget").slideDown();
$("#widget-control").slideDown();
$('#chart').slideUp();
});
$("#widget-control a").click(function(ev) {
ev.preventDefault();
$("#widget").slideUp();
$("#widget-control").slideUp();
$('#chart').slideDown();
})
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
<span class="sparkline">
170,134,115,128,168,166,122,81,56,39,97,114,114,130,151,
184,148,145,134,145,145,145,143,148,224,181,112,111,129,
151,131,131,131,114,112,112,112,124,187,202,200,203,237,
263,221,197,184,185,203,290,330,330,226,113,148,169,148,
78,96,96,96,77,59,22,22,70,110,128
</span>
<span style="color:red"> 128 </span>
<strong> Glucose </strong>
</p>
<!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.0.0/jquery.sparkline.min.js"></script>
<script>
$(function() {
$('.sparkline').sparkline('html',{
lineColor: "dimgray",
fillColor: false,
defaultPixelsPerValue: 1,
spotColor: "red",
minSpotColor: "red",
maxSpotColor: "red",
normalRangeMin: 82,
normalRangeMax: 180,
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="stock">
<div style="float:left">
<div class="chart"></div>
<div class="info" style="font-size:0.8em"> </div>
</div>
<div style="float:left">
<div class="details" style="font-size:0.8em;line-height:1.3em;padding-left:10px;padding-top:1px"></div>
</div>
</div>
<!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.0.0/jquery.sparkline.min.js"></script>
<script>
$(function() {
var stock = [
{ date: "2012-01-03", open: 409.40, high: 422.75, low: 409.00, close: 422.40, volume: 10283900, adj_close: 416.26 },
{ date: "2012-01-09", open: 425.50, high: 427.75, low: 418.66, close: 419.81, volume: 9327900, adj_close: 413.70 },
{ date: "2012-01-17", open: 424.20, high: 431.37, low: 419.75, close: 420.30, volume: 10673200, adj_close: 414.19 },
{ date: "2012-01-23", open: 422.67, high: 454.45, low: 419.55, close: 447.28, volume: 17397900, adj_close: 440.77 },
{ date: "2012-01-30", open: 445.71, high: 460.00, low: 445.39, close: 459.68, volume: 10817600, adj_close: 452.99 },
{ date: "2012-02-06", open: 458.38, high: 497.62, low: 458.20, close: 493.42, volume: 17778800, adj_close: 486.24 },
{ date: "2012-02-13", open: 499.53, high: 526.29, low: 486.63, close: 502.12, volume: 28314900, adj_close: 494.82 },
{ date: "2012-02-21", open: 506.88, high: 522.90, low: 504.12, close: 522.41, volume: 18499900, adj_close: 514.81 },
{ date: "2012-02-27", open: 521.31, high: 548.21, low: 516.28, close: 545.18, volume: 22964000, adj_close: 537.25 },
{ date: "2012-03-05", open: 545.42, high: 547.74, low: 516.22, close: 545.17, volume: 23951800, adj_close: 537.24 },
{ date: "2012-03-12", open: 548.98, high: 600.01, low: 547.00, close: 585.57, volume: 32158400, adj_close: 577.05 },
{ date: "2012-03-19", open: 598.37, high: 609.65, low: 589.05, close: 596.05, volume: 24402100, adj_close: 587.38 },
{ date: "2012-03-26", open: 599.79, high: 621.45, low: 595.26, close: 599.55, volume: 22840000, adj_close: 590.83 },
{ date: "2012-04-02", open: 601.83, high: 634.66, low: 600.38, close: 633.68, volume: 23635600, adj_close: 624.46 },
{ date: "2012-04-09", open: 626.13, high: 644.00, low: 603.51, close: 605.23, volume: 26127500, adj_close: 596.43 },
{ date: "2012-04-16", open: 610.06, high: 620.25, low: 570.42, close: 572.98, volume: 34975300, adj_close: 564.65 },
{ date: "2012-04-23", open: 570.61, high: 618.00, low: 555.00, close: 603.00, volume: 27794600, adj_close: 594.23 },
{ date: "2012-04-30", open: 597.80, high: 598.40, low: 565.17, close: 565.25, volume: 17607600, adj_close: 557.03 },
{ date: "2012-05-07", open: 561.50, high: 575.88, low: 558.73, close: 566.71, volume: 15505800, adj_close: 558.47 },
{ date: "2012-05-14", open: 562.57, high: 567.51, low: 522.18, close: 530.38, volume: 20281200, adj_close: 522.67 },
{ date: "2012-05-21", open: 534.50, high: 576.50, low: 534.05, close: 562.29, volume: 19540000, adj_close: 554.11 },
{ date: "2012-05-29", open: 570.90, high: 581.50, low: 560.52, close: 560.99, volume: 17166000, adj_close: 552.83 },
{ date: "2012-06-04", open: 561.50, high: 580.58, low: 548.50, close: 580.32, volume: 14813900, adj_close: 571.88 },
{ date: "2012-06-11", open: 587.72, high: 588.50, low: 566.70, close: 574.13, volume: 14293200, adj_close: 565.78 },
{ date: "2012-06-18", open: 570.96, high: 590.00, low: 570.37, close: 582.10, volume: 12654100, adj_close: 573.63 },
{ date: "2012-06-25", open: 577.30, high: 584.00, low: 565.61, close: 584.00, volume: 10630300, adj_close: 575.51 },
{ date: "2012-07-02", open: 584.73, high: 614.34, low: 583.60, close: 605.88, volume: 13795700, adj_close: 597.07 },
{ date: "2012-07-09", open: 605.30, high: 619.87, low: 592.68, close: 604.97, volume: 15001100, adj_close: 596.17 },
{ date: "2012-07-16", open: 605.12, high: 615.35, low: 603.15, close: 604.30, volume: 12013700, adj_close: 595.51 },
{ date: "2012-07-23", open: 594.40, high: 609.68, low: 570.00, close: 585.16, volume: 19578500, adj_close: 576.65 },
{ date: "2012-07-30", open: 590.92, high: 617.98, low: 587.82, close: 615.70, volume: 13593200, adj_close: 606.74 },
{ date: "2012-08-06", open: 617.29, high: 625.00, low: 615.26, close: 621.70, volume: 8955900, adj_close: 615.29 },
{ date: "2012-08-13", open: 623.39, high: 648.19, low: 623.25, close: 648.11, volume: 11240200, adj_close: 641.43 },
{ date: "2012-08-20", open: 650.01, high: 674.88, low: 648.11, close: 663.22, volume: 20349200, adj_close: 656.38 },
{ date: "2012-08-27", open: 679.99, high: 680.87, low: 657.25, close: 665.24, volume: 10987500, adj_close: 658.38 },
{ date: "2012-09-04", open: 665.76, high: 682.48, low: 664.50, close: 680.44, volume: 12724300, adj_close: 673.42 },
{ date: "2012-09-10", open: 680.45, high: 696.98, low: 656.00, close: 691.28, volume: 20736000, adj_close: 684.15 },
{ date: "2012-09-17", open: 699.35, high: 705.07, low: 693.62, close: 700.09, volume: 14332600, adj_close: 692.87 },
{ date: "2012-09-24", open: 686.86, high: 695.12, low: 660.35, close: 667.10, volume: 20459000, adj_close: 660.22 },
{ date: "2012-10-01", open: 671.16, high: 676.75, low: 650.65, close: 652.59, volume: 18290000, adj_close: 645.86 },
{ date: "2012-10-08", open: 646.88, high: 647.56, low: 623.55, close: 629.71, volume: 21378800, adj_close: 623.21 },
{ date: "2012-10-15", open: 632.35, high: 652.79, low: 609.62, close: 609.84, volume: 18514400, adj_close: 603.55 },
{ date: "2012-10-22", open: 612.42, high: 635.38, low: 591.00, close: 604.00, volume: 24908300, adj_close: 597.77 },
{ date: "2012-10-31", open: 594.88, high: 603.00, low: 574.75, close: 576.80, volume: 17508000, adj_close: 570.85 },
{ date: "2012-11-05", open: 583.52, high: 590.74, low: 533.72, close: 547.06, volume: 26312500, adj_close: 543.89 },
{ date: "2012-11-12", open: 554.15, high: 554.50, low: 505.75, close: 527.68, volume: 25590900, adj_close: 524.62 },
{ date: "2012-11-19", open: 540.71, high: 572.00, low: 539.88, close: 571.50, volume: 18856200, adj_close: 568.19 },
{ date: "2012-11-26", open: 575.90, high: 594.25, low: 572.26, close: 585.28, volume: 18505600, adj_close: 581.89 },
{ date: "2012-12-03", open: 593.65, high: 594.59, low: 518.63, close: 533.25, volume: 28073100, adj_close: 530.16 },
{ date: "2012-12-10", open: 525.00, high: 549.56, low: 505.58, close: 509.79, volume: 23891500, adj_close: 506.84 },
{ date: "2012-12-17", open: 508.93, high: 534.90, low: 501.23, close: 519.33, volume: 20790100, adj_close: 516.32 },
{ date: "2012-12-24", open: 520.35, high: 524.25, low: 504.66, close: 509.59, volume: 11496300, adj_close: 506.64 },
{ date: "2012-12-31", open: 510.53, high: 535.40, low: 509.00, close: 532.17, volume: 23553300, adj_close: 529.09 },
];
$('#stock .chart').sparkline(
$.map(stock, function(wk) { return wk.adj_close; }),
{
height: 49,
210,
lineColor: "#745eb7",
fillColor: "#95a7e8",
spotColor: false,
minSpotColor: "#fca44e",
maxSpotColor: "#fca44e",
disableTooltips: true,
lightenHighlight: 0.5,
}
).on('sparklineRegionChange', function(ev) {
var idx = ev.sparklines[0].getCurrentRegionFields().offset;
if (idx) {
$("#stock .info").html(
"Week of " + stock[idx].date
+ " Close: $" + stock[idx].adj_close
);
$("#stock .details").html(
"Open: $" + stock[idx].open + "<br/>"
+ "High: $" + stock[idx].high + "<br/>"
+ "Low: $" + stock[idx].low + "<br/>"
+ "Volume: " + stock[idx].volume
);
}
}).on('mouseout', function() {
$("#stock .info").html(" ");
$("#stock .details").html("");
});
});
</script>
</body>
</html>
第四章创建特殊图表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="treemap"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="js/treemap-squared-0.5.min.js"></script>
<script>
window.onload = function () {
var census = [
{ region: "South", state: "AL", pop2010: 4784762, pop2012: 4822023 },
{ region: "West", state: "AK", pop2010: 714046, pop2012: 731449 },
{ region: "West", state: "AZ", pop2010: 6410810, pop2012: 6553255 },
{ region: "South", state: "AR", pop2010: 2922750, pop2012: 2949131 },
{ region: "West", state: "CA", pop2010: 37334410, pop2012: 38041430 },
{ region: "West", state: "CO", pop2010: 5048472, pop2012: 5187582 },
{ region: "Northeast", state: "CN", pop2010: 3576616, pop2012: 3590347 },
{ region: "South", state: "DE", pop2010: 899824, pop2012: 917092 },
{ region: "South", state: "DC", pop2010: 604989, pop2012: 632323 },
{ region: "South", state: "FL", pop2010: 18845967, pop2012: 19317568 },
{ region: "South", state: "GA", pop2010: 9714748, pop2012: 9919945 },
{ region: "West", state: "HI", pop2010: 1364274, pop2012: 1392313 },
{ region: "West", state: "ID", pop2010: 1570784, pop2012: 1595728 },
{ region: "Midwest", state: "IL", pop2010: 12840459, pop2012: 12875255 },
{ region: "Midwest", state: "IN", pop2010: 6489856, pop2012: 6537334 },
{ region: "Midwest", state: "IA", pop2010: 3050321, pop2012: 3074186 },
{ region: "Midwest", state: "KS", pop2010: 2858837, pop2012: 2885905 },
{ region: "South", state: "KY", pop2010: 4346655, pop2012: 4380415 },
{ region: "South", state: "LA", pop2010: 4544125, pop2012: 4601893 },
{ region: "Northeast", state: "ME", pop2010: 1327585, pop2012: 1329192 },
{ region: "South", state: "MD", pop2010: 5787998, pop2012: 5884563 },
{ region: "Northeast", state: "MA", pop2010: 6563259, pop2012: 6646144 },
{ region: "Midwest", state: "MI", pop2010: 9877670, pop2012: 9883360 },
{ region: "Midwest", state: "MN", pop2010: 5310737, pop2012: 5379139 },
{ region: "South", state: "MS", pop2010: 2969137, pop2012: 2984926 },
{ region: "Midwest", state: "MO", pop2010: 5996092, pop2012: 6021988 },
{ region: "West", state: "MT", pop2010: 990735, pop2012: 1005141 },
{ region: "Midwest", state: "NE", pop2010: 1829696, pop2012: 1855525 },
{ region: "West", state: "NV", pop2010: 2703758, pop2012: 2758931 },
{ region: "Northeast", state: "NH", pop2010: 1316843, pop2012: 1320718 },
{ region: "Northeast", state: "NJ", pop2010: 8803388, pop2012: 8864590 },
{ region: "West", state: "NM", pop2010: 2064767, pop2012: 2085538 },
{ region: "Northeast", state: "NY", pop2010: 19399242, pop2012: 19570261 },
{ region: "South", state: "NC", pop2010: 9559048, pop2012: 9752073 },
{ region: "Midwest", state: "ND", pop2010: 674363, pop2012: 699628 },
{ region: "Midwest", state: "OH", pop2010: 11538290, pop2012: 11544225 },
{ region: "South", state: "OK", pop2010: 3759482, pop2012: 3814820 },
{ region: "West", state: "OR", pop2010: 3838212, pop2012: 3899353 },
{ region: "Northeast", state: "PA", pop2010: 12711308, pop2012: 12763536 },
{ region: "Northeast", state: "RI", pop2010: 1052769, pop2012: 1050292 },
{ region: "South", state: "SC", pop2010: 4635835, pop2012: 4723723 },
{ region: "Midwest", state: "SD", pop2010: 816223, pop2012: 833354 },
{ region: "South", state: "TN", pop2010: 6356673, pop2012: 6456243 },
{ region: "South", state: "TX", pop2010: 25242683, pop2012: 26059203 },
{ region: "West", state: "UT", pop2010: 2775093, pop2012: 2855287 },
{ region: "Northeast", state: "VT", pop2010: 625916, pop2012: 626011 },
{ region: "South", state: "VA", pop2010: 8025105, pop2012: 8185867 },
{ region: "West", state: "WA", pop2010: 6743636, pop2012: 6897012 },
{ region: "South", state: "WV", pop2010: 1854019, pop2012: 1855413 },
{ region: "Midwest", state: "WI", pop2010: 5689591, pop2012: 5726398 },
{ region: "West", state: "WY", pop2010: 564367, pop2012: 576412 }
];
var total2010 = 0, total2012 = 0;
var south = { data:[],labels:[],growth:[],minGrowth:100,maxGrowth: -100 };
var west = { data:[],labels:[],growth:[],minGrowth:100,maxGrowth: -100 };
var midwest = { data:[],labels:[],growth:[],minGrowth:100,maxGrowth: -100 };
var northeast = { data:[],labels:[],growth:[],minGrowth:100,maxGrowth: -100 };
for (var i=0; i<census.length; i++) {
var region;
total2010 += census[i].pop2010;
total2012 += census[i].pop2012;
var growth = (census[i].pop2012 - census[i].pop2010)/census[i].pop2010;
switch (census[i].region) {
case "South": region = south; break;
case "West": region = west; break;
case "Midwest": region = midwest; break;
case "Northeast": region = northeast; break;
}
region.data.push(census[i].pop2012);
region.labels.push(census[i].state);
region.growth.push(growth);
if (growth > region.maxGrowth) region.maxGrowth = growth;
if (growth < region.minGrowth) region.minGrowth = growth;
};
var data = [ west.data, midwest.data, northeast.data, south.data ];
var labels = [ west.labels, midwest.labels, northeast.labels, south.labels ];
var growth = [ west.growth, midwest.growth, northeast.growth, south.growth ];
var totalGrowth = (total2012 - total2010)/total2010;
var colorRanges = {
positive: [ "#FFFFBF","#D9EF8B","#A6D96A","#66BD63","#1A9850","#006837" ],
negative: [ "#FFFFBF","#FEE08B","#FDAE61","#F46D43","#D73027","#A50026" ]
};
var minDelta = Math.min(south.minGrowth, west.minGrowth, midwest.minGrowth, northeast.minGrowth) - totalGrowth;
var maxDelta = Math.max(south.maxGrowth, west.maxGrowth, midwest.maxGrowth, northeast.maxGrowth) - totalGrowth;
function pickColor(coordinates, index) {
var regionIdx = index[0];
var stateIdx = index[1];
var growthRate = growth[regionIdx][stateIdx];
var deltaGrowth = growthRate - totalGrowth;
if (deltaGrowth > 0) {
colorRange = colorRanges.positive;
} else {
colorRange = colorRanges.negative;
deltaGrowth = -1 * deltaGrowth;
}
var colorIndex = Math.floor(colorRange.length*(deltaGrowth-minDelta)/(maxDelta-minDelta));
if (colorIndex >= colorRange.length) colorIndex = colorRange.length - 1;
color = colorRange[colorIndex];
return{ "fill" : color };
}
Treemap.draw("treemap", 600, 440, data, labels, {'box' : pickColor});
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link href="font/digital7.css" rel="stylesheet">
</head>
<body>
<div style="636px; position:relative;top:20px">
<span style="float:left;padding-left:40px">North Carolina Tar Heels</span><span style="float:right;padding-right:40px">Duke Blue Devils</span>
</div>
<figure id='heatmap' style="clear:both;float:left;position:relative;556px;height:333px;background-image:url('img/basketball.png');"></figure>
<div style="margin-top:16px;float:left;195px">
<div style="background-color:#666666;border-radius:6px;100%;padding:5px;">
<div style="background-color:#222222;border:2px solid white;border-radius:4px;font-family:digital7;font-size:60px;color:white;display:table;margin:15px auto;line-height:60px;padding:4px 8px;">
<span id="min">20</span>:<span id="sec">00</span>
</div>
<div style="display:table;margin:5px auto 15px auto">
<div style="float:left;color:white;margin:0 15px;background-color:#222222;border:2px solid white;border-radius:4px;padding:0 5px;">
UNC<br/>
<span style="font-family:digital7;font-size:50px;line-height:50px" id="unc">00</span>
</div>
<div style="float:left;color:white;margin:0 15px;background-color:#222222;border:2px solid white;border-radius:4px;padding:0 5px;">
DUKE<br/>
<span style="font-family:digital7;font-size:50px;line-height:50px" id="duke">00</span>
</div>
</div>
</div>
<div style="padding-top:30px"><a id="replay-game" href="#">Replay Game</a></div>
</div>
<div style="clear:both">
<!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/heatmap-mod.js"></script>
<script>
window.onload = function () {
var game = [
{ team: "UNC", points: 2, time: 0.85, unc: 2, duke: 0, x: 0.506, y: 5.039, note: "Dexter Strickland made Layup" },
{ team: "UNC", points: 3, time: 1.22, unc: 5, duke: 0, x: 1.377, y: 1.184, note: "Reggie Bullock made 3-pt. Jump Shot" },
{ team: "DUKE", points: 2, time: 1.65, unc: 5, duke: 2, x: 8.804, y: 7.231, note: "Rasheed Sulaimon made Jump Shot" },
{ team: "UNC", points: 2, time: 2.32, unc: 7, duke: 2, x: 0.506, y: 5.039, note: "James Michael McAdoo made Slam Dunk" },
{ team: "DUKE", points: 2, time: 2.90, unc: 7, duke: 4, x: 9.45, y: 5.011, note: "Amile Jefferson made Layup" },
{ team: "UNC", points: 2, time: 3.18, unc: 9, duke: 4, x: 0.506, y: 5.039, note: "Dexter Strickland made Layup" },
{ team: "DUKE", points: 2, time: 4.43, unc: 9, duke: 6, x: 8.690, y: 4.602, note: "Quinn Cook made Floating Jump Shot" },
{ team: "UNC", points: 2, time: 5.18, unc: 11, duke: 6, x: 0.506, y: 5.039, note: "Dexter Strickland made Tip-in" },
{ team: "DUKE", points: 2, time: 5.45, unc: 11, duke: 8, x: 0.45, y: 5.011, note: "Mason Plumlee made Layup" },
{ team: "UNC", points: 2, time: 5.83, unc: 13, duke: 8, x: 0.506, y: 5.039, note: "James Michael McAdoo made Slam Dunk" },
{ team: "UNC", points: 1, time: 6.73, unc: 14, duke: 8, x: -1, y: -1, note: "P.J. Hairston made 2nd of 2 Free Throws" },
{ team: "DUKE", points: 2, time: 7.07, unc: 14, duke: 10, x: 8.579, y: 6.861, note: "Rasheed Sulaimon made Jump Shot" },
{ team: "UNC", points: 3, time: 7.35, unc: 17, duke: 10, x: 2.415, y: 8.318, note: "Reggie Bullock made 3-pt. Jump Shot" },
{ team: "DUKE", points: 1, time: 7.93, unc: 17, duke: 11, x: -1, y: -1, note: "Mason Plumlee made 1st of 2 Free Throws" },
{ team: "DUKE", points: 1, time: 7.93, unc: 17, duke: 12, x: -1, y: -1, note: "Mason Plumlee made 2nd of 2 Free Throws" },
{ team: "DUKE", points: 2, time: 8.35, unc: 17, duke: 14, x: 9.132, y: 4.417, note: "Quinn Cook made Fadeaway Jump Shot" },
{ team: "UNC", points: 1, time: 10.12, unc: 18, duke: 14, x: -1, y: -1, note: "Dexter Strickland made 1st of 2 Free Throws" },
{ team: "UNC", points: 1, time: 10.12, unc: 19, duke: 14, x: -1, y: -1, note: "Dexter Strickland made 2nd of 2 Free Throws" },
{ team: "UNC", points: 2, time: 11.45, unc: 21, duke: 14, x: 0.506, y: 5.039, note: "James Michael McAdoo made Layup" },
{ team: "DUKE", points: 2, time: 11.52, unc: 21, duke: 16, x: 0.45, y: 5.011, note: "Mason Plumlee made Slam Dunk" },
{ team: "DUKE", points: 2, time: 12.05, unc: 21, duke: 18, x: 0.45, y: 5.011, note: "Quinn Cook made Slam Dunk" },
{ team: "UNC", points: 2, time: 12.22, unc: 23, duke: 18, x: 1.142, y: 6.476, note: "P.J. Hairston made Jump Shot" },
{ team: "UNC", points: 2, time: 12.78, unc: 25, duke: 18, x: 0.506, y: 5.039, note: "Marcus Paige made Layup" },
{ team: "UNC", points: 3, time: 13.30, unc: 28, duke: 18, x: 2.188, y: 8.077, note: "Reggie Bullock made 3-pt. Jump Shot" },
{ team: "DUKE", points: 2, time: 14.90, unc: 28, duke: 20, x: 8.911, y: 7.457, note: "Seth Curry made Jump Shot" },
{ team: "DUKE", points: 1, time: 15.18, unc: 28, duke: 21, x: -1, y: -1, note: "Quinn Cook made 1st of 2 Free Throws" },
{ team: "DUKE", points: 1, time: 15.18, unc: 28, duke: 22, x: -1, y: -1, note: "Quinn Cook made 2nd of 2 Free Throws" },
{ team: "UNC", points: 2, time: 15.50, unc: 30, duke: 22, x: 1.15, y: 7.279, note: "Leslie McDonald made Jump Shot" },
{ team: "DUKE", points: 2, time: 15.77, unc: 30, duke: 24, x: 9.665, y: 9.054, note: "Tyler Thornton made Jump Shot" },
{ team: "UNC", points: 1, time: 16.17, unc: 31, duke: 25, x: -1, y: -1, note: "J.P. Tokoto made 1st of 2 Free Throws" },
{ team: "DUKE", points: 2, time: 17.32, unc: 31, duke: 27, x: 0.45, y: 5.011, note: "Quinn Cook made Reverse Layup" },
{ team: "DUKE", points: 2, time: 18.97, unc: 33, duke: 29, x: 0.45, y: 5.011, note: "Mason Plumlee made Slam Dunk" },
{ team: "UNC", points: 1, time: 20.55, unc: 34, duke: 29, x: -1, y: -1, note: "James Michael McAdoo made 1st of 2 Free Throws" },
{ team: "DUKE", points: 2, time: 20.63, unc: 34, duke: 31, x: 9.455, y: 5.015, note: "Quinn Cook made Layup" },
{ team: "UNC", points: 2, time: 21.40, unc: 36, duke: 31, x: 0.518, y: 5.012, note: "Reggie Bullock made Tip-in" },
{ team: "UNC", points: 2, time: 22.00, unc: 38, duke: 31, x: 0.518, y: 5.012, note: "James Michael McAdoo made Slam Dunk" },
{ team: "DUKE", points: 1, time: 22.97, unc: 38, duke: 32, x: -1, y: -1, note: "Seth Curry made 2nd of 2 Free Throws" },
{ team: "DUKE", points: 3, time: 23.63, unc: 38, duke: 35, x: 9.255, y: 0.540, note: "Tyler Thornton made 3-pt. Jump Shot" },
{ team: "DUKE", points: 2, time: 23.42, unc: 38, duke: 37, x: 9.455, y: 5.015, note: "Rasheed Sulaimon made Layup" },
{ team: "UNC", points: 3, time: 24.82, unc: 41, duke: 37, x: 1.892, y: 1.384, note: "P.J. Hairston made 3-pt. Jump Shot" },
{ team: "DUKE", points: 2, time: 25.30, unc: 41, duke: 39, x: 9.455, y: 5.015, note: "Josh Hairston made Slam Dunk" },
{ team: "DUKE", points: 3, time: 25.70, unc: 41, duke: 42, x: 7.771, y: 2.166, note: "Seth Curry made 3-pt. Jump Shot" },
{ team: "UNC", points: 1, time: 26.07, unc: 43, duke: 42, x: -1, y: -1, note: "P.J. Hairston made 2nd of 2 Free Throws" },
{ team: "DUKE", points: 2, time: 26.50, unc: 43, duke: 44, x: 9.455, y: 5.015, note: "Quinn Cook made Layup" },
{ team: "DUKE", points: 3, time: 26.87, unc: 43, duke: 47, x: 7.327, y: 7.447, note: "Rasheed Sulaimon made 3-pt. Jump Shot" },
{ team: "UNC", points: 2, time: 27.32, unc: 45, duke: 47, x: 1.575, y: 4.225, note: "Dexter Strickland made Jump Shot" },
{ team: "DUKE", points: 3, time: 27.55, unc: 45, duke: 50, x: 9.139, y: 0.355, note: "Tyler Thornton made 3-pt. Jump Shot" },
{ team: "DUKE", points: 2, time: 28.35, unc: 47, duke: 52, x: 9.455, y: 5.015, note: "Mason Plumlee made Layup" },
{ team: "DUKE", points: 2, time: 32.35, unc: 47, duke: 54, x: 9.037, y: 5.229, note: "Mason Plumlee made Hook Shot" },
{ team: "UNC", points: 3, time: 32.70, unc: 50, duke: 54, x: 3.042, y: 5.005, note: "Reggie Bullock made 3-pt. Jump Shot" },
{ team: "UNC", points: 1, time: 33.33, unc: 51, duke: 54, x: -1, y: -1, note: "Reggie Bullock made 1st of 2 Free Throws" },
{ team: "DUKE", points: 2, time: 33.50, unc: 51, duke: 56, x: 9.455, y: 5.015, note: "Rasheed Sulaimon made Layup" },
{ team: "DUKE", points: 3, time: 34.92, unc: 51, duke: 59, x: 8.175, y: 0.929, note: "Seth Curry made 3-pt. Jump Shot" },
{ team: "UNC", points: 2, time: 35.17, unc: 53, duke: 59, x: 0.518, y: 5.012, note: "RP.J. Hairston made Tip-in" },
{ team: "DUKE", points: 2, time: 36.12, unc: 53, duke: 61, x: 8.916, y: 5.016, note: "Mason Plumlee made Hook Shot" },
{ team: "UNC", points: 2, time: 36.37, unc: 55, duke: 61, x: 0.518, y: 5.012, note: "RMarcus Paige made Layup" },
{ team: "DUKE", points: 1, time: 36.73, unc: 55, duke: 62, x: -1, y: -1, note: "Seth Curry made 1st of 2 Free Throws" },
{ team: "DUKE", points: 1, time: 36.73, unc: 55, duke: 63, x: -1, y: -1, note: "Seth Curry made 2nd of 2 Free Throws" },
{ team: "UNC", points: 2, time: 37.18, unc: 57, duke: 63, x: 0.518, y: 5.012, note: "RP.J. Hairston made Layup" },
{ team: "DUKE", points: 1, time: 37.67, unc: 57, duke: 64, x: -1, y: -1, note: "Mason Plumlee made 1st of 2 Free Throws" },
{ team: "DUKE", points: 1, time: 37.67, unc: 57, duke: 65, x: -1, y: -1, note: "Mason Plumlee made 2nd of 2 Free Throws" },
{ team: "UNC", points: 2, time: 38.15, unc: 59, duke: 65, x: 0.518, y: 5.012, note: "RMarcus Paige made Layup" },
{ team: "UNC", points: 1, time: 38.77, unc: 60, duke: 65, x: -1, y: -1, note: "Dexter Strickland made 1st of 2 Free Throws" },
{ team: "UNC", points: 1, time: 38.77, unc: 61, duke: 65, x: -1, y: -1, note: "Dexter Strickland made 2nd of 2 Free Throws" },
{ team: "DUKE", points: 1, time: 39.38, unc: 61, duke: 66, x: -1, y: -1, note: "Rasheed Sulaimon made 1st of 2 Free Throws" },
{ team: "DUKE", points: 1, time: 39.38, unc: 61, duke: 67, x: -1, y: -1, note: "Rasheed Sulaimon made 2nd of 2 Free Throws" },
{ team: "UNC", points: 1, time: 39.45, unc: 62, duke: 67, x: -1, y: -1, note: "P.J. Hairston made 1st of 2 Free Throws" },
{ team: "DUKE", points: 1, time: 39.50, unc: 62, duke: 68, x: -1, y: -1, note: "Mason Plumlee made 1st of 2 Free Throws" },
{ team: "DUKE", points: 1, time: 39.50, unc: 62, duke: 69, x: -1, y: -1, note: "Mason Plumlee made 2nd of 2 Free Throws" },
{ team: "UNC", points: 2, time: 39.70, unc: 64, duke: 69, x: 0.518, y: 5.012, note: "P.J. Hairston made Layup" },
{ team: "DUKE", points: 1, time: 39.72, unc: 64, duke: 70, x: -1, y: -1, note: "Quinn Cook made 1st of 2 Free Throws" },
{ team: "DUKE", points: 1, time: 39.72, unc: 64, duke: 71, x: -1, y: -1, note: "Quinn Cook made 2nd of 2 Free Throws" },
{ team: "UNC", points: 1, time: 39.87, unc: 65, duke: 71, x: -1, y: -1, note: "P.J. Hairston made 1st of 2 Free Throws" },
{ team: "UNC", points: 1, time: 39.87, unc: 66, duke: 71, x: -1, y: -1, note: "P.J. Hairston made 2nd of 2 Free Throws" },
{ team: "DUKE", points: 1, time: 39.92, unc: 66, duke: 72, x: -1, y: -1, note: "Quinn Cook made 1st of 2 Free Throws" },
{ team: "DUKE", points: 1, time: 39.92, unc: 66, duke: 73, x: -1, y: -1, note: "Quinn Cook made 2nd of 2 Free Throws" },
{ team: "UNC", points: 2, time: 39.98, unc: 68, duke: 73, x: 0.518, y: 5.012, note: "RP.J. Hairston made Slam Dunk" }
];
var height = $("#heatmap").height();
var width = $("#heatmap").width();
heatmap = h337.create({
element: "heatmap",
radius: 30,
opacity: 50
});
dataset = {};
dataset.max = 3;
dataset.data = [];
heatmap.store.setDataSet(dataset);
function pad(n) {
if (n<0) n = 0;
return (n > 9 ? ""+n : "0"+n);
}
var nextPoint = 0;
function addPoint() {
var i = nextPoint++;
if ((game[i].x !== -1) && (game[i].y !== -1)) {
var x = Math.round(width * game[i].x/10);
var y = height - Math.round(height * game[i].y/10);
heatmap.store.augmentDataPoint(x, y, game[i].points);
$("#heatmap canvas").css("z-index", "1");
}
$("#unc").text(pad(game[i].unc));
$("#duke").text(pad(game[i].duke));
var time = (game[i].time > 20 ? 40 - game[i].time : 20 - game[i].time);
var min = Math.floor(time);
var sec = Math.round((time - min)*60);
$("#min").text(pad(min));
$("#sec").text(pad(sec));
if (nextPoint < game.length) {
setTimeout(addPoint, 500);
} else {
setTimeout(function() {
$("#min").text(pad(0));
$("#sec").text(pad(0));
}, 500);
}
};
$("#replay-game").click(function(ev) {
ev.preventDefault();
addPoint();
});
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body { margin: 0; background-color: #f3f3f3; }
#graph { position: absolute; 100%; height: 100%; }
</style>
</head>
<body>
<div id="graph"></div>
<script src="js/sigma.min.js"></script>
<script src="js/sigma.layout.forceAtlas2.min.js"></script>
<script>
window.onload = function () {
var albums = [
{
album: "Miles Davis - Kind of Blue",
musicians: [
"Cannonball Adderley",
"Paul Chambers",
"Jimmy Cobb",
"John Coltrane",
"Miles Davis",
"Bill Evans"
]
},{
album: "John Coltrane - A Love Supreme",
musicians: [
"John Coltrane",
"Jimmy Garrison",
"Elvin Jones",
"McCoy Tyner"
]
},{
album: "The Dave Brubeck Quartet - Time Out",
musicians: [
"Dave Brubeck",
"Paul Desmond",
"Joe Morello",
"Eugene Write"
]
},{
album: "Duke Ellington - Ellington at Newport",
musicians: [
"Harry Carney",
"John Willie Cook",
"Duke Ellington",
"Paul Gonsalves",
"Jimmy Grissom",
"Jimmy Hamilton",
"Johnny Hodges",
"Quentin Jackson",
"William Anderson",
"Ray Nance",
"Russell Procope",
"John Sanders",
"Clark Terry",
"James Woode",
"Britt Woodman",
"Sam Woodyar"
]
},{
album: "The Quintet - Jazz at Massey Hall",
musicians: [
"Dizzy Gillespie",
"Charles Mingus",
"Charlie Parker",
"Bud Powell",
"Max Roach"
]
},{
album: "Louis Armstrong - The Best of the Hot Five and Hot Seven Recordings",
musicians: [
"Lil Hardin Armstrong",
"Louis Armstrong",
"Clarence Babcock",
"Pete Briggs",
"Mancy Carr",
"Baby Dodds",
"Johnny Dodds",
"Earl Hines",
"Kid Ory",
"Don Redman",
"Fred Robinson",
"Zutty Singleton",
"Johnny St. Cyr",
"Jimmy Strong",
"John Thomas",
"Dave Wilborn"
]
},{
album: "John Coltrane - Blue Trane",
musicians: [
"Paul Chambers",
"John Coltrane",
"Kenny Drew",
"Curtis Fuller",
"Philly Joe Jones",
"Lee Morgan"
]
},{
album: "Stan Getz and João Gilberto - Getz/Gilberto",
musicians: [
"Milton Banana",
"Stan Getz",
"Astrud Gilberto",
"João Gilberto",
"Antonio Carlos Jobim",
"Sebastião Neto"
]
},{
album: "Charles Mingus - Mingus Ah Um",
musicians: [
"Willie Dennis",
"Booker Ervin",
"Shafi Hadi",
"John Handy",
"Jimmy Knepper",
"Charles Mingus",
"Horace Parlan",
"Dannie Richmond"
]
},{
album: "Erroll Garner - Concert by the Sea",
musicians: [
"Denzil Best",
"Eddie Calhoun",
"Erroll Garner"
]
},{
album: "Miles Davis - Bitches Brew",
musicians: [
"Don Alias",
"Harvey Brooks",
"Billy Cobham",
"Chick Corea",
"Miles Davis",
"Jack DeJohnette",
"Dave Holland",
"Bennie Maupin",
"John McLaughlin",
"Airto Moreira",
"Juma Santos",
"Wayne Shorter",
"Lenny White",
"Larry Young",
"Joe Zawinul"
]
},{
album: "Sonny Rollings - Saxophone Colossus",
musicians: [
"Tommy Flanagan",
"Sonny Rollins",
"Max Roach",
"Doug Watkins"
]
},{
album: "Art Blakey and The Jazz Messengers - Moanin’",
musicians: [
"Art Blakey",
"Lee Morgan",
"Benny Golson",
"Bobby Timmons",
"Jymie Merritt"
]
},{
album: "Clifford Brown and Max Roach",
musicians: [
"Clifford Brown",
"Harold Land",
"George Morrow",
"Richie Powell",
"Max Roach"
]
},{
album: "Thelonious Monk with John Coltrane - At Carnegie Hall",
musicians: [
"Ahmed Abdul-Malik",
"John Coltrane",
"Thelonious Monk",
"Shadow Wilson"
]
},{
album: "Hank Mobley - Soul Station",
musicians: [
"Art Blakey",
"Paul Chambers",
"Wynton Kelly",
"Hank Mobley"
]
},{
album: "Cannonball Adderly - Somethin’ Else",
musicians: [
"Cannonball Adderley",
"Art Blakey",
"Miles Davis",
"Hank Jones",
"Sam Jones"
]
},{
album: "Wayne Shorter - Speak No Evil",
musicians: [
"Ron Carter",
"Herbie Hancock",
"Freddie Hubbard",
"Elvin Jones",
"Wayne Shorter"
]
},{
album: "Miles Davis - Birth of the Cool",
musicians: [
"Bill Barber",
"Nelson Boyd",
"Kenny Clarke",
"Junior Collins",
"Miles Davis",
"Kenny Hagood",
"Al Haig",
"J. J. Johnson",
"Lee Konitz",
"John Lewis",
"Al McKibbon",
"Gerry Mulligan",
"Max Roach",
"Gunther Schuller",
"Joe Shulman",
"Sandy Siegelstein",
"Kai Winding"
]
},{
album: "Herbie Hancock - Maiden Voyage",
musicians: [
"Ron Carter",
"George Coleman",
"Herbie Hancock",
"Freddie Hubbard",
"Tony Williams"
]
},{
album: "Vince Guaraldi Trio- A Boy Named Charlie Brown",
musicians: [
"Colin Bailey",
"Monty Budwig",
"Vince Guaraldi"
]
},{
album: "Eric Dolphy - Out to Lunch",
musicians: [
"Richard Davis",
"Eric Dolphy",
"Freddie Hubbard",
"Bobby Hutcherson",
"Tony Williams"
]
},{
album: "Oliver Nelson - The Blues and the Abstract Truth",
musicians: [
"George Barrow",
"Paul Chambers",
"Eric Dolphy",
"Bill Evans",
"Roy Haynes",
"Freddie Hubbard",
"Oliver Nelson"
]
},{
album: "Dexter Gordon - Go",
musicians: [
"Sonny Clark",
"Dexter Gordon",
"Billy Higgins",
"Butch Warren"
]
},{
album: "Sarah Vaughan with Clifford Brown",
musicians: [
"Joe Benjamin",
"Clifford Brown",
"Roy Haynes",
"Jimmy Jones",
"John Malachi",
"Herbie Mann",
"Paul Quinichette",
"Sarah Vaughan",
"Ernie Wilkins"
]
}
];
window.g = new sigma("graph");
g.settings({
defaultNodeColor: '#ec5148',
sideMargin: 20
});
albums.forEach(function(album, idx){
var theta = idx*2*Math.PI / albums.length;
g.graph.addNode({
id: ""+idx,
label: album.album,
x: Math.sin(theta),
y: Math.cos(theta),
size: 1
});
})
for (var srcIdx=0; srcIdx<albums.length; srcIdx++) {
var src = albums[srcIdx];
for (var mscIdx=0; mscIdx<src.musicians.length; mscIdx++) {
var msc = src.musicians[mscIdx];
for (var tgtIdx=srcIdx+1; tgtIdx<albums.length; tgtIdx++) {
var tgt = albums[tgtIdx];
if (tgt.musicians.some(function(tgtMsc) {return tgtMsc === msc;})) {
g.graph.addEdge({
id: srcIdx + "." + mscIdx + "-" + tgtIdx,
source: ""+srcIdx,
target: ""+tgtIdx
})
}
}
}
}
g.startForceAtlas2();
setTimeout(function() {g.stopForceAtlas2();}, 1500);
g.bind('clickNode', function(ev) {
var nodeIdx = ev.data.node.id;
var neighbors = [];
g.graph.edges().forEach(function(edge) {
if ((edge.target === nodeIdx) || (edge.source === nodeIdx)) {
edge.color = '#555';
neighbors.push(edge.target);
neighbors.push(edge.source);
} else {
edge.color = '#ec5148';
}
});
g.graph.nodes().forEach(function(node) {
if (neighbors.some(function(n){return n === node.id})) {
node.color = '#555';
} else {
node.color = '#ec5148';
}
});
g.refresh();
});
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style>
#cloud { border-radius:3px;border:1px solid #d0d0d0; }
#cloud span { cursor: pointer; }
</style>
</head>
<body>
<div id='cloud' style="640px;height:450px;position:relative;"></div>
<div id="details" style="640px;text-align:center;line-height:2em;margin-top:0.5em"></div>
<script src='wordcloud2.js'></script>
<script>
var tags = [
["c#", 601251],
["java", 585413],
["javascript", 557407],
["php", 534590],
["android", 466436],
["jquery", 438303],
["python", 274216],
["c++", 269570],
["html", 259946],
["mysql", 226906],
["ios", 216765],
["asp.net", 209653],
["css", 199932],
["sql", 192739],
["iphone", 190382],
[".net", 179522],
["objective-c", 172609],
["ruby-on-rails", 152860],
["c", 129998],
["ruby", 97414],
["sql-server", 91050],
["ajax", 85036],
["xml", 84295],
["regex", 81991],
["arrays", 80728],
["wpf", 80062],
["asp.net-mvc", 79697],
["database", 70777],
["linux", 70772],
["json", 70396],
["django", 68893],
["vb.net", 63061],
["windows", 62042],
["xcode", 60950],
["eclipse", 60512],
["string", 54249],
["facebook", 53745],
["html5", 51015],
["ruby-on-rails-3", 50109],
["r", 49842],
["multithreading", 49806],
["winforms", 46643],
["wordpress", 46632],
["image", 45910],
["forms", 41984],
["performance", 40607],
["osx", 40401],
["visual-studio-2010", 40228],
["spring", 40207],
["node.js", 40041],
["excel", 39973],
["algorithm", 38661],
["oracle", 38565],
["swing", 38255],
["git", 37842],
["linq", 37489],
["asp.net-mvc-3", 36902],
["apache", 35533],
["web-services", 35385],
["wcf", 35242],
["perl", 35138],
["entity-framework", 34139],
["sql-server-2008", 33827],
["visual-studio", 33664],
["bash", 33139],
["hibernate", 32263],
["actionscript-3", 31760],
["ipad", 29476],
["matlab", 29210],
["qt", 28918],
["cocoa-touch", 28753],
["list", 28556],
["cocoa", 28385],
["file", 28200],
["sqlite", 28114],
[".htaccess", 28006],
["flash", 27908],
["api", 27480],
["angularjs", 27042],
["jquery-ui", 26906],
["function", 26485],
["codeigniter", 26426],
["mongodb", 26223],
["class", 25925],
["silverlight", 25878],
["tsql", 25706],
["css3", 25535],
["delphi", 25421],
["security", 25325],
["google-maps", 24919],
["vba", 24301],
["internet-explorer", 24270],
["postgresql", 24236],
["jsp", 24224],
["shell", 24184],
["google-app-engine", 23892],
["oop", 23634],
["sockets", 23464],
["validation", 23429],
["unit-testing", 23249]
];
WordCloud(document.getElementById('cloud'), {
list : tags.map(function(word) { return [word[0], Math.round(word[1]/5500)]; })
});
var clicked = function(ev) {
if (ev.target.nodeName === "SPAN") {
var tag = ev.target.textContent;
var tagElem;
if (tags.some(function(el) { if (el[0] === tag) {tagElem = el; return true;} return false; })) {
document.getElementById("details").innerText = "There were " + tagElem[1] +
" Stack Overflow questions tagged “" + tag + "”";
}
} else {
document.getElementById("details").innerText = "";
}
}
document.getElementById("cloud").addEventListener("click", clicked)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link href="css/jquery.gantt.css" rel="stylesheet">
</head>
<body>
<div id="gantt" style="100%;"></div>
<!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.fn.gantt.min.js"></script>
<script>
$(function() {
tasks = [{
phaseName: "Phase 1",
taskName: "Chapter 1",
taskDetails: "Graphing Data",
startDate: new Date(2013,0,3),
endDate: new Date(2013,0,23),
status: "in progress",
},{
phaseName: "",
taskName: "Chapter 2",
taskDetails: "Making Charts Interactive",
startDate: new Date(2013,0,23),
endDate: new Date(2013,1,10),
status: "in progress",
},{
phaseName: "",
taskName: "Chapter 3",
taskDetails: "Mixing Charts and Text",
startDate: new Date(2013,1.10),
endDate: new Date(2013,2,1),
status: "in progress",
},{
phaseName: "Title Info",
taskName: "",
taskDetails: "",
startDate: new Date(2013,2,4),
endDate: new Date(2013,2,4),
status: "in progress",
},{
phaseName: "Phase 2",
taskName: "Chapter 4",
taskDetails: "Creating Specialized Charts",
startDate: new Date(2013,2,4),
endDate: new Date(2013,2,18),
status: "in progress",
},{
phaseName: "",
taskName: "Chapter 5",
taskDetails: "Showing Timelines",
startDate: new Date(2013,2,18),
endDate: new Date(2013,2,21),
status: "in progress",
},{
phaseName: "",
taskName: "Chapter 6",
taskDetails: "Visualizing Geographic Data",
startDate: new Date(2013,2,21),
endDate: new Date(2013,3,7),
status: "in progress",
},{
phaseName: "",
taskName: "Chapter 7",
taskDetails: "Managing Data in the Browser",
startDate: new Date(2013,3,7),
endDate: new Date(2013,3,24),
status: "in progress",
},{
phaseName: "",
taskName: "Chapter 8",
taskDetails: "Building Data-Driven Web Applications",
startDate: new Date(2013,3,24),
endDate: new Date(2013,4,11),
status: "in progress",
},{
phaseName: "Draft",
taskName: "Complete",
taskDetails: "",
startDate: new Date(2013,4,11),
endDate: new Date(2013,4,11),
status: "in progress",
}];
ganttData = $.map(tasks,function(obj,idx) {
return ({
id: idx,
name: obj.phaseName,
desc: obj.taskName,
values: [{
from: "/Date("+obj.startDate.getTime()+")/",
to: "/Date("+obj.endDate.getTime()+")/",
label: obj.taskDetails,
dataObj: obj,
}],
});
});
function taskClicked(taskObj) {
alert("Current Status: " + taskObj.status);
}
function areaClicked(time, idx) {
var date = new Date(parseInt(time));
var task = tasks[idx];
alert(task.taskName + " not scheduled on " + date.toDateString())
}
$("#gantt").gantt({
source: ganttData,
scale: "weeks",
maxScale: "months",
minScale: "days",
itemsPerPage: 10,
onItemClick: taskClicked,
onAddClick: areaClicked,
});
});
</script>
</body>
</html>
第五章时间轴显示
1使用chromoline.js库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/jquery.qtip.css">
<link rel="stylesheet" type="text/css" href="css/chronoline.css">
</head>
<body>
<div id="timeline"></div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.qtip.js"></script>
<script src="js/raphael-min.js"></script>
<script src="js/chronoline.js"></script>
<script>
window.onload = function () {
plays = [
{ "play": "The Two Gentlemen of Verona", "date": "1589-1591", "record": "Francis Meres' Palladis Tamia (1598); referred to as "Gentlemen of Verona"", "published": "First Folio (1623)", "performance": "adaptation by Benjamin Victor performed at David Garrick's Theatre Royal, Drury Lane in 1762. Earliest known performance of straight Shakespearean text at Royal Opera House in 1784, although because of the reference to the play in Palladis Tamia, we know it was definitely performed in Shakespeare's day.", "evidence": "The play contains passages which seem to borrow from John Lyly's Midas (1589), meaning it could not have been written prior to 1589. Additionally, Stanley Wells argues that the scenes involving more than four characters, "betray an uncertainty of technique suggestive of inexperience." As such, the play is considered to be one of the first Shakespeare composed upon arriving in London (Roger Warren, following E.A.J. Honigmann, suggests he may have written it prior to his arrival) and, as such, he lacked theatrical experience. This places the date of composition as most likely somewhere between 1589 and 1591, by which time it is known he was working on the Henry VI plays" },
{ "play": "The Taming of the Shrew", "date": "1590-1594", "record": "possible version of play entered into Stationers' Register on 2 May 1594 as "a booke intituled A plesant Conceyted historie called the Tayminge of a Shrowe'. First record of play as it exists today found in the First Folio (1623)", "published": "possible version of play published in quarto in 1594 as A Pleasant Conceited Historie, called The taming of a Shrew (republished in 1596 and 1607). Play as it exists today first published in the First Folio (1623) as The Taming of the Shrew.", "performance": "According to Philip Henslowe's diary, a play called The Tamynge of A Shrowe was performed at Newington Butts Theatre on 13 June 1594. This could have been either the 1594 A Shrew or the Shakespearean The Shrew, but as the Admiral's Men and the Lord Chamberlain's Men were sharing the theatre at the time, and as such Shakespeare himself would have been there, scholars tend to assume that it was The Shrew. The Shakespearean version was definitely performed at court before King Charles I and Queen Henrietta Maria on 26 November 1633, where it was described as being "liked'.", "evidence": "Kier Elam posits a date of 1591 as a terminus post quem for the composition of The Shrew, based on Shakespeare's probable use of two sources published that year; Abraham Ortelius's map of Italy in the Theatrum Orbis Terrarum (4th ed.) and John Florio's Second Fruits. However, scholars continue to debate the relationship between the 1594 A Shrew and the 1623 The Shrew. Some theorise that A Shrew is a reported text, meaning The Shrew must have been written prior to 2 May 1594; others, that A Shrew is an early draft, meaning The Shrew must have been completed sometime after 2 May 1594. There are also arguments that A Shrew may have been a source for The Shrew, that they could be two completely unrelated plays based on the same (now lost) source (the "Ur-Shrew" theory), or A Shrew could be an adaptation of The Shrew. Critics remain divided on this issue, and as such, dating the play is extremely difficult." },
{ "play": "Henry VI, Part 2", "date": "1590-1591", "record": "version of the play entered into the Stationers' Register on 12 March 1594 as "a booke intituled, the firste parte of the Contention of the twoo famous houses of york and Lancaster'.", "published": "version of the play published in quarto in 1594 as The First part of the Contention betwixt the two famous Houses of Yorke and Lancaster, with the death of the good Duke Humphrey: And the banishment and death of the Duke of Suffolke, and the Tragicall end of the proud Cardinal of Winchester, with the notable Rebellion of Jack Cade: and the Duke of Yorke's first claim unto the Crowne (republished in 1600 and 1619). The Folio text appears under the title The second Part of Henry the Sixt, with the death of the Good Duke Humfrey.", "performance": "although it is known that the play was definitely performed in Shakespeare's day, the first recorded performance was not until 23 April 1864 at the Surrey Theatre, directed by James Anderson.", "evidence": "It is known that 3 Henry VI was on stage by June 1592, and it is also known that 3 Henry VI was definitely a sequel to 2 Henry VI, meaning 2 Henry VI must also have been on stage by early 1592. This places the likely date of composition as 1590-1591." },
{ "play": "Henry VI, Part 3", "date": "1591", "record": "version of the play published in octavo in 1595. 3 Henry VI was never entered into the Stationers' Register.", "published": "version of the play published in octavo in 1595 as The True Tragedie of Richard Duke of Yorke, and the death of good King Henrie the Sixt, with the Whole Contention betweene the two Houses Lancaster and Yorke (republished in quarto in 1600 and 1619). The Folio text appears under the title The third Part of Henry the Sixt, with the death of the Duke of Yorke.", "performance": "although it is known that the play was definitely performed in Shakespeare's day, the first recorded performance was not until 1906, when F.R. Benson directed a production at the Shakespeare Memorial Theatre.", "evidence": "It is known that the play was definitely on stage by early 1592 as in A Groatsworth of Wit, Bought with a Million of Repentance, Robert Greene mocked Shakespeare by parodying a line from 3 Henry VI. Groatsworth was registered in the Stationers' Register in September 1592, meaning True Tragedy/3 Henry VI must have been on stage prior to 23 June 1592 as that was when the government shut the London theatres due to an outbreak of plague. To have been on stage by June 1592, the play was most likely written some time in 1591." },
{ "play": "Henry VI, Part 1", "date": "1591", "record": "possibly in Philip Henslowe's diary. On 3 March 1592, Henslowe reports seeing a new play entitled Harey Vj (i.e. Henry VI) which could be a reference to 1 Henry VI. An entry is found in the Stationers' Register in September 1598 which refers to "The first and Second parte of Henry VJ'. Most critics, however, feel this probably refers to what we today call 2 Henry VI and 3 Henry VI, not 1 Henry VI. The first definite record of the play was not until the First Folio in 1623.", "published": "First Folio (1623), as The first Part of Henry the Sixt", "performance": "possibly on 3 March 1592 at The Rose in Southwark, as seen by Philip Henslowe; earliest definite performance was on 13 March 1738 at Covent Garden in what seems to have been a stand-alone performance.", "evidence": "On 3 March 1592, Philip Henslowe saw a new play entitled Harey Vj, but gives no further information. In August, Thomas Nashe published Piers Penniless his Supplication to the Devil, in which he refers to a play he had recently seen featuring a rousing depiction of Lord Talbot, a major character in 1 Henry VI. Most critics take Nashe's reference to Talbot as proof that the play Henslowe saw was 1 Henry VI. As such, to have been a new play in March 1592, it was most likely written some time in 1591. Furthermore, many critics consider 1 Henry VI to have been written as a prequel to the successful two-part play, The Contention and True Tragedy. Possibly co-written with Thomas Nashe and/or other unidentified dramatists." },
{ "play": "Titus Andronicus", "date": "1591-1592", "record": "Philip Henslowe's diary, 24 January 1594. On 6 February 1594, the play was entered into the Stationers' Register as "a booke intitled a Noble Roman Historye of Tytus Andronicus'.", "published": "version of the play published in quarto in February 1594 as The Most Lamentable Romaine Tragedy of Titus Andronicus (first known printing of a Shakespeare play). The play was republished in quarto in 1600 and 1611. There are only minor differences between the 1594 quarto text and the later 1623 First Folio text (i.e. the 1594 text is not considered a bad quarto or a reported text). The Folio text appears under the title The Lamentable Tragedy of Titus Andronicus.", "performance": "on 24 January 1594 at the Rose Theatre in Southwark, as recorded in Henslowe's diary.", "evidence": "According to the title page of the 1594 quarto, the play had been performed by Pembroke's Men, a company which ceased performing in September 1593. As such, the play must have been composed some time prior to September. Additionally, it is unlikely to have been written later than June 1592, as that was when the London theatres were closed due to an outbreak of plague. The theatres would remain shut for the better part of two years, not fully reopening until March 1594 and Shakespeare concentrated most of his energies during this period on poetry. As such, the play was most likely composed sometime between late-1591 and early 1592. Possibly co-written with George Peele" },
{ "play": "Richard III", "date": "1592", "record": "version of the play entered into the Stationers' Register on 20 October 1597 as "a booke intituled, The tragedie of kinge Richard the Third wth the death of the duke of Clarence'.", "published": "version of the play published in quarto in December 1597 as The tragedy of King Richard the third. Containing, his treacherous plots against his brother Clarence: the pittiefull murther of his innocent nephewes: his tyrannicall usurpation: with the whole course of his detested life, and most deserved death. The Folio text appears under the title The Tragedy of Richard the Third, with the Landing of Earle Richmond, and the Battell at Bosworth Field.", "performance": "The play was performed extensively in Shakespeare's lifetime; it is mentioned in Palladis Tamia in 1598 (as "Richard the 3.'), and by the time of the First Folio in 1623, had been published in quarto six times (1597, 1598, 1603, 1605, 1612 and 1622), and referenced by multiple writers of the day. Regarding specific performances however, there is little solid evidence. In 1602, John Manningham mentions seeing Richard Burbage playing the role of Richard III, but he offers no further information. The earliest definite performance was at St James's Palace on 16 or 17 November 1633 by the King's Men.", "evidence": "It is known that Richard III was definitely a sequel to 3 Henry VI, which was on-stage by 23 June 1592, hence Richard III must have been written later than early 1592. Additionally, it has been argued that the play contains evidence suggesting it was originally written for Strange's Men, but then rewritten for Pembroke's Men, a company which formed in mid-1592. Also, with the closure of the theatres due to an outbreak of plague in June 1592, the play was unlikely to have been written any later than that, all of which suggests a date of composition as sometime in early-1592." },
{ "play": "Edward III", "date": "1592-1593", "record": "entered into the Stationers' Register on 1 December 1595 as "a booke intituled Edward the Third and the blacke prince their warres wth kinge Iohn of Fraunce'.", "published": "published in quarto in 1596 as The Raigne Of King Edvvard the third (republished in 1599)", "performance": "although it is known from the 1596 quarto title page that the play was performed in the 1590s, the earliest recorded performance was not until 6 March 1911 at the Little Theatre in London, directed by Gertrude Kingston and William Poel. However, this production presented only the first half of the play (dealing with the King's infatuation with the Countess of Salisbury). Performed under the title, The King and the Countess, it was presented in a single matinée performance with the anonymous sixteenth century liturgical drama, Jacob and Esau. The first known performance of the complete text took place in June 1987, at the Theatr Clwyd, directed by Toby Robertson.", "evidence": "Obviously, the play was written by December 1595. According to the title page of the quarto, it had been performed recently in London, but no company information is provided. This could mean that the company that performed the play had disbanded during the closure of the theatres from June 1592 to March 1594. Furthermore, internal evidence suggests that the play may have been specifically written for Pembroke's Men, who ceased performing in September 1593. This places the date of composition as most likely somewhere between early 1592 and September 1593." },
{ "play": "The Comedy of Errors", "date": "1594", "record": "Francis Meres' Palladis Tamia (1598); referred to as "Errors"", "published": "First Folio (1623)", "performance": "probably on Innocents Day, 28 December 1594 at Gray's Inn (one of the four London Inns of Court). The only known evidence for this performance is the Gesta Grayorum, a 1688 text printed for William Canning based on a manuscript apparently handed down from the 1590s, detailing the "Prince of Purpoole" festival from December 1594 to February 1595.[c] According to the text, after a disastrous attempt to stage "some notable performance […] it was thought good not to offer any thing of Account, saving Dancing and Revelling with Gentlewomen; and after such Sports, a Comedy of Errors (like to Plautus his Menaechmus) was played by the Players. So that Night was begun, and continued to the end, in nothing but Confusion and Errors; whereupon, it was ever afterwards called, The Night of Errors." As Comedy of Errors is indeed based on Menaechmus, this is almost universally accepted as a reference to an otherwise unrecorded performance of the play, probably by Shakespeare's own company, the newly formed Lord Chamberlain's Men.", "evidence": "traditionally, the play has been dated quite early (Ros King, for example, dates it 1586-1589), and has often been seen as Shakespeare's first comedy, perhaps his first play. However, stylistic and linguistic analysis (proportion of verse to prose, amount of rhyme, use of colloquialism in verse, and a rare word test) has placed it closer to the composition of Richard II and Romeo and Juliet, both of which were written in 1594 or 1595. More specifically, the limited setting (it is one of only two Shakespeare plays to observe the Classical unities) and the brevity of the play (Shakespeare's shortest at 1777 lines), along with the great abundance of legal terminology, suggests to some critics the probability of it being written especially for the Gray's Inn performance, which would place its composition in the latter half of 1594. If it was written for Gray's Inn, it most likely represents the first play by Shakespeare which was specifically commissioned. In this case, that commission could have come from Henry Wriothesley, Earl of Southampton, a member of the Inns of Court, and Shakespeare's patron." },
{ "play": "Love's Labour's Lost", "date": "1594-1595", "record": "a version of the play was published in quarto in 1598, although the exact date is unknown as it was never entered into the Stationers' Register. Also in 1598, Robert Tofte mentioned the play in his sonnet sequence Alba. The months minde of a melancholy lover; "Love's Labour Lost, I once did see, a play/Y'cleped so, so called to my pain." The date of publication of Alba is unknown as it also was not entered into the Register. Additionally, the play is mentioned in Meres' Palladis Tamia (registered on 7 September, with a dedication dated 10 October). It is unknown exactly which one of these three constitutes the first official record of the play.", "published": "version of the play published in quarto in 1598 as A Pleasant Conceited Comedie called Loves labors lost (the first known printing of a Shakespearean play to include his name on the title page). The Folio text appears under the title Love's Labour's lost.", "performance": "according to the quarto title page, the play was performed at court for Queen Elizabeth sometime over Christmas 1597, however, no further information is provided. The earliest definite performance took place some time between 8 and 15 January 1605, for Anne of Denmark, at either Henry Wriothesley or Robert Cecil's house.", "evidence": "Obviously, the play was written by Christmas 1597, but narrowing the date further has proved difficult, with most efforts focusing upon stylistic evidence. Traditionally, it was seen as one of Shakespeare's earliest plays (Charles Gildon wrote in 1710; "since it is one of the worst of Shakespeare's Plays, nay I think I may say the very worst, I cannot but think it is his first.') For much of the eighteenth century, it tended to be dated 1590, until Malone's newly constructed chronology in 1778, which dated it 1594. In his 1930 chronology, E.K. Chambers found the play to be more sophisticated than Malone had allowed for, and dated it 1595. Today most scholars tend to concur with a date of 1594-1595, and the play is often grouped with the "lyrical plays'; Richard II, Romeo and Juliet and A Midsummer Night's Dream, because of its prolific use of rhyming. These four plays are argued to represent a phase of Shakespeare's career where he was experimenting with rhyming iambic pentameter as an alternative form to standard blank verse; Richard II has more rhymed verse than any other history play (19.1%), Romeo and Juliet more than any other tragedy (16.6%) and Love's Labour's and Midsummer Night more than any other comedy (43.1% and 45.5% respectively). All four tend to be dated to 1594/1595. In support of this, Ants Oras' pause test places the play after Richard III, which is usually dated 1592. Furthermore, Taylor finds possible allusions to the Gray's Inn revels of December 1594 (specifically the Muscovite masque in Act 5, Scene 2), and also finds plausible Geoffrey Bullough's argument that the satire of the King of Navarre (loosely based on Henry of Navarre, who was associated with oath breaking after abjuring Protestantism in 1593) favours a date after December 1594, when Henry survived an assassination attempt." },
{ "play": "Love's Labour's Won", "date": "1595-1596", "record": "Francis Meres' Palladis Tamia (1598); referred to as "Love labours wonne"", "published": "published in quarto some time prior to 1603", "performance": "there are no recorded performances of the play", "evidence": "There are only two known references to this play. One is in Meres' Palladis Tamia, the other is on a list by Christopher Hunt, dated August 1603, which gives a list of published plays sold by an Exeter bookseller. Up until 1953, only Meres' reference was known, until Hunt's two pages of handwriting were discovered in the backing of a copy of Thomas Gataker's Certaine Sermones. The discovery was handed over to T.W. Baldwin, who published his findings in 1957 as Shakespeare's Love's Labour's Won. The title suggests the play was written as a sequel to Love's Labour's Lost, which is partially supported by the unusually open-ended nature of that play, hence Love's Labour's Won's position in the Oxford chronology. However, whether the play ever existed has been debated, with some critics speculating that it is simply another name for one of Shakespeare's known plays, a situation similar to Henry VIII, which was originally performed with the title All is True. As Meres refers to The Two Gentlemen of Verona, The Comedy of Errors and The Merchant of Venice, prior to the discovery of the Hunt reference, a common suggestion was The Taming of the Shrew, but as Hunt mentions this play, it could not be Love's Labour's Won. Although Much Ado About Nothing, All's Well That Ends Well and Troilus and Cressida have also been cited as possibilities, these plays tend to be dated later than 1598 (much later in the case of Troilus, although the argument is that Love's Labour's Won is an early draft), and as there are no other pre-1598 Shakespearean comedies with which to equate it, it seems certain that the play did exist, that it was performed and published, but that it has since been lost." },
{ "play": "Richard II", "date": "1595", "record": "entered into the Stationers' Register on 29 August 1597 as "the Tragedye of Richard the Second'.", "published": "version of the play published in quarto in 1597 as The Tragedie of King Richard the second (republished in 1598 (twice), 1608 and 1615). The Folio text appears under the title The life and death of King Richard the Second", "performance": "possible performance on 9 December 1595 at Sir Edward Hoby's house. Hoby's wife, the daughter of Baron Hunsdon (chief patron of the Lord Chamberlain's Men), wrote a letter to Sir Robert Cecil inviting him to supper and to see "K. Richard present him self to your vewe." Many scholars see this as a reference to Richard II, especially because of the Hunsdon connection with Shakespeare's company. However, some scholars argue that the reference could be to a painting, not a play, whilst others argue there is no evidence that "K. Richard" necessarily refers to Richard II, suggesting it could refer to Richard III or to another play entirely. There is no complete consensus on this issue, although most scholars do tend to favour the Richard II theory. The earliest definite performance was at the Globe Theatre on 7 February 1601, organised by the Earl of Essex in a performance probably intended to inspire his supporters on the eve of his armed rebellion against Queen Elizabeth. According to testimony given by actor Augustine Phillips at Essex' trial for treason, he paid the Lord Chamberlain's Men forty shillings more than the standard rate to stage the play.", "evidence": "Richard II is usually seen as one of the "lyrical plays', along with Love's Labour's Lost, Romeo and Juliet and A Midsummer Night's Dream; four plays in which Shakespeare used rhymed iambic pentameter more than anywhere else in his career. The four plays also include elaborate punning, rhetorical patterning, a general avoidance of colloquialisms and a high volume of metrical regularity. All four of these plays tend to be dated to 1594-1595. Also important in dating the play is Samuel Daniel's The First Four Books of the Civil Wars, which was entered into the Stationers' Register on 11 October 1594, and published in early 1595. Although some scholars have suggested that Daniel used Shakespeare as a source, which would mean the play was written somewhat earlier than 1594, most agree that Shakespeare used Daniel, especially in some of the later scenes, meaning the play could not have been written earlier than 1595." },
{ "play": "Romeo and Juliet", "date": "1595", "record": "version of the play published in 1597 (this play was never entered into the Stationers' Register)", "published": "version of the play published in quarto in 1597 as An excellent conceited tragedie of Romeo and Juliet", "performance": "1 March 1662 at Lincoln's Inn Fields, directed by William Davenant.", "evidence": "" },
{ "play": "A Midsummer Night's Dream", "date": "1595", "record": "Francis Meres' Palladis Tamia (1598); referred to as "Midsummers night dreame"", "published": "in quarto in November or December 1600", "performance": "", "evidence": "" },
{ "play": "The Life and Death of King John", "date": "1596", "record": "Francis Meres' Palladis Tamia (1598); referred to as "King Iohn"", "published": "First Folio (1623)", "performance": "although there are several references to the play having been performed during the seventeenth century, none of them offer any specific details, and the first documented performance was on 26 February 1737 at Covent Garden.", "evidence": "" },
{ "play": "The Merchant of Venice", "date": "1596", "record": "version of the play entered into the Stationers' Register on 22 July 1598", "published": "version of the play published in quarto in 1600 as The most excellent historie of the merchant of Venice. With the extreame crueltie of Shylocke the Jewe towards the sayd merchant, in cutting a just pound of his flesh: and the obtayning of Portia by the choyse of three chests", "performance": "the play was performed at court for King James on 10 February 1605.", "evidence": "The play was obviously in existence by 1598, however, other evidence places its date of composition as earlier, probably 1596. Shakespeare's source for the casket subplot is believed to have been Richard Robinson's translation of the Gesta romanorum, which wasn't published until late 1595. In addition, Salarino's reference to "my wealthy Andrew docked in sand" is thought to refer to the San Andréas, a Spanish merchant vessel that ran aground in Essex in June 1596. It is also thought by scholars that the play was written to capitalise on the enormous success of Christopher Marlowe's The Jew of Malta." },
{ "play": "Henry IV, Part 1", "date": "1596-1597", "record": "version of the play entered into the Stationers' Register on 25 February 1598", "published": "version of the play published in quarto in 1598 as The History of Henrie the Fourth, with the battell at Shrewsburie between the King and Lord Henry Percy, surnamed Hotspur of the North, with the humorous conceits of Sir John Falstaffe 1623 Folio text appeared under the title The First Part of Henry the Fourth, with the Life and Death of Henry Sirnamed Hot-spurre", "performance": "the play was probably performed at court for an Ambassador from Burgundy on 6 March 1600.", "evidence": "" },
{ "play": "The Merry Wives of Windsor", "date": "1597-1598", "record": "version of the play entered into the Stationers' Register on 18 January 1602", "published": "version of the play published in quarto in 1602 as A most pleasaunt and excellent conceited comedie, of Sir John Falstaffe, and the merrie wives of Windsor. Entermixed with sundrie variable and pleasing humours, of Sir Hugh the Welch knight, Justice Shallow, and his wise cousin M. Slender. With the swaggering vaine of Auncient Pistoll, and Corporall Nym", "performance": "4 November 1604 at Whitehall Palace.", "evidence": "Textual evidence and certain topical allusions suggest the play was composed as a specially commissioned piece for a Garter Feast (an annual meeting of the Order of the Garter), possibly the Feast on 23 April 1597. It is theorised that Shakespeare interrupted his composition of 2 Henry IV somewhere around Act 3-Act 4, so as to concentrate on writing Merry Wives." },
{ "play": "Henry IV, Part 2", "date": "1596-1597", "record": "version of the play entered into the Stationers' Register on 23 August 1600", "published": "version of the play published in quarto in 1600 as The second part of Henrie the fourth, continuing to his death, and coronation of Henrie the fift. With the humours of Sir John Falstaffe, and swaggering Pistoll 1623 Folio text appeared under the title The Second Part of Henry the Fourth, Containing his Death and the Coronation of King Henry the Fift", "performance": "a play entitled Sir John Falstaffe was performed at Whitehall over the Christmas period of 1612 which is believed to be 2 Henry IV.", "evidence": "The play could not have been written any earlier than January 1596, as it contains an allusion to the Sultanate of Mehmed III, who didn't become sultan until that date." },
{ "play": "Much Ado About Nothing", "date": "1598-1599", "record": "version of the play published in 1600 (this play was never entered into the Stationers' Register)", "published": "Much adoe about Nothing was published in quarto in 1600", "performance": "14 February 1613, performed at court as part of the festivities to celebrate the marriage of Princess Elizabeth of Bohemia and Frederick V, Elector Palatine", "evidence": "The play was not included in Francis Meres' Palladis Tamia, which was registered on 7 September 1598, suggesting it hadn't been performed prior to that date. Furthermore, evidence in the quarto text suggests that Shakespeare originally wrote the role of Dogberry for William Kempe, however, records indicate that Kempe left the Lord Chamberlain's Men sometime in late 1598, so the play must have been written before then. As such, it was most likely composed sometime in the latter half of 1598 and was certainly completed before the new year." },
{ "play": "Henry V", "date": "1599", "record": "version of the play entered into the Stationers' Register on 14 August 1600", "published": "version of the play published in quarto in 1600 as The cronicle history of Henry the fift, with his battell fought at Agin Court in France. Togither with Auntient Pistoll. 1623 Folio text appeared under the title The Life of Henry the Fift", "performance": "7 January 1605 at the Globe Theatre, performed by the Lord Chamberlain's Men.", "evidence": "Of all Shakespeare's plays, Henry V is one of the easiest to date. A reference by the Chorus to the Earl of Essex's Irish expedition of 1599 means the play was most likely written sometime between March 1599 (when Essex left for Ireland) and September 1599 (when he returned)." },
{ "play": "Julius Caesar", "date": "1599", "record": "Thomas Platter the Younger's Diary, 21 September 1599", "published": "First Folio (1623) as The Tragedie of Julius Caesar", "performance": "21 September 1599 at the newly opened Globe Theatre", "evidence": "Obviously, the play was completed by September 1599, and may have been composed specifically as the opening play for the new theatre. In addition, because the play is not mentioned in Meres' Palladis Tamia, registered in September 1598, it was unlikely to have been performed prior to then. This places the date of composition as somewhere between September 1598 and September 1599. Additionally, textual analysis has connected the play to Henry V, which was almost certainly written in 1599, suggesting so too was Julius Caesar." },
{ "play": "As You Like It", "date": "1599-1600", "record": "on 4 August 1600 a staying order was entered in the Stationers' Register for As yo like yt", "published": "First Folio (1623)", "performance": "possibly on 2 December 1603 at Wilton House in Wiltshire, where a play was performed for James I; earliest definite performance on 20 December 1740, at Drury Lane.", "evidence": "" },
{ "play": "Hamlet", "date": "1599-1601", "record": "version of the play entered into the Stationers' Register on 26 July 1602. Folio text appeared under the title The Tragedie of Hamlet, Prince of Denmarke", "published": "version of the play published in quarto in 1603 as The tragicall historie of Hamlet Prince of Denmarke", "performance": "the entry in the Stationers' Register in July 1602 states that the play was "latelie Acted by the Lo: Chamberleyne his servantes'. The title page of the first quarto states that it had been performed in London, at the two universities of Cambridge and Oxford, "and else-where', presumably on tour in the provinces. The first definite dated performance took place on a ship anchored off the coast of Africa in September 1607, the Red Dragon. The play was performed by the crew.", "evidence": "Because the versions of Hamlet which appeared in 1603, in 1604 (again in quarto) and in the First Folio of 1623 differ so much from one another, dating the play is exceptionally difficult. There is also the problem of the Ur-Hamlet, a possible source used by Shakespeare, now lost. Others however, feel that Ur-Hamlet (if it ever existed) was most likely an early draft. Hamlet was written sometime between September 1598 (as it was not included in Meres' Palladis Tamia) and July 1602 (when it was registered in the Stationers Register). Furthermore, internal references to Julius Caesar would indicate the play could not have been written any earlier than September 1599. Additionally, in his 1598 copy of an edition of Geoffrey Chaucer's works, Gabriel Harvey has written that Shakespeare's "Lucrece & his tragedie of Hamlet, prince of Denmarke, have it in them, to please the wiser sort'. Harvey also mentions the Earl of Essex as still alive, which would suggest he wrote the note prior to 25 February 1601, when Essex was executed. This would seem to narrow the date of composition to between September 1599 and February 1601; however, not all scholars accept the veracity of Harvey's note. Internal evidence in the play has also been cited, usually as illustrative of a date of composition of 1600 or 1601. As such, many scholars interpret the available evidence as suggestive of a date of initial composition sometime in 1600, with subsequent revisions. This dating, however, is far from universally accepted." },
{ "play": "Twelfth Night", "date": "1601", "record": "John Manningham mentions in his Diary having seen the play performed in February 1602", "published": "First Folio (1623) as Twelfe Night, Or what you will", "performance": "John Manningham saw the play performed at the Middle Temple on Candlemas 1602, which fell on 2 February.", "evidence": "" },
{ "play": "Troilus and Cressida", "date": "1602", "record": "version of the play entered into the Stationers' Register on 7 February 1603", "published": "version of the play published in quarto in 1609 as The historie of Troylus and Cresseida. 1623 Folio text appeared under the title The Tragedie of Troilus and Cressida", "performance": "an adaptation of the play by John Dryden was staged in 1679.", "evidence": "" },
{ "play": "Measure for Measure", "date": "1603-1604", "record": "revels accounts for Christmas 1604-1605 state the play was performed over the holidays", "published": "First Folio (1623)", "performance": "Revels accounts for Christmas 1604-1605 indicate the play was performed at Whitehall on St. Stephen's Day 1604.", "evidence": "This play is notoriously difficult to date specifically partly due to a lack of solid evidence and partly due to the theory that the text which appeared in the First Folio was not Shakespeare's original text. Obviously the play was written (in some form) prior to December 1604. The only other evidence are possible topical references within the play itself which would seem to indicate a date most likely in 1602, but this is not universally accepted by all scholars. Furthermore, there is a theory that Thomas Middleton rewrote the play after Shakespeare's death, possibly in 1621, which throws further doubt on the exact date of initial composition." },
{ "play": "Othello", "date": "1603-1604", "record": "revels accounts refer to the play having been performed in November 1604", "published": "version of the play published in quarto in 1622 as The Tragedy of Othello, the Moore of Venice", "performance": "revels accounts indicate the play was performed at Whitehall on 1 November 1604.", "evidence": "" },
{ "play": "King Lear", "date": "1605-1606", "record": "version of the play entered into the Stationers' Register on 26 November 1607 as A booke called. Mr William Shakespeare his historye of Kinge Lear", "published": "version of the play published in quarto in 1608 as The true chronicle historie of the life and death of King Lear and his three daughters. With the unfortunate life of Edgar, sonne and heire to the Earle of Gloster, and his sullen and assumed humor of Tom of Bedlam", "performance": "according to the Stationers' Register, the play was performed at Whitehall on 26 December 1606", "evidence": "the play must have been written by late 1606. Additionally, scholars generally agree that the play is indebted to Samuel Harsnett's Declaration of Egregious Popish Impostures (entered into the Stationers' Register on 16 March 1603) and John Florio's 1603 translation of Montaigne's Essays., placing the date of composition as somewhere between March 1603 and December 1606. A further possible source for the play has evoked some disagreement however. Whilst many scholars feel that Shakespeare used the anonymous play The True Chronicle History of King Leir (entered into the Stationers' Register on 8 May 1605), and hence must have been written between May 1605 and December 1606, others argue that the relationship between the two plays has been inverted, and The True Chronicle History of King Leir was actually written to capitalise on the success of Shakespeare's play, which was probably written in 1603 or 1604. No real critical consensus has been reached regarding this disagreement." },
{ "play": "Timon of Athens", "date": "1605-1606", "record": "entered into the Stationers' Register on 8 May 1623", "published": "First Folio (1623) as The Life of Timon of Athens", "performance": "in 1674, Thomas Shadwell wrote an adaptation of the play under the title Timon of Athens: Or, The Man-hater", "evidence": "This play is another which is extremely difficult to date precisely, not the least cause of which is the claim that Shakespeare may only have written part of it, with the play being subsequently revised by Thomas Middleton. There is no reference to the play whatsoever prior to 1623, and as such, evidence for its date of composition must come from within the play itself. Taylor concludes that Middleton and Shakespeare were jointly responsible for the play and assigns the composition date to 1605 on the basis of previous analyses of colloquialism-in-verse and rare vocabulary." },
{ "play": "Macbeth", "date": "1606", "record": "possibly by Simon Forman, who records seeing the play in April 1611. However, there is considerable debate amongst scholars as to whether Forman's account is genuine", "published": "First Folio (1623) as The Tragedie of Macbeth", "performance": "possibly in April 1611, recorded by Simon Forman", "evidence": "Scholars place the date of composition as somewhere between 1603 and 1607, but efforts to narrow that date have proved inconclusive. Several possible topical references to the Gunpowder Plot of 1605 have been proposed and debated among scholars, but these references have not been universally accepted. In 1790, Edward Malone dated the play to 1606, and the vast majority of critics agree with this date even while acknowledging that little conclusive evidence exists, though the date seems correct in the context of Shakespeare's other work of the period. One suggested allusion supporting a date in late 1606 is the first witch's dialogue about a sailor's wife: "'Aroint thee, witch!" the rump-fed ronyon cries./Her husband's to Aleppo gone, master o' the Tiger" (1.6-7). This has been thought to allude to the Tiger, a ship that returned to England 27 June 1606 after a disastrous voyage in which many of the crew were killed by pirates. A few lines later the witch speaks of the sailor, "He shall live a man forbid:/Weary se'nnights nine times nine" (1.21-2). The real ship was at sea 567 days, the product of 7x9x9, which has been taken as a confirmation of the allusion, which if correct, confirms that the play could not have been written any earlier than July 1606. A. R. Braunmuller, however, in the New Cambridge edition, finds the 1605-6 arguments inconclusive, and argues only for an earliest date of 1603. Further complicating the dating of Macbeth is the fact that the play shows evidence of later revisions by Middleton, particularly in the witch scenes." },
{ "play": "Antony and Cleopatra", "date": "1606", "record": "entered into the Stationers' Register on 20 May 1608", "published": "First Folio (1623) as The Tragedie of Antony and Cleopatra", "performance": "according to the 1669 records for the Lord Chamberlain's Men, the play had recently been performed at Blackfriars, but no further information is given; earliest definite performance in 1759 when it was staged by David Garrick.", "evidence": "" },
{ "play": "All's Well That Ends Well", "date": "1606-1607", "record": "First Folio (1623)", "published": "First Folio (1623)", "performance": "1741 at Goodman's Fields Theatre, directed by Henry Giffard.", "evidence": "" },
{ "play": "Pericles, Prince of Tyre", "date": "1607", "record": "version of the play entered into the Stationers' Register on 20 May 1608", "published": "version of the play published in quarto in 1609 as The Late and much admired Play Called Pericles, Prince of Tyre, with the true Relation of the whole History, adventures, and fortunes of the sayd Prince: As also, the no lesse strange, and worthy accidents, in the Birth and Life, of his Daughter Mariana", "performance": "April 1607, seen by the Venetian ambassador to England, Zorzi Giustinian.", "evidence": "Because the play was not included in the First Folio, there has always been doubt as to whether or not Shakespeare actually wrote it at all. It first appears together with Shakespeare's other plays in the second issue of the Third Folio of 1664. In a contested field, the most widely accepted theory today is that Shakespeare collaborated on the play with another playwright, probably his younger colleague, George Wilkins. There is no complete agreement what the motives or mechanism of this collaboration were. In 1608, Wilkins published a prose narrative of Pericles purporting to be a narrative version of the play and which contains numerous phrases that seem to recall specific lines in the play, suggesting that work on the play preceded his composition of the prose version. Textual analysis of the play has suggested it be placed as in some close relation with All's Well That Ends Well and Coriolanus, which would confirm a date of 1607-1608." },
{ "play": "Coriolanus", "date": "1608", "record": "entered into the Stationers' Register on 8 November 1623", "published": "First Folio (1623) as The Tragedy of Coriolanus", "performance": "an adaptation of the play by Nahum Tate was performed at Drury Lane in 1681, under the title The Ingratitude of a Common-Wealth", "evidence": "Stylistic tests place the composition of the play after Lear, Macbeth, and Antony and Cleopatra, and the form of the verse and imagery fit well with Timon, Antony, and Pericles. Shakespeare's treatment of the grain riots is strikingly reminiscent of the Midlands corn riots of 1607. Though Menenius' fable of the belly was used in other contemporary works, the wording of Menenius's speech about the body politic is derived from William Camden's Remaines (1605). Two possible echoes of George Chapman's Iliad (registered 14 November 1608) support a date of 1608-9. A reference to "the coal of fire upon ice" (1.1.170) is a possible allusion to the winter of 1607-08, when the frost was so severe that vendors set up booths on the frozen Thames river and pans of coals were placed on the ice so that pedestrians could warm themselves. An allusion to the complaints about Hugh Myddelton's project to bring water to London has also been detected in Martius' warning to the patricians (3.1.98-9). Taylor says that the cumulative internal evidence all points to a composition date of no earlier than spring of 1608, while others favour late 1608 to early 1609. Several allusions in other works establish a terminal date of composition: Ben Jonson's Epicœne, or The silent woman, composed in late 1609, mocks a peculiar phrase in the play, and Phantasma (registered 6 February 1609), written by Robert Armin, a member of the King's Men from 1599 to 1610, contains a close literary parallel. Critics also suggest that the regular act intervals indicate that it could have been written for the indoor Blackfriars Theatre, which Shakespeare's company acquired in 1608." },
{ "play": "The Winter's Tale", "date": "1609-1610", "record": "Simon Forman saw the play at the Globe on 15 May 1611; it was performed at Court 11 November 1611", "published": "First Folio (1623)", "performance": "", "evidence": "The dance of twelve satyrs is similar to the dance of satyrs in Ben Jonson's masque Oberon performed at Court on 1 January 1611, but Taylor believes it is a later interpolation. It shares some of the same source material as Cymbeline, and stylistically it is in Shakespeare's late period. Most critics agree that it should be paired with Cymbeline." },
{ "play": "Cymbeline", "date": "1610-1611", "record": "Simon Forman saw it performed at the Globe in 1611", "published": "First Folio (1623) as The Tragedie of Cymbeline", "performance": "In an undated entry, Simon Forman saw the play performed at the Globe in 1611", "evidence": "" },
{ "play": "The Tempest", "date": "1610-1611", "record": "revels accounts refer to the play having been performed in November 1611", "published": "First Folio (1623)", "performance": "1 November 1611, at Whitehall for James I, performed by the King's Men.", "evidence": "" },
{ "play": "Cardenio", "date": "1612-1613", "record": "entered into the Stationers' Register in 1653, attributed to William Shakespeare and John Fletcher", "published": "an adaptation was published in 1727 by Lewis Theobald entitled Double Falshood; or, the Distrest Lovers", "performance": "1613, performed at the Globe by the King's Company", "evidence": "A lost play, published only in an adaptation by Lewis Theobald entitled Double Falshood (1728)." },
{ "play": "Henry VIII, or All is True", "date": "1613", "record": "", "published": "First Folio (1623) as The Famous History of the Life of King Henry the Eight", "performance": "29 June 1613, the night the Globe burnt down.", "evidence": "Probably written in collaboration with John Fletcher" },
{ "play": "The Two Noble Kinsmen", "date": "1613", "record": "entered into the Stationer' Register on 8 April 1634", "published": "published in quarto in 1634", "performance": "", "evidence": "Not included in the First Folio; written in collaboration with John Fletcher." }
];
var descTerms = [
{ key: "record", label: "First official record"},
{ key: "published", label: "First published"},
{ key: "performance", label: "First recorded performance"},
{ key: "evidence", label: "Evidence"},
];
var events = $.map(plays, function(play) {
var event = {};
event.title = play.play;
if (play.date.indexOf("-") !== -1) {
var daterange = play.date.split("-");
event.dates = [new Date(daterange[0], 0, 1), new Date(daterange[1], 11, 31)]
} else {
event.dates = [new Date(play.date, 0, 1), new Date(play.date, 11, 31)]
}
return event;
});
var timeline = new Chronoline($("#timeline")[0], events, {
animated: true,
defaultStartDate: new Date(1589, 0, 1),
draggable: true,
hashInterval: function(date) {
return date.getDate() === 1;
},
labelInterval: function(date) {
return date.getMonth() === 0 && date.getDate() === 1;
},
labelFormat: "%Y",
markToday: false,
scrollLeft: function(date) {
return new Date(date.getFullYear() - 1, date.getMonth(), date.getDate());
},
scrollRight: function(date) {
return new Date(date.getFullYear() + 1, date.getMonth(), date.getDate());
},
subLabel: null,
subSubLabel: null,
timelinePadding: DAY_IN_MILLISECONDS * 366 / 4,
tooltips: true,
visibleSpan: DAY_IN_MILLISECONDS * 366 * 5
});
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
padding: 2em;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
li {
list-style-type: none;
}
li > time + time:before {
content: "-";
}
li {
border-left: 2px solid #444444;
}
dl,
li {
margin: 0;
}
li {
position: relative;
padding-left: 1em;
padding-bottom: 1em;
}
li > time {
position: absolute;
left: -3.5em;
}
li > time + time {
top: 1em;
left: -3.85em;
}
{
padding-left: 5em;
padding-top: 1.5em;
}
li > cite {
display: block;
font-size: 1.5em;
line-height: 1em;
padding-bottom: 0.5em;
}
li > time:first-of-type:after {
content: " 0B7";
position: absolute;
right: -0.3em;
top: -0.55em;
font-size: 8em;
}
dl {
padding-left: 1.5em;
}
li > cite {
display: block;
cursor: pointer;
}
li dl {
max-height: 0;
overflow: hidden;
}
li.expanded dl {
max-height: 60em;
}
li dl {
-webkit-transition: max-height 500ms ease-in-out;
-moz-transition: max-height 500ms ease-in-out;
-o-transition: max-height 500ms ease-in-out;
transition: max-height 500ms ease-in-out;
}
</style>
</head>
<body>
<div id="timeline"></div>
<script>
window.onload = function () {
plays = [
{ "play": "The Two Gentlemen of Verona", "date": "1589-1591", "record": "Francis Meres' Palladis Tamia (1598); referred to as "Gentlemen of Verona"", "published": "First Folio (1623)", "performance": "adaptation by Benjamin Victor performed at David Garrick's Theatre Royal, Drury Lane in 1762. Earliest known performance of straight Shakespearean text at Royal Opera House in 1784, although because of the reference to the play in Palladis Tamia, we know it was definitely performed in Shakespeare's day.", "evidence": "The play contains passages which seem to borrow from John Lyly's Midas (1589), meaning it could not have been written prior to 1589. Additionally, Stanley Wells argues that the scenes involving more than four characters, "betray an uncertainty of technique suggestive of inexperience." As such, the play is considered to be one of the first Shakespeare composed upon arriving in London (Roger Warren, following E.A.J. Honigmann, suggests he may have written it prior to his arrival) and, as such, he lacked theatrical experience. This places the date of composition as most likely somewhere between 1589 and 1591, by which time it is known he was working on the Henry VI plays" },
{ "play": "The Taming of the Shrew", "date": "1590-1594", "record": "possible version of play entered into Stationers' Register on 2 May 1594 as "a booke intituled A plesant Conceyted historie called the Tayminge of a Shrowe'. First record of play as it exists today found in the First Folio (1623)", "published": "possible version of play published in quarto in 1594 as A Pleasant Conceited Historie, called The taming of a Shrew (republished in 1596 and 1607). Play as it exists today first published in the First Folio (1623) as The Taming of the Shrew.", "performance": "According to Philip Henslowe's diary, a play called The Tamynge of A Shrowe was performed at Newington Butts Theatre on 13 June 1594. This could have been either the 1594 A Shrew or the Shakespearean The Shrew, but as the Admiral's Men and the Lord Chamberlain's Men were sharing the theatre at the time, and as such Shakespeare himself would have been there, scholars tend to assume that it was The Shrew. The Shakespearean version was definitely performed at court before King Charles I and Queen Henrietta Maria on 26 November 1633, where it was described as being "liked'.", "evidence": "Kier Elam posits a date of 1591 as a terminus post quem for the composition of The Shrew, based on Shakespeare's probable use of two sources published that year; Abraham Ortelius's map of Italy in the Theatrum Orbis Terrarum (4th ed.) and John Florio's Second Fruits. However, scholars continue to debate the relationship between the 1594 A Shrew and the 1623 The Shrew. Some theorise that A Shrew is a reported text, meaning The Shrew must have been written prior to 2 May 1594; others, that A Shrew is an early draft, meaning The Shrew must have been completed sometime after 2 May 1594. There are also arguments that A Shrew may have been a source for The Shrew, that they could be two completely unrelated plays based on the same (now lost) source (the "Ur-Shrew" theory), or A Shrew could be an adaptation of The Shrew. Critics remain divided on this issue, and as such, dating the play is extremely difficult." },
{ "play": "Henry VI, Part 2", "date": "1590-1591", "record": "version of the play entered into the Stationers' Register on 12 March 1594 as "a booke intituled, the firste parte of the Contention of the twoo famous houses of york and Lancaster'.", "published": "version of the play published in quarto in 1594 as The First part of the Contention betwixt the two famous Houses of Yorke and Lancaster, with the death of the good Duke Humphrey: And the banishment and death of the Duke of Suffolke, and the Tragicall end of the proud Cardinal of Winchester, with the notable Rebellion of Jack Cade: and the Duke of Yorke's first claim unto the Crowne (republished in 1600 and 1619). The Folio text appears under the title The second Part of Henry the Sixt, with the death of the Good Duke Humfrey.", "performance": "although it is known that the play was definitely performed in Shakespeare's day, the first recorded performance was not until 23 April 1864 at the Surrey Theatre, directed by James Anderson.", "evidence": "It is known that 3 Henry VI was on stage by June 1592, and it is also known that 3 Henry VI was definitely a sequel to 2 Henry VI, meaning 2 Henry VI must also have been on stage by early 1592. This places the likely date of composition as 1590-1591." },
{ "play": "Henry VI, Part 3", "date": "1591", "record": "version of the play published in octavo in 1595. 3 Henry VI was never entered into the Stationers' Register.", "published": "version of the play published in octavo in 1595 as The True Tragedie of Richard Duke of Yorke, and the death of good King Henrie the Sixt, with the Whole Contention betweene the two Houses Lancaster and Yorke (republished in quarto in 1600 and 1619). The Folio text appears under the title The third Part of Henry the Sixt, with the death of the Duke of Yorke.", "performance": "although it is known that the play was definitely performed in Shakespeare's day, the first recorded performance was not until 1906, when F.R. Benson directed a production at the Shakespeare Memorial Theatre.", "evidence": "It is known that the play was definitely on stage by early 1592 as in A Groatsworth of Wit, Bought with a Million of Repentance, Robert Greene mocked Shakespeare by parodying a line from 3 Henry VI. Groatsworth was registered in the Stationers' Register in September 1592, meaning True Tragedy/3 Henry VI must have been on stage prior to 23 June 1592 as that was when the government shut the London theatres due to an outbreak of plague. To have been on stage by June 1592, the play was most likely written some time in 1591." },
{ "play": "Henry VI, Part 1", "date": "1591", "record": "possibly in Philip Henslowe's diary. On 3 March 1592, Henslowe reports seeing a new play entitled Harey Vj (i.e. Henry VI) which could be a reference to 1 Henry VI. An entry is found in the Stationers' Register in September 1598 which refers to "The first and Second parte of Henry VJ'. Most critics, however, feel this probably refers to what we today call 2 Henry VI and 3 Henry VI, not 1 Henry VI. The first definite record of the play was not until the First Folio in 1623.", "published": "First Folio (1623), as The first Part of Henry the Sixt", "performance": "possibly on 3 March 1592 at The Rose in Southwark, as seen by Philip Henslowe; earliest definite performance was on 13 March 1738 at Covent Garden in what seems to have been a stand-alone performance.", "evidence": "On 3 March 1592, Philip Henslowe saw a new play entitled Harey Vj, but gives no further information. In August, Thomas Nashe published Piers Penniless his Supplication to the Devil, in which he refers to a play he had recently seen featuring a rousing depiction of Lord Talbot, a major character in 1 Henry VI. Most critics take Nashe's reference to Talbot as proof that the play Henslowe saw was 1 Henry VI. As such, to have been a new play in March 1592, it was most likely written some time in 1591. Furthermore, many critics consider 1 Henry VI to have been written as a prequel to the successful two-part play, The Contention and True Tragedy. Possibly co-written with Thomas Nashe and/or other unidentified dramatists." },
{ "play": "Titus Andronicus", "date": "1591-1592", "record": "Philip Henslowe's diary, 24 January 1594. On 6 February 1594, the play was entered into the Stationers' Register as "a booke intitled a Noble Roman Historye of Tytus Andronicus'.", "published": "version of the play published in quarto in February 1594 as The Most Lamentable Romaine Tragedy of Titus Andronicus (first known printing of a Shakespeare play). The play was republished in quarto in 1600 and 1611. There are only minor differences between the 1594 quarto text and the later 1623 First Folio text (i.e. the 1594 text is not considered a bad quarto or a reported text). The Folio text appears under the title The Lamentable Tragedy of Titus Andronicus.", "performance": "on 24 January 1594 at the Rose Theatre in Southwark, as recorded in Henslowe's diary.", "evidence": "According to the title page of the 1594 quarto, the play had been performed by Pembroke's Men, a company which ceased performing in September 1593. As such, the play must have been composed some time prior to September. Additionally, it is unlikely to have been written later than June 1592, as that was when the London theatres were closed due to an outbreak of plague. The theatres would remain shut for the better part of two years, not fully reopening until March 1594 and Shakespeare concentrated most of his energies during this period on poetry. As such, the play was most likely composed sometime between late-1591 and early 1592. Possibly co-written with George Peele" },
{ "play": "Richard III", "date": "1592", "record": "version of the play entered into the Stationers' Register on 20 October 1597 as "a booke intituled, The tragedie of kinge Richard the Third wth the death of the duke of Clarence'.", "published": "version of the play published in quarto in December 1597 as The tragedy of King Richard the third. Containing, his treacherous plots against his brother Clarence: the pittiefull murther of his innocent nephewes: his tyrannicall usurpation: with the whole course of his detested life, and most deserved death. The Folio text appears under the title The Tragedy of Richard the Third, with the Landing of Earle Richmond, and the Battell at Bosworth Field.", "performance": "The play was performed extensively in Shakespeare's lifetime; it is mentioned in Palladis Tamia in 1598 (as "Richard the 3.'), and by the time of the First Folio in 1623, had been published in quarto six times (1597, 1598, 1603, 1605, 1612 and 1622), and referenced by multiple writers of the day. Regarding specific performances however, there is little solid evidence. In 1602, John Manningham mentions seeing Richard Burbage playing the role of Richard III, but he offers no further information. The earliest definite performance was at St James's Palace on 16 or 17 November 1633 by the King's Men.", "evidence": "It is known that Richard III was definitely a sequel to 3 Henry VI, which was on-stage by 23 June 1592, hence Richard III must have been written later than early 1592. Additionally, it has been argued that the play contains evidence suggesting it was originally written for Strange's Men, but then rewritten for Pembroke's Men, a company which formed in mid-1592. Also, with the closure of the theatres due to an outbreak of plague in June 1592, the play was unlikely to have been written any later than that, all of which suggests a date of composition as sometime in early-1592." },
{ "play": "Edward III", "date": "1592-1593", "record": "entered into the Stationers' Register on 1 December 1595 as "a booke intituled Edward the Third and the blacke prince their warres wth kinge Iohn of Fraunce'.", "published": "published in quarto in 1596 as The Raigne Of King Edvvard the third (republished in 1599)", "performance": "although it is known from the 1596 quarto title page that the play was performed in the 1590s, the earliest recorded performance was not until 6 March 1911 at the Little Theatre in London, directed by Gertrude Kingston and William Poel. However, this production presented only the first half of the play (dealing with the King's infatuation with the Countess of Salisbury). Performed under the title, The King and the Countess, it was presented in a single matinée performance with the anonymous sixteenth century liturgical drama, Jacob and Esau. The first known performance of the complete text took place in June 1987, at the Theatr Clwyd, directed by Toby Robertson.", "evidence": "Obviously, the play was written by December 1595. According to the title page of the quarto, it had been performed recently in London, but no company information is provided. This could mean that the company that performed the play had disbanded during the closure of the theatres from June 1592 to March 1594. Furthermore, internal evidence suggests that the play may have been specifically written for Pembroke's Men, who ceased performing in September 1593. This places the date of composition as most likely somewhere between early 1592 and September 1593." },
{ "play": "The Comedy of Errors", "date": "1594", "record": "Francis Meres' Palladis Tamia (1598); referred to as "Errors"", "published": "First Folio (1623)", "performance": "probably on Innocents Day, 28 December 1594 at Gray's Inn (one of the four London Inns of Court). The only known evidence for this performance is the Gesta Grayorum, a 1688 text printed for William Canning based on a manuscript apparently handed down from the 1590s, detailing the "Prince of Purpoole" festival from December 1594 to February 1595.[c] According to the text, after a disastrous attempt to stage "some notable performance […] it was thought good not to offer any thing of Account, saving Dancing and Revelling with Gentlewomen; and after such Sports, a Comedy of Errors (like to Plautus his Menaechmus) was played by the Players. So that Night was begun, and continued to the end, in nothing but Confusion and Errors; whereupon, it was ever afterwards called, The Night of Errors." As Comedy of Errors is indeed based on Menaechmus, this is almost universally accepted as a reference to an otherwise unrecorded performance of the play, probably by Shakespeare's own company, the newly formed Lord Chamberlain's Men.", "evidence": "traditionally, the play has been dated quite early (Ros King, for example, dates it 1586-1589), and has often been seen as Shakespeare's first comedy, perhaps his first play. However, stylistic and linguistic analysis (proportion of verse to prose, amount of rhyme, use of colloquialism in verse, and a rare word test) has placed it closer to the composition of Richard II and Romeo and Juliet, both of which were written in 1594 or 1595. More specifically, the limited setting (it is one of only two Shakespeare plays to observe the Classical unities) and the brevity of the play (Shakespeare's shortest at 1777 lines), along with the great abundance of legal terminology, suggests to some critics the probability of it being written especially for the Gray's Inn performance, which would place its composition in the latter half of 1594. If it was written for Gray's Inn, it most likely represents the first play by Shakespeare which was specifically commissioned. In this case, that commission could have come from Henry Wriothesley, Earl of Southampton, a member of the Inns of Court, and Shakespeare's patron." },
{ "play": "Love's Labour's Lost", "date": "1594-1595", "record": "a version of the play was published in quarto in 1598, although the exact date is unknown as it was never entered into the Stationers' Register. Also in 1598, Robert Tofte mentioned the play in his sonnet sequence Alba. The months minde of a melancholy lover; "Love's Labour Lost, I once did see, a play/Y'cleped so, so called to my pain." The date of publication of Alba is unknown as it also was not entered into the Register. Additionally, the play is mentioned in Meres' Palladis Tamia (registered on 7 September, with a dedication dated 10 October). It is unknown exactly which one of these three constitutes the first official record of the play.", "published": "version of the play published in quarto in 1598 as A Pleasant Conceited Comedie called Loves labors lost (the first known printing of a Shakespearean play to include his name on the title page). The Folio text appears under the title Love's Labour's lost.", "performance": "according to the quarto title page, the play was performed at court for Queen Elizabeth sometime over Christmas 1597, however, no further information is provided. The earliest definite performance took place some time between 8 and 15 January 1605, for Anne of Denmark, at either Henry Wriothesley or Robert Cecil's house.", "evidence": "Obviously, the play was written by Christmas 1597, but narrowing the date further has proved difficult, with most efforts focusing upon stylistic evidence. Traditionally, it was seen as one of Shakespeare's earliest plays (Charles Gildon wrote in 1710; "since it is one of the worst of Shakespeare's Plays, nay I think I may say the very worst, I cannot but think it is his first.') For much of the eighteenth century, it tended to be dated 1590, until Malone's newly constructed chronology in 1778, which dated it 1594. In his 1930 chronology, E.K. Chambers found the play to be more sophisticated than Malone had allowed for, and dated it 1595. Today most scholars tend to concur with a date of 1594-1595, and the play is often grouped with the "lyrical plays'; Richard II, Romeo and Juliet and A Midsummer Night's Dream, because of its prolific use of rhyming. These four plays are argued to represent a phase of Shakespeare's career where he was experimenting with rhyming iambic pentameter as an alternative form to standard blank verse; Richard II has more rhymed verse than any other history play (19.1%), Romeo and Juliet more than any other tragedy (16.6%) and Love's Labour's and Midsummer Night more than any other comedy (43.1% and 45.5% respectively). All four tend to be dated to 1594/1595. In support of this, Ants Oras' pause test places the play after Richard III, which is usually dated 1592. Furthermore, Taylor finds possible allusions to the Gray's Inn revels of December 1594 (specifically the Muscovite masque in Act 5, Scene 2), and also finds plausible Geoffrey Bullough's argument that the satire of the King of Navarre (loosely based on Henry of Navarre, who was associated with oath breaking after abjuring Protestantism in 1593) favours a date after December 1594, when Henry survived an assassination attempt." },
{ "play": "Love's Labour's Won", "date": "1595-1596", "record": "Francis Meres' Palladis Tamia (1598); referred to as "Love labours wonne"", "published": "published in quarto some time prior to 1603", "performance": "there are no recorded performances of the play", "evidence": "There are only two known references to this play. One is in Meres' Palladis Tamia, the other is on a list by Christopher Hunt, dated August 1603, which gives a list of published plays sold by an Exeter bookseller. Up until 1953, only Meres' reference was known, until Hunt's two pages of handwriting were discovered in the backing of a copy of Thomas Gataker's Certaine Sermones. The discovery was handed over to T.W. Baldwin, who published his findings in 1957 as Shakespeare's Love's Labour's Won. The title suggests the play was written as a sequel to Love's Labour's Lost, which is partially supported by the unusually open-ended nature of that play, hence Love's Labour's Won's position in the Oxford chronology. However, whether the play ever existed has been debated, with some critics speculating that it is simply another name for one of Shakespeare's known plays, a situation similar to Henry VIII, which was originally performed with the title All is True. As Meres refers to The Two Gentlemen of Verona, The Comedy of Errors and The Merchant of Venice, prior to the discovery of the Hunt reference, a common suggestion was The Taming of the Shrew, but as Hunt mentions this play, it could not be Love's Labour's Won. Although Much Ado About Nothing, All's Well That Ends Well and Troilus and Cressida have also been cited as possibilities, these plays tend to be dated later than 1598 (much later in the case of Troilus, although the argument is that Love's Labour's Won is an early draft), and as there are no other pre-1598 Shakespearean comedies with which to equate it, it seems certain that the play did exist, that it was performed and published, but that it has since been lost." },
{ "play": "Richard II", "date": "1595", "record": "entered into the Stationers' Register on 29 August 1597 as "the Tragedye of Richard the Second'.", "published": "version of the play published in quarto in 1597 as The Tragedie of King Richard the second (republished in 1598 (twice), 1608 and 1615). The Folio text appears under the title The life and death of King Richard the Second", "performance": "possible performance on 9 December 1595 at Sir Edward Hoby's house. Hoby's wife, the daughter of Baron Hunsdon (chief patron of the Lord Chamberlain's Men), wrote a letter to Sir Robert Cecil inviting him to supper and to see "K. Richard present him self to your vewe." Many scholars see this as a reference to Richard II, especially because of the Hunsdon connection with Shakespeare's company. However, some scholars argue that the reference could be to a painting, not a play, whilst others argue there is no evidence that "K. Richard" necessarily refers to Richard II, suggesting it could refer to Richard III or to another play entirely. There is no complete consensus on this issue, although most scholars do tend to favour the Richard II theory. The earliest definite performance was at the Globe Theatre on 7 February 1601, organised by the Earl of Essex in a performance probably intended to inspire his supporters on the eve of his armed rebellion against Queen Elizabeth. According to testimony given by actor Augustine Phillips at Essex' trial for treason, he paid the Lord Chamberlain's Men forty shillings more than the standard rate to stage the play.", "evidence": "Richard II is usually seen as one of the "lyrical plays', along with Love's Labour's Lost, Romeo and Juliet and A Midsummer Night's Dream; four plays in which Shakespeare used rhymed iambic pentameter more than anywhere else in his career. The four plays also include elaborate punning, rhetorical patterning, a general avoidance of colloquialisms and a high volume of metrical regularity. All four of these plays tend to be dated to 1594-1595. Also important in dating the play is Samuel Daniel's The First Four Books of the Civil Wars, which was entered into the Stationers' Register on 11 October 1594, and published in early 1595. Although some scholars have suggested that Daniel used Shakespeare as a source, which would mean the play was written somewhat earlier than 1594, most agree that Shakespeare used Daniel, especially in some of the later scenes, meaning the play could not have been written earlier than 1595." },
{ "play": "Romeo and Juliet", "date": "1595", "record": "version of the play published in 1597 (this play was never entered into the Stationers' Register)", "published": "version of the play published in quarto in 1597 as An excellent conceited tragedie of Romeo and Juliet", "performance": "1 March 1662 at Lincoln's Inn Fields, directed by William Davenant.", "evidence": "" },
{ "play": "A Midsummer Night's Dream", "date": "1595", "record": "Francis Meres' Palladis Tamia (1598); referred to as "Midsummers night dreame"", "published": "in quarto in November or December 1600", "performance": "", "evidence": "" },
{ "play": "The Life and Death of King John", "date": "1596", "record": "Francis Meres' Palladis Tamia (1598); referred to as "King Iohn"", "published": "First Folio (1623)", "performance": "although there are several references to the play having been performed during the seventeenth century, none of them offer any specific details, and the first documented performance was on 26 February 1737 at Covent Garden.", "evidence": "" },
{ "play": "The Merchant of Venice", "date": "1596", "record": "version of the play entered into the Stationers' Register on 22 July 1598", "published": "version of the play published in quarto in 1600 as The most excellent historie of the merchant of Venice. With the extreame crueltie of Shylocke the Jewe towards the sayd merchant, in cutting a just pound of his flesh: and the obtayning of Portia by the choyse of three chests", "performance": "the play was performed at court for King James on 10 February 1605.", "evidence": "The play was obviously in existence by 1598, however, other evidence places its date of composition as earlier, probably 1596. Shakespeare's source for the casket subplot is believed to have been Richard Robinson's translation of the Gesta romanorum, which wasn't published until late 1595. In addition, Salarino's reference to "my wealthy Andrew docked in sand" is thought to refer to the San Andréas, a Spanish merchant vessel that ran aground in Essex in June 1596. It is also thought by scholars that the play was written to capitalise on the enormous success of Christopher Marlowe's The Jew of Malta." },
{ "play": "Henry IV, Part 1", "date": "1596-1597", "record": "version of the play entered into the Stationers' Register on 25 February 1598", "published": "version of the play published in quarto in 1598 as The History of Henrie the Fourth, with the battell at Shrewsburie between the King and Lord Henry Percy, surnamed Hotspur of the North, with the humorous conceits of Sir John Falstaffe 1623 Folio text appeared under the title The First Part of Henry the Fourth, with the Life and Death of Henry Sirnamed Hot-spurre", "performance": "the play was probably performed at court for an Ambassador from Burgundy on 6 March 1600.", "evidence": "" },
{ "play": "The Merry Wives of Windsor", "date": "1597-1598", "record": "version of the play entered into the Stationers' Register on 18 January 1602", "published": "version of the play published in quarto in 1602 as A most pleasaunt and excellent conceited comedie, of Sir John Falstaffe, and the merrie wives of Windsor. Entermixed with sundrie variable and pleasing humours, of Sir Hugh the Welch knight, Justice Shallow, and his wise cousin M. Slender. With the swaggering vaine of Auncient Pistoll, and Corporall Nym", "performance": "4 November 1604 at Whitehall Palace.", "evidence": "Textual evidence and certain topical allusions suggest the play was composed as a specially commissioned piece for a Garter Feast (an annual meeting of the Order of the Garter), possibly the Feast on 23 April 1597. It is theorised that Shakespeare interrupted his composition of 2 Henry IV somewhere around Act 3-Act 4, so as to concentrate on writing Merry Wives." },
{ "play": "Henry IV, Part 2", "date": "1596-1597", "record": "version of the play entered into the Stationers' Register on 23 August 1600", "published": "version of the play published in quarto in 1600 as The second part of Henrie the fourth, continuing to his death, and coronation of Henrie the fift. With the humours of Sir John Falstaffe, and swaggering Pistoll 1623 Folio text appeared under the title The Second Part of Henry the Fourth, Containing his Death and the Coronation of King Henry the Fift", "performance": "a play entitled Sir John Falstaffe was performed at Whitehall over the Christmas period of 1612 which is believed to be 2 Henry IV.", "evidence": "The play could not have been written any earlier than January 1596, as it contains an allusion to the Sultanate of Mehmed III, who didn't become sultan until that date." },
{ "play": "Much Ado About Nothing", "date": "1598-1599", "record": "version of the play published in 1600 (this play was never entered into the Stationers' Register)", "published": "Much adoe about Nothing was published in quarto in 1600", "performance": "14 February 1613, performed at court as part of the festivities to celebrate the marriage of Princess Elizabeth of Bohemia and Frederick V, Elector Palatine", "evidence": "The play was not included in Francis Meres' Palladis Tamia, which was registered on 7 September 1598, suggesting it hadn't been performed prior to that date. Furthermore, evidence in the quarto text suggests that Shakespeare originally wrote the role of Dogberry for William Kempe, however, records indicate that Kempe left the Lord Chamberlain's Men sometime in late 1598, so the play must have been written before then. As such, it was most likely composed sometime in the latter half of 1598 and was certainly completed before the new year." },
{ "play": "Henry V", "date": "1599", "record": "version of the play entered into the Stationers' Register on 14 August 1600", "published": "version of the play published in quarto in 1600 as The cronicle history of Henry the fift, with his battell fought at Agin Court in France. Togither with Auntient Pistoll. 1623 Folio text appeared under the title The Life of Henry the Fift", "performance": "7 January 1605 at the Globe Theatre, performed by the Lord Chamberlain's Men.", "evidence": "Of all Shakespeare's plays, Henry V is one of the easiest to date. A reference by the Chorus to the Earl of Essex's Irish expedition of 1599 means the play was most likely written sometime between March 1599 (when Essex left for Ireland) and September 1599 (when he returned)." },
{ "play": "Julius Caesar", "date": "1599", "record": "Thomas Platter the Younger's Diary, 21 September 1599", "published": "First Folio (1623) as The Tragedie of Julius Caesar", "performance": "21 September 1599 at the newly opened Globe Theatre", "evidence": "Obviously, the play was completed by September 1599, and may have been composed specifically as the opening play for the new theatre. In addition, because the play is not mentioned in Meres' Palladis Tamia, registered in September 1598, it was unlikely to have been performed prior to then. This places the date of composition as somewhere between September 1598 and September 1599. Additionally, textual analysis has connected the play to Henry V, which was almost certainly written in 1599, suggesting so too was Julius Caesar." },
{ "play": "As You Like It", "date": "1599-1600", "record": "on 4 August 1600 a staying order was entered in the Stationers' Register for As yo like yt", "published": "First Folio (1623)", "performance": "possibly on 2 December 1603 at Wilton House in Wiltshire, where a play was performed for James I; earliest definite performance on 20 December 1740, at Drury Lane.", "evidence": "" },
{ "play": "Hamlet", "date": "1599-1601", "record": "version of the play entered into the Stationers' Register on 26 July 1602. Folio text appeared under the title The Tragedie of Hamlet, Prince of Denmarke", "published": "version of the play published in quarto in 1603 as The tragicall historie of Hamlet Prince of Denmarke", "performance": "the entry in the Stationers' Register in July 1602 states that the play was "latelie Acted by the Lo: Chamberleyne his servantes'. The title page of the first quarto states that it had been performed in London, at the two universities of Cambridge and Oxford, "and else-where', presumably on tour in the provinces. The first definite dated performance took place on a ship anchored off the coast of Africa in September 1607, the Red Dragon. The play was performed by the crew.", "evidence": "Because the versions of Hamlet which appeared in 1603, in 1604 (again in quarto) and in the First Folio of 1623 differ so much from one another, dating the play is exceptionally difficult. There is also the problem of the Ur-Hamlet, a possible source used by Shakespeare, now lost. Others however, feel that Ur-Hamlet (if it ever existed) was most likely an early draft. Hamlet was written sometime between September 1598 (as it was not included in Meres' Palladis Tamia) and July 1602 (when it was registered in the Stationers Register). Furthermore, internal references to Julius Caesar would indicate the play could not have been written any earlier than September 1599. Additionally, in his 1598 copy of an edition of Geoffrey Chaucer's works, Gabriel Harvey has written that Shakespeare's "Lucrece & his tragedie of Hamlet, prince of Denmarke, have it in them, to please the wiser sort'. Harvey also mentions the Earl of Essex as still alive, which would suggest he wrote the note prior to 25 February 1601, when Essex was executed. This would seem to narrow the date of composition to between September 1599 and February 1601; however, not all scholars accept the veracity of Harvey's note. Internal evidence in the play has also been cited, usually as illustrative of a date of composition of 1600 or 1601. As such, many scholars interpret the available evidence as suggestive of a date of initial composition sometime in 1600, with subsequent revisions. This dating, however, is far from universally accepted." },
{ "play": "Twelfth Night", "date": "1601", "record": "John Manningham mentions in his Diary having seen the play performed in February 1602", "published": "First Folio (1623) as Twelfe Night, Or what you will", "performance": "John Manningham saw the play performed at the Middle Temple on Candlemas 1602, which fell on 2 February.", "evidence": "" },
{ "play": "Troilus and Cressida", "date": "1602", "record": "version of the play entered into the Stationers' Register on 7 February 1603", "published": "version of the play published in quarto in 1609 as The historie of Troylus and Cresseida. 1623 Folio text appeared under the title The Tragedie of Troilus and Cressida", "performance": "an adaptation of the play by John Dryden was staged in 1679.", "evidence": "" },
{ "play": "Measure for Measure", "date": "1603-1604", "record": "revels accounts for Christmas 1604-1605 state the play was performed over the holidays", "published": "First Folio (1623)", "performance": "Revels accounts for Christmas 1604-1605 indicate the play was performed at Whitehall on St. Stephen's Day 1604.", "evidence": "This play is notoriously difficult to date specifically partly due to a lack of solid evidence and partly due to the theory that the text which appeared in the First Folio was not Shakespeare's original text. Obviously the play was written (in some form) prior to December 1604. The only other evidence are possible topical references within the play itself which would seem to indicate a date most likely in 1602, but this is not universally accepted by all scholars. Furthermore, there is a theory that Thomas Middleton rewrote the play after Shakespeare's death, possibly in 1621, which throws further doubt on the exact date of initial composition." },
{ "play": "Othello", "date": "1603-1604", "record": "revels accounts refer to the play having been performed in November 1604", "published": "version of the play published in quarto in 1622 as The Tragedy of Othello, the Moore of Venice", "performance": "revels accounts indicate the play was performed at Whitehall on 1 November 1604.", "evidence": "" },
{ "play": "King Lear", "date": "1605-1606", "record": "version of the play entered into the Stationers' Register on 26 November 1607 as A booke called. Mr William Shakespeare his historye of Kinge Lear", "published": "version of the play published in quarto in 1608 as The true chronicle historie of the life and death of King Lear and his three daughters. With the unfortunate life of Edgar, sonne and heire to the Earle of Gloster, and his sullen and assumed humor of Tom of Bedlam", "performance": "according to the Stationers' Register, the play was performed at Whitehall on 26 December 1606", "evidence": "the play must have been written by late 1606. Additionally, scholars generally agree that the play is indebted to Samuel Harsnett's Declaration of Egregious Popish Impostures (entered into the Stationers' Register on 16 March 1603) and John Florio's 1603 translation of Montaigne's Essays., placing the date of composition as somewhere between March 1603 and December 1606. A further possible source for the play has evoked some disagreement however. Whilst many scholars feel that Shakespeare used the anonymous play The True Chronicle History of King Leir (entered into the Stationers' Register on 8 May 1605), and hence must have been written between May 1605 and December 1606, others argue that the relationship between the two plays has been inverted, and The True Chronicle History of King Leir was actually written to capitalise on the success of Shakespeare's play, which was probably written in 1603 or 1604. No real critical consensus has been reached regarding this disagreement." },
{ "play": "Timon of Athens", "date": "1605-1606", "record": "entered into the Stationers' Register on 8 May 1623", "published": "First Folio (1623) as The Life of Timon of Athens", "performance": "in 1674, Thomas Shadwell wrote an adaptation of the play under the title Timon of Athens: Or, The Man-hater", "evidence": "This play is another which is extremely difficult to date precisely, not the least cause of which is the claim that Shakespeare may only have written part of it, with the play being subsequently revised by Thomas Middleton. There is no reference to the play whatsoever prior to 1623, and as such, evidence for its date of composition must come from within the play itself. Taylor concludes that Middleton and Shakespeare were jointly responsible for the play and assigns the composition date to 1605 on the basis of previous analyses of colloquialism-in-verse and rare vocabulary." },
{ "play": "Macbeth", "date": "1606", "record": "possibly by Simon Forman, who records seeing the play in April 1611. However, there is considerable debate amongst scholars as to whether Forman's account is genuine", "published": "First Folio (1623) as The Tragedie of Macbeth", "performance": "possibly in April 1611, recorded by Simon Forman", "evidence": "Scholars place the date of composition as somewhere between 1603 and 1607, but efforts to narrow that date have proved inconclusive. Several possible topical references to the Gunpowder Plot of 1605 have been proposed and debated among scholars, but these references have not been universally accepted. In 1790, Edward Malone dated the play to 1606, and the vast majority of critics agree with this date even while acknowledging that little conclusive evidence exists, though the date seems correct in the context of Shakespeare's other work of the period. One suggested allusion supporting a date in late 1606 is the first witch's dialogue about a sailor's wife: "'Aroint thee, witch!" the rump-fed ronyon cries./Her husband's to Aleppo gone, master o' the Tiger" (1.6-7). This has been thought to allude to the Tiger, a ship that returned to England 27 June 1606 after a disastrous voyage in which many of the crew were killed by pirates. A few lines later the witch speaks of the sailor, "He shall live a man forbid:/Weary se'nnights nine times nine" (1.21-2). The real ship was at sea 567 days, the product of 7x9x9, which has been taken as a confirmation of the allusion, which if correct, confirms that the play could not have been written any earlier than July 1606. A. R. Braunmuller, however, in the New Cambridge edition, finds the 1605-6 arguments inconclusive, and argues only for an earliest date of 1603. Further complicating the dating of Macbeth is the fact that the play shows evidence of later revisions by Middleton, particularly in the witch scenes." },
{ "play": "Antony and Cleopatra", "date": "1606", "record": "entered into the Stationers' Register on 20 May 1608", "published": "First Folio (1623) as The Tragedie of Antony and Cleopatra", "performance": "according to the 1669 records for the Lord Chamberlain's Men, the play had recently been performed at Blackfriars, but no further information is given; earliest definite performance in 1759 when it was staged by David Garrick.", "evidence": "" },
{ "play": "All's Well That Ends Well", "date": "1606-1607", "record": "First Folio (1623)", "published": "First Folio (1623)", "performance": "1741 at Goodman's Fields Theatre, directed by Henry Giffard.", "evidence": "" },
{ "play": "Pericles, Prince of Tyre", "date": "1607", "record": "version of the play entered into the Stationers' Register on 20 May 1608", "published": "version of the play published in quarto in 1609 as The Late and much admired Play Called Pericles, Prince of Tyre, with the true Relation of the whole History, adventures, and fortunes of the sayd Prince: As also, the no lesse strange, and worthy accidents, in the Birth and Life, of his Daughter Mariana", "performance": "April 1607, seen by the Venetian ambassador to England, Zorzi Giustinian.", "evidence": "Because the play was not included in the First Folio, there has always been doubt as to whether or not Shakespeare actually wrote it at all. It first appears together with Shakespeare's other plays in the second issue of the Third Folio of 1664. In a contested field, the most widely accepted theory today is that Shakespeare collaborated on the play with another playwright, probably his younger colleague, George Wilkins. There is no complete agreement what the motives or mechanism of this collaboration were. In 1608, Wilkins published a prose narrative of Pericles purporting to be a narrative version of the play and which contains numerous phrases that seem to recall specific lines in the play, suggesting that work on the play preceded his composition of the prose version. Textual analysis of the play has suggested it be placed as in some close relation with All's Well That Ends Well and Coriolanus, which would confirm a date of 1607-1608." },
{ "play": "Coriolanus", "date": "1608", "record": "entered into the Stationers' Register on 8 November 1623", "published": "First Folio (1623) as The Tragedy of Coriolanus", "performance": "an adaptation of the play by Nahum Tate was performed at Drury Lane in 1681, under the title The Ingratitude of a Common-Wealth", "evidence": "Stylistic tests place the composition of the play after Lear, Macbeth, and Antony and Cleopatra, and the form of the verse and imagery fit well with Timon, Antony, and Pericles. Shakespeare's treatment of the grain riots is strikingly reminiscent of the Midlands corn riots of 1607. Though Menenius' fable of the belly was used in other contemporary works, the wording of Menenius's speech about the body politic is derived from William Camden's Remaines (1605). Two possible echoes of George Chapman's Iliad (registered 14 November 1608) support a date of 1608-9. A reference to "the coal of fire upon ice" (1.1.170) is a possible allusion to the winter of 1607-08, when the frost was so severe that vendors set up booths on the frozen Thames river and pans of coals were placed on the ice so that pedestrians could warm themselves. An allusion to the complaints about Hugh Myddelton's project to bring water to London has also been detected in Martius' warning to the patricians (3.1.98-9). Taylor says that the cumulative internal evidence all points to a composition date of no earlier than spring of 1608, while others favour late 1608 to early 1609. Several allusions in other works establish a terminal date of composition: Ben Jonson's Epicœne, or The silent woman, composed in late 1609, mocks a peculiar phrase in the play, and Phantasma (registered 6 February 1609), written by Robert Armin, a member of the King's Men from 1599 to 1610, contains a close literary parallel. Critics also suggest that the regular act intervals indicate that it could have been written for the indoor Blackfriars Theatre, which Shakespeare's company acquired in 1608." },
{ "play": "The Winter's Tale", "date": "1609-1610", "record": "Simon Forman saw the play at the Globe on 15 May 1611; it was performed at Court 11 November 1611", "published": "First Folio (1623)", "performance": "", "evidence": "The dance of twelve satyrs is similar to the dance of satyrs in Ben Jonson's masque Oberon performed at Court on 1 January 1611, but Taylor believes it is a later interpolation. It shares some of the same source material as Cymbeline, and stylistically it is in Shakespeare's late period. Most critics agree that it should be paired with Cymbeline." },
{ "play": "Cymbeline", "date": "1610-1611", "record": "Simon Forman saw it performed at the Globe in 1611", "published": "First Folio (1623) as The Tragedie of Cymbeline", "performance": "In an undated entry, Simon Forman saw the play performed at the Globe in 1611", "evidence": "" },
{ "play": "The Tempest", "date": "1610-1611", "record": "revels accounts refer to the play having been performed in November 1611", "published": "First Folio (1623)", "performance": "1 November 1611, at Whitehall for James I, performed by the King's Men.", "evidence": "" },
{ "play": "Cardenio", "date": "1612-1613", "record": "entered into the Stationers' Register in 1653, attributed to William Shakespeare and John Fletcher", "published": "an adaptation was published in 1727 by Lewis Theobald entitled Double Falshood; or, the Distrest Lovers", "performance": "1613, performed at the Globe by the King's Company", "evidence": "A lost play, published only in an adaptation by Lewis Theobald entitled Double Falshood (1728)." },
{ "play": "Henry VIII, or All is True", "date": "1613", "record": "", "published": "First Folio (1623) as The Famous History of the Life of King Henry the Eight", "performance": "29 June 1613, the night the Globe burnt down.", "evidence": "Probably written in collaboration with John Fletcher" },
{ "play": "The Two Noble Kinsmen", "date": "1613", "record": "entered into the Stationer' Register on 8 April 1634", "published": "published in quarto in 1634", "performance": "", "evidence": "Not included in the First Folio; written in collaboration with John Fletcher." }
];
var descTerms = [
{ key: "record", label: "First official record"},
{ key: "published", label: "First published"},
{ key: "performance", label: "First recorded performance"},
{ key: "evidence", label: "Evidence"},
];
container = document.getElementById("timeline");
list = document.createElement("ol");
container.appendChild(list);
plays.forEach(function(play) {
var listItem = document.createElement("li");
if (play.date.indexOf("-") !== -1) {
var dates = play.date.split("-");
var time = document.createElement("time");
time.textContent = dates[0];
listItem.appendChild(time);
time = document.createElement("time");
time.textContent = dates[1];
listItem.appendChild(time);
} else {
var time = document.createElement("time");
time.textContent = play.date;
listItem.appendChild(time);
}
var cite = document.createElement("cite");
cite.textContent = play.play;
listItem.appendChild(cite);
var descList = document.createElement("dl");
descTerms.forEach(function(term) {
if (play[term.key]) {
var descTerm = document.createElement("dt");
descTerm.textContent = term.label;
descList.appendChild(descTerm);
var descElem = document.createElement("dd");
descElem.textContent = play[term.key];
descList.appendChild(descElem);
}
});
listItem.appendChild(descList);
list.appendChild(listItem);
})
var clicked = function(ev) {
if (ev.target.nodeName === "CITE") {
var li = ev.target.parentNode;
if (li.className === "expanded") {
li.className = "";
} else {
li.className = "expanded";
}
}
};
document.getElementById("timeline").addEventListener("click", clicked);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/timeline.css">
</head>
<body>
<div id="timeline"></div>
<script src="js/jquery.min.js"></script>
<script src="js/timeline.js"></script>
<script>
window.onload = function () {
plays = [
{
"record": "Francis Meres' Palladis Tamia (1598); referred to as "Gentlemen of Verona"",
"evidence": "The play contains passages which seem to borrow from John Lyly's Midas (1589), meaning it could not have been written prior to 1589. Additionally, Stanley Wells argues that the scenes involving more than four characters, "betray an uncertainty of technique suggestive of inexperience." As such, the play is considered to be one of the first Shakespeare composed upon arriving in London (Roger Warren, following E.A.J. Honigmann, suggests he may have written it prior to his arrival) and, as such, he lacked theatrical experience. This places the date of composition as most likely somewhere between 1589 and 1591, by which time it is known he was working on the Henry VI plays",
"published": "First Folio (1623)",
"performance": "adaptation by Benjamin Victor performed at David Garrick's Theatre Royal, Drury Lane in 1762. Earliest known performance of straight Shakespearean text at Royal Opera House in 1784, although because of the reference to the play in Palladis Tamia, we know it was definitely performed in Shakespeare's day.",
"credit": "Michael Webb",
"media": "http://www.flickr.com/photos/52472983@N08/4846552714/",
"date": "1589-1591",
"genre": "Comedies",
"caption": "Rock Valley College Studio Theatre Complete Works Project February 1988",
"play": "The Two Gentlemen of Verona"
},
{
"record": "possible version of play entered into Stationers' Register on 2 May 1594 as "a booke intituled A plesant Conceyted historie called the Tayminge of a Shrowe'. First record of play as it exists today found in the First Folio (1623)",
"evidence": "Kier Elam posits a date of 1591 as a terminus post quem for the composition of The Shrew, based on Shakespeare's probable use of two sources published that year; Abraham Ortelius's map of Italy in the Theatrum Orbis Terrarum (4th ed.) and John Florio's Second Fruits. However, scholars continue to debate the relationship between the 1594 A Shrew and the 1623 The Shrew. Some theorise that A Shrew is a reported text, meaning The Shrew must have been written prior to 2 May 1594; others, that A Shrew is an early draft, meaning The Shrew must have been completed sometime after 2 May 1594. There are also arguments that A Shrew may have been a source for The Shrew, that they could be two completely unrelated plays based on the same (now lost) source (the "Ur-Shrew" theory), or A Shrew could be an adaptation of The Shrew. Critics remain divided on this issue, and as such, dating the play is extremely difficult.",
"published": "possible version of play published in quarto in 1594 as A Pleasant Conceited Historie, called The taming of a Shrew (republished in 1596 and 1607). Play as it exists today first published in the First Folio (1623) as The Taming of the Shrew.",
"performance": "According to Philip Henslowe's diary, a play called The Tamynge of A Shrowe was performed at Newington Butts Theatre on 13 June 1594. This could have been either the 1594 A Shrew or the Shakespearean The Shrew, but as the Admiral's Men and the Lord Chamberlain's Men were sharing the theatre at the time, and as such Shakespeare himself would have been there, scholars tend to assume that it was The Shrew. The Shakespearean version was definitely performed at court before King Charles I and Queen Henrietta Maria on 26 November 1633, where it was described as being "liked'.",
"credit": "John Burns",
"media": "http://www.youtube.com/watch?v=oXUelJZSPxY",
"date": "1590-1594",
"genre": "Comedies",
"play": "The Taming of the Shrew"
},
{
"record": "version of the play entered into the Stationers' Register on 12 March 1594 as "a booke intituled, the firste parte of the Contention of the twoo famous houses of york and Lancaster'.",
"evidence": "It is known that 3 Henry VI was on stage by June 1592, and it is also known that 3 Henry VI was definitely a sequel to 2 Henry VI, meaning 2 Henry VI must also have been on stage by early 1592. This places the likely date of composition as 1590-1591.",
"published": "version of the play published in quarto in 1594 as The First part of the Contention betwixt the two famous Houses of Yorke and Lancaster, with the death of the good Duke Humphrey: And the banishment and death of the Duke of Suffolke, and the Tragicall end of the proud Cardinal of Winchester, with the notable Rebellion of Jack Cade: and the Duke of Yorke's first claim unto the Crowne (republished in 1600 and 1619). The Folio text appears under the title The second Part of Henry the Sixt, with the death of the Good Duke Humfrey.",
"performance": "although it is known that the play was definitely performed in Shakespeare's day, the first recorded performance was not until 23 April 1864 at the Surrey Theatre, directed by James Anderson.",
"credit": "Wikimedia Commons",
"media": "http://upload.wikimedia.org/wikipedia/commons/9/96/FirstFolioHenryVI2.jpg",
"date": "1590-1591",
"genre": "Histories",
"caption": "Photo of the first page of King Henry the Sixth, Part Two from a facsimile edition of the First Folio of Shakespeare's plays, published in 1623",
"play": "Henry VI, Part 2"
},
{
"record": "version of the play published in octavo in 1595. 3 Henry VI was never entered into the Stationers' Register.",
"evidence": "It is known that the play was definitely on stage by early 1592 as in A Groatsworth of Wit, Bought with a Million of Repentance, Robert Greene mocked Shakespeare by parodying a line from 3 Henry VI. Groatsworth was registered in the Stationers' Register in September 1592, meaning True Tragedy/3 Henry VI must have been on stage prior to 23 June 1592 as that was when the government shut the London theatres due to an outbreak of plague. To have been on stage by June 1592, the play was most likely written some time in 1591.",
"published": "version of the play published in octavo in 1595 as The True Tragedie of Richard Duke of Yorke, and the death of good King Henrie the Sixt, with the Whole Contention betweene the two Houses Lancaster and Yorke (republished in quarto in 1600 and 1619). The Folio text appears under the title The third Part of Henry the Sixt, with the death of the Duke of Yorke.",
"performance": "although it is known that the play was definitely performed in Shakespeare's day, the first recorded performance was not until 1906, when F.R. Benson directed a production at the Shakespeare Memorial Theatre.",
"date": "1591",
"genre": "Histories",
"play": "Henry VI, Part 3"
},
{
"record": "possibly in Philip Henslowe's diary. On 3 March 1592, Henslowe reports seeing a new play entitled Harey Vj (i.e. Henry VI) which could be a reference to 1 Henry VI. An entry is found in the Stationers' Register in September 1598 which refers to "The first and Second parte of Henry VJ'. Most critics, however, feel this probably refers to what we today call 2 Henry VI and 3 Henry VI, not 1 Henry VI. The first definite record of the play was not until the First Folio in 1623.",
"evidence": "On 3 March 1592, Philip Henslowe saw a new play entitled Harey Vj, but gives no further information. In August, Thomas Nashe published Piers Penniless his Supplication to the Devil, in which he refers to a play he had recently seen featuring a rousing depiction of Lord Talbot, a major character in 1 Henry VI. Most critics take Nashe's reference to Talbot as proof that the play Henslowe saw was 1 Henry VI. As such, to have been a new play in March 1592, it was most likely written some time in 1591. Furthermore, many critics consider 1 Henry VI to have been written as a prequel to the successful two-part play, The Contention and True Tragedy. Possibly co-written with Thomas Nashe and/or other unidentified dramatists.",
"published": "First Folio (1623), as The first Part of Henry the Sixt",
"performance": "possibly on 3 March 1592 at The Rose in Southwark, as seen by Philip Henslowe; earliest definite performance was on 13 March 1738 at Covent Garden in what seems to have been a stand-alone performance.",
"date": "1591",
"genre": "Histories",
"play": "Henry VI, Part 1"
},
{
"record": "Philip Henslowe's diary, 24 January 1594. On 6 February 1594, the play was entered into the Stationers' Register as "a booke intitled a Noble Roman Historye of Tytus Andronicus'.",
"evidence": "According to the title page of the 1594 quarto, the play had been performed by Pembroke's Men, a company which ceased performing in September 1593. As such, the play must have been composed some time prior to September. Additionally, it is unlikely to have been written later than June 1592, as that was when the London theatres were closed due to an outbreak of plague. The theatres would remain shut for the better part of two years, not fully reopening until March 1594 and Shakespeare concentrated most of his energies during this period on poetry. As such, the play was most likely composed sometime between late-1591 and early 1592. Possibly co-written with George Peele",
"published": "version of the play published in quarto in February 1594 as The Most Lamentable Romaine Tragedy of Titus Andronicus (first known printing of a Shakespeare play). The play was republished in quarto in 1600 and 1611. There are only minor differences between the 1594 quarto text and the later 1623 First Folio text (i.e. the 1594 text is not considered a bad quarto or a reported text). The Folio text appears under the title The Lamentable Tragedy of Titus Andronicus.",
"performance": "on 24 January 1594 at the Rose Theatre in Southwark, as recorded in Henslowe's diary.",
"credit": "Dusthouse",
"media": "http://vimeo.com/65065067",
"date": "1591-1592",
"genre": "Tragedies",
"caption": "Dusthouse produced theatre trailer for the Royal Shakespeare Company's production of Titus Andronicus.",
"play": "Titus Andronicus"
},
{
"record": "version of the play entered into the Stationers' Register on 20 October 1597 as "a booke intituled, The tragedie of kinge Richard the Third wth the death of the duke of Clarence'.",
"evidence": "It is known that Richard III was definitely a sequel to 3 Henry VI, which was on-stage by 23 June 1592, hence Richard III must have been written later than early 1592. Additionally, it has been argued that the play contains evidence suggesting it was originally written for Strange's Men, but then rewritten for Pembroke's Men, a company which formed in mid-1592. Also, with the closure of the theatres due to an outbreak of plague in June 1592, the play was unlikely to have been written any later than that, all of which suggests a date of composition as sometime in early-1592.",
"published": "version of the play published in quarto in December 1597 as The tragedy of King Richard the third. Containing, his treacherous plots against his brother Clarence: the pittiefull murther of his innocent nephewes: his tyrannicall usurpation: with the whole course of his detested life, and most deserved death. The Folio text appears under the title The Tragedy of Richard the Third, with the Landing of Earle Richmond, and the Battell at Bosworth Field.",
"performance": "The play was performed extensively in Shakespeare's lifetime; it is mentioned in Palladis Tamia in 1598 (as "Richard the 3.'), and by the time of the First Folio in 1623, had been published in quarto six times (1597, 1598, 1603, 1605, 1612 and 1622), and referenced by multiple writers of the day. Regarding specific performances however, there is little solid evidence. In 1602, John Manningham mentions seeing Richard Burbage playing the role of Richard III, but he offers no further information. The earliest definite performance was at St James's Palace on 16 or 17 November 1633 by the King's Men.",
"date": "1592",
"genre": "Histories",
"play": "Richard III"
},
{
"record": "entered into the Stationers' Register on 1 December 1595 as "a booke intituled Edward the Third and the blacke prince their warres wth kinge Iohn of Fraunce'.",
"evidence": "Obviously, the play was written by December 1595. According to the title page of the quarto, it had been performed recently in London, but no company information is provided. This could mean that the company that performed the play had disbanded during the closure of the theatres from June 1592 to March 1594. Furthermore, internal evidence suggests that the play may have been specifically written for Pembroke's Men, who ceased performing in September 1593. This places the date of composition as most likely somewhere between early 1592 and September 1593.",
"published": "published in quarto in 1596 as The Raigne Of King Edvvard the third (republished in 1599)",
"performance": "although it is known from the 1596 quarto title page that the play was performed in the 1590s, the earliest recorded performance was not until 6 March 1911 at the Little Theatre in London, directed by Gertrude Kingston and William Poel. However, this production presented only the first half of the play (dealing with the King's infatuation with the Countess of Salisbury). Performed under the title, The King and the Countess, it was presented in a single matinée performance with the anonymous sixteenth century liturgical drama, Jacob and Esau. The first known performance of the complete text took place in June 1987, at the Theatr Clwyd, directed by Toby Robertson.",
"date": "1592-1593",
"genre": "Histories",
"play": "Edward III"
},
{
"record": "Francis Meres' Palladis Tamia (1598); referred to as "Errors"",
"evidence": "traditionally, the play has been dated quite early (Ros King, for example, dates it 1586-1589), and has often been seen as Shakespeare's first comedy, perhaps his first play. However, stylistic and linguistic analysis (proportion of verse to prose, amount of rhyme, use of colloquialism in verse, and a rare word test) has placed it closer to the composition of Richard II and Romeo and Juliet, both of which were written in 1594 or 1595. More specifically, the limited setting (it is one of only two Shakespeare plays to observe the Classical unities) and the brevity of the play (Shakespeare's shortest at 1777 lines), along with the great abundance of legal terminology, suggests to some critics the probability of it being written especially for the Gray's Inn performance, which would place its composition in the latter half of 1594. If it was written for Gray's Inn, it most likely represents the first play by Shakespeare which was specifically commissioned. In this case, that commission could have come from Henry Wriothesley, Earl of Southampton, a member of the Inns of Court, and Shakespeare's patron.",
"published": "First Folio (1623)",
"performance": "probably on Innocents Day, 28 December 1594 at Gray's Inn (one of the four London Inns of Court). The only known evidence for this performance is the Gesta Grayorum, a 1688 text printed for William Canning based on a manuscript apparently handed down from the 1590s, detailing the "Prince of Purpoole" festival from December 1594 to February 1595.[c] According to the text, after a disastrous attempt to stage "some notable performance […] it was thought good not to offer any thing of Account, saving Dancing and Revelling with Gentlewomen; and after such Sports, a Comedy of Errors (like to Plautus his Menaechmus) was played by the Players. So that Night was begun, and continued to the end, in nothing but Confusion and Errors; whereupon, it was ever afterwards called, The Night of Errors." As Comedy of Errors is indeed based on Menaechmus, this is almost universally accepted as a reference to an otherwise unrecorded performance of the play, probably by Shakespeare's own company, the newly formed Lord Chamberlain's Men.",
"credit": "Nathan Klaus",
"media": "http://www.flickr.com/photos/21932462@N08/2650112130/",
"date": "1594",
"genre": "Comedies",
"caption": "Genesius Guild's 2008 production of "A Comedy of Errors," performed in Rock Island's Lincoln Park.",
"play": "The Comedy of Errors"
},
{
"record": "a version of the play was published in quarto in 1598, although the exact date is unknown as it was never entered into the Stationers' Register. Also in 1598, Robert Tofte mentioned the play in his sonnet sequence Alba. The months minde of a melancholy lover; "Love's Labour Lost, I once did see, a play/Y'cleped so, so called to my pain." The date of publication of Alba is unknown as it also was not entered into the Register. Additionally, the play is mentioned in Meres' Palladis Tamia (registered on 7 September, with a dedication dated 10 October). It is unknown exactly which one of these three constitutes the first official record of the play.",
"evidence": "Obviously, the play was written by Christmas 1597, but narrowing the date further has proved difficult, with most efforts focusing upon stylistic evidence. Traditionally, it was seen as one of Shakespeare's earliest plays (Charles Gildon wrote in 1710; "since it is one of the worst of Shakespeare's Plays, nay I think I may say the very worst, I cannot but think it is his first.') For much of the eighteenth century, it tended to be dated 1590, until Malone's newly constructed chronology in 1778, which dated it 1594. In his 1930 chronology, E.K. Chambers found the play to be more sophisticated than Malone had allowed for, and dated it 1595. Today most scholars tend to concur with a date of 1594-1595, and the play is often grouped with the "lyrical plays'; Richard II, Romeo and Juliet and A Midsummer Night's Dream, because of its prolific use of rhyming. These four plays are argued to represent a phase of Shakespeare's career where he was experimenting with rhyming iambic pentameter as an alternative form to standard blank verse; Richard II has more rhymed verse than any other history play (19.1%), Romeo and Juliet more than any other tragedy (16.6%) and Love's Labour's and Midsummer Night more than any other comedy (43.1% and 45.5% respectively). All four tend to be dated to 1594/1595. In support of this, Ants Oras' pause test places the play after Richard III, which is usually dated 1592. Furthermore, Taylor finds possible allusions to the Gray's Inn revels of December 1594 (specifically the Muscovite masque in Act 5, Scene 2), and also finds plausible Geoffrey Bullough's argument that the satire of the King of Navarre (loosely based on Henry of Navarre, who was associated with oath breaking after abjuring Protestantism in 1593) favours a date after December 1594, when Henry survived an assassination attempt.",
"published": "version of the play published in quarto in 1598 as A Pleasant Conceited Comedie called Loves labors lost (the first known printing of a Shakespearean play to include his name on the title page). The Folio text appears under the title Love's Labour's lost.",
"performance": "according to the quarto title page, the play was performed at court for Queen Elizabeth sometime over Christmas 1597, however, no further information is provided. The earliest definite performance took place some time between 8 and 15 January 1605, for Anne of Denmark, at either Henry Wriothesley or Robert Cecil's house.",
"date": "1594-1595",
"genre": "Comedies",
"play": "Love's Labour's Lost"
},
{
"record": "Francis Meres' Palladis Tamia (1598); referred to as "Love labours wonne"",
"evidence": "There are only two known references to this play. One is in Meres' Palladis Tamia, the other is on a list by Christopher Hunt, dated August 1603, which gives a list of published plays sold by an Exeter bookseller. Up until 1953, only Meres' reference was known, until Hunt's two pages of handwriting were discovered in the backing of a copy of Thomas Gataker's Certaine Sermones. The discovery was handed over to T.W. Baldwin, who published his findings in 1957 as Shakespeare's Love's Labour's Won. The title suggests the play was written as a sequel to Love's Labour's Lost, which is partially supported by the unusually open-ended nature of that play, hence Love's Labour's Won's position in the Oxford chronology. However, whether the play ever existed has been debated, with some critics speculating that it is simply another name for one of Shakespeare's known plays, a situation similar to Henry VIII, which was originally performed with the title All is True. As Meres refers to The Two Gentlemen of Verona, The Comedy of Errors and The Merchant of Venice, prior to the discovery of the Hunt reference, a common suggestion was The Taming of the Shrew, but as Hunt mentions this play, it could not be Love's Labour's Won. Although Much Ado About Nothing, All's Well That Ends Well and Troilus and Cressida have also been cited as possibilities, these plays tend to be dated later than 1598 (much later in the case of Troilus, although the argument is that Love's Labour's Won is an early draft), and as there are no other pre-1598 Shakespearean comedies with which to equate it, it seems certain that the play did exist, that it was performed and published, but that it has since been lost.",
"published": "published in quarto some time prior to 1603",
"performance": "there are no recorded performances of the play",
"date": "1595-1596",
"genre": "Comedies",
"play": "Love's Labour's Won"
},
{
"record": "entered into the Stationers' Register on 29 August 1597 as "the Tragedye of Richard the Second'.",
"evidence": "Richard II is usually seen as one of the "lyrical plays', along with Love's Labour's Lost, Romeo and Juliet and A Midsummer Night's Dream; four plays in which Shakespeare used rhymed iambic pentameter more than anywhere else in his career. The four plays also include elaborate punning, rhetorical patterning, a general avoidance of colloquialisms and a high volume of metrical regularity. All four of these plays tend to be dated to 1594-1595. Also important in dating the play is Samuel Daniel's The First Four Books of the Civil Wars, which was entered into the Stationers' Register on 11 October 1594, and published in early 1595. Although some scholars have suggested that Daniel used Shakespeare as a source, which would mean the play was written somewhat earlier than 1594, most agree that Shakespeare used Daniel, especially in some of the later scenes, meaning the play could not have been written earlier than 1595.",
"published": "version of the play published in quarto in 1597 as The Tragedie of King Richard the second (republished in 1598 (twice), 1608 and 1615). The Folio text appears under the title The life and death of King Richard the Second",
"performance": "possible performance on 9 December 1595 at Sir Edward Hoby's house. Hoby's wife, the daughter of Baron Hunsdon (chief patron of the Lord Chamberlain's Men), wrote a letter to Sir Robert Cecil inviting him to supper and to see "K. Richard present him self to your vewe." Many scholars see this as a reference to Richard II, especially because of the Hunsdon connection with Shakespeare's company. However, some scholars argue that the reference could be to a painting, not a play, whilst others argue there is no evidence that "K. Richard" necessarily refers to Richard II, suggesting it could refer to Richard III or to another play entirely. There is no complete consensus on this issue, although most scholars do tend to favour the Richard II theory. The earliest definite performance was at the Globe Theatre on 7 February 1601, organised by the Earl of Essex in a performance probably intended to inspire his supporters on the eve of his armed rebellion against Queen Elizabeth. According to testimony given by actor Augustine Phillips at Essex' trial for treason, he paid the Lord Chamberlain's Men forty shillings more than the standard rate to stage the play.",
"date": "1595",
"genre": "Histories",
"play": "Richard II"
},
{
"record": "version of the play published in 1597 (this play was never entered into the Stationers' Register)",
"evidence": "",
"published": "version of the play published in quarto in 1597 as An excellent conceited tragedie of Romeo and Juliet",
"performance": "1 March 1662 at Lincoln's Inn Fields, directed by William Davenant.",
"credit": "Hailee Steinfeld, Paul Giamatti",
"media": "http://www.youtube.com/watch?v=jTGWNHa1wIQ",
"date": "1595",
"genre": "Tragedies",
"play": "Romeo and Juliet"
},
{
"record": "Francis Meres' Palladis Tamia (1598); referred to as "Midsummers night dreame"",
"evidence": "",
"published": "in quarto in November or December 1600",
"performance": "",
"date": "1595",
"genre": "Comedies",
"play": "A Midsummer Night's Dream"
},
{
"record": "Francis Meres' Palladis Tamia (1598); referred to as "King Iohn"",
"evidence": "",
"published": "First Folio (1623)",
"performance": "although there are several references to the play having been performed during the seventeenth century, none of them offer any specific details, and the first documented performance was on 26 February 1737 at Covent Garden.",
"date": "1596",
"genre": "Histories",
"play": "The Life and Death of King John"
},
{
"record": "version of the play entered into the Stationers' Register on 22 July 1598",
"evidence": "The play was obviously in existence by 1598, however, other evidence places its date of composition as earlier, probably 1596. Shakespeare's source for the casket subplot is believed to have been Richard Robinson's translation of the Gesta romanorum, which wasn't published until late 1595. In addition, Salarino's reference to "my wealthy Andrew docked in sand" is thought to refer to the San Andréas, a Spanish merchant vessel that ran aground in Essex in June 1596. It is also thought by scholars that the play was written to capitalise on the enormous success of Christopher Marlowe's The Jew of Malta.",
"published": "version of the play published in quarto in 1600 as The most excellent historie of the merchant of Venice. With the extreame crueltie of Shylocke the Jewe towards the sayd merchant, in cutting a just pound of his flesh: and the obtayning of Portia by the choyse of three chests",
"performance": "the play was performed at court for King James on 10 February 1605.",
"date": "1596",
"genre": "Comedies",
"play": "The Merchant of Venice"
},
{
"record": "version of the play entered into the Stationers' Register on 25 February 1598",
"evidence": "",
"published": "version of the play published in quarto in 1598 as The History of Henrie the Fourth, with the battell at Shrewsburie between the King and Lord Henry Percy, surnamed Hotspur of the North, with the humorous conceits of Sir John Falstaffe 1623 Folio text appeared under the title The First Part of Henry the Fourth, with the Life and Death of Henry Sirnamed Hot-spurre",
"performance": "the play was probably performed at court for an Ambassador from Burgundy on 6 March 1600.",
"date": "1596-1597",
"genre": "Histories",
"play": "Henry IV, Part 1"
},
{
"record": "version of the play entered into the Stationers' Register on 18 January 1602",
"evidence": "Textual evidence and certain topical allusions suggest the play was composed as a specially commissioned piece for a Garter Feast (an annual meeting of the Order of the Garter), possibly the Feast on 23 April 1597. It is theorised that Shakespeare interrupted his composition of 2 Henry IV somewhere around Act 3-Act 4, so as to concentrate on writing Merry Wives.",
"published": "version of the play published in quarto in 1602 as A most pleasaunt and excellent conceited comedie, of Sir John Falstaffe, and the merrie wives of Windsor. Entermixed with sundrie variable and pleasing humours, of Sir Hugh the Welch knight, Justice Shallow, and his wise cousin M. Slender. With the swaggering vaine of Auncient Pistoll, and Corporall Nym",
"performance": "4 November 1604 at Whitehall Palace.",
"date": "1597-1598",
"genre": "Comedies",
"play": "The Merry Wives of Windsor"
},
{
"record": "version of the play entered into the Stationers' Register on 23 August 1600",
"evidence": "The play could not have been written any earlier than January 1596, as it contains an allusion to the Sultanate of Mehmed III, who didn't become sultan until that date.",
"published": "version of the play published in quarto in 1600 as The second part of Henrie the fourth, continuing to his death, and coronation of Henrie the fift. With the humours of Sir John Falstaffe, and swaggering Pistoll 1623 Folio text appeared under the title The Second Part of Henry the Fourth, Containing his Death and the Coronation of King Henry the Fift",
"performance": "a play entitled Sir John Falstaffe was performed at Whitehall over the Christmas period of 1612 which is believed to be 2 Henry IV.",
"date": "1596-1597",
"genre": "Histories",
"play": "Henry IV, Part 2"
},
{
"record": "version of the play published in 1600 (this play was never entered into the Stationers' Register)",
"evidence": "The play was not included in Francis Meres' Palladis Tamia, which was registered on 7 September 1598, suggesting it hadn't been performed prior to that date. Furthermore, evidence in the quarto text suggests that Shakespeare originally wrote the role of Dogberry for William Kempe, however, records indicate that Kempe left the Lord Chamberlain's Men sometime in late 1598, so the play must have been written before then. As such, it was most likely composed sometime in the latter half of 1598 and was certainly completed before the new year.",
"published": "Much adoe about Nothing was published in quarto in 1600",
"performance": "14 February 1613, performed at court as part of the festivities to celebrate the marriage of Princess Elizabeth of Bohemia and Frederick V, Elector Palatine",
"date": "1598-1599",
"genre": "Comedies",
"play": "Much Ado About Nothing"
},
{
"record": "version of the play entered into the Stationers' Register on 14 August 1600",
"evidence": "Of all Shakespeare's plays, Henry V is one of the easiest to date. A reference by the Chorus to the Earl of Essex's Irish expedition of 1599 means the play was most likely written sometime between March 1599 (when Essex left for Ireland) and September 1599 (when he returned).",
"published": "version of the play published in quarto in 1600 as The cronicle history of Henry the fift, with his battell fought at Agin Court in France. Togither with Auntient Pistoll. 1623 Folio text appeared under the title The Life of Henry the Fift",
"performance": "7 January 1605 at the Globe Theatre, performed by the Lord Chamberlain's Men.",
"date": "1599",
"genre": "Histories",
"play": "Henry V"
},
{
"record": "Thomas Platter the Younger's Diary, 21 September 1599",
"evidence": "Obviously, the play was completed by September 1599, and may have been composed specifically as the opening play for the new theatre. In addition, because the play is not mentioned in Meres' Palladis Tamia, registered in September 1598, it was unlikely to have been performed prior to then. This places the date of composition as somewhere between September 1598 and September 1599. Additionally, textual analysis has connected the play to Henry V, which was almost certainly written in 1599, suggesting so too was Julius Caesar.",
"published": "First Folio (1623) as The Tragedie of Julius Caesar",
"performance": "21 September 1599 at the newly opened Globe Theatre",
"date": "1599",
"genre": "Tragedies",
"play": "Julius Caesar"
},
{
"record": "on 4 August 1600 a staying order was entered in the Stationers' Register for As yo like yt",
"evidence": "",
"published": "First Folio (1623)",
"performance": "possibly on 2 December 1603 at Wilton House in Wiltshire, where a play was performed for James I; earliest definite performance on 20 December 1740, at Drury Lane.",
"date": "1599-1600",
"genre": "Comedies",
"play": "As You Like It"
},
{
"record": "version of the play entered into the Stationers' Register on 26 July 1602. Folio text appeared under the title The Tragedie of Hamlet, Prince of Denmarke",
"evidence": "Because the versions of Hamlet which appeared in 1603, in 1604 (again in quarto) and in the First Folio of 1623 differ so much from one another, dating the play is exceptionally difficult. There is also the problem of the Ur-Hamlet, a possible source used by Shakespeare, now lost. Others however, feel that Ur-Hamlet (if it ever existed) was most likely an early draft. Hamlet was written sometime between September 1598 (as it was not included in Meres' Palladis Tamia) and July 1602 (when it was registered in the Stationers Register). Furthermore, internal references to Julius Caesar would indicate the play could not have been written any earlier than September 1599. Additionally, in his 1598 copy of an edition of Geoffrey Chaucer's works, Gabriel Harvey has written that Shakespeare's "Lucrece & his tragedie of Hamlet, prince of Denmarke, have it in them, to please the wiser sort'. Harvey also mentions the Earl of Essex as still alive, which would suggest he wrote the note prior to 25 February 1601, when Essex was executed. This would seem to narrow the date of composition to between September 1599 and February 1601; however, not all scholars accept the veracity of Harvey's note. Internal evidence in the play has also been cited, usually as illustrative of a date of composition of 1600 or 1601. As such, many scholars interpret the available evidence as suggestive of a date of initial composition sometime in 1600, with subsequent revisions. This dating, however, is far from universally accepted.",
"published": "version of the play published in quarto in 1603 as The tragicall historie of Hamlet Prince of Denmarke",
"performance": "the entry in the Stationers' Register in July 1602 states that the play was "latelie Acted by the Lo: Chamberleyne his servantes'. The title page of the first quarto states that it had been performed in London, at the two universities of Cambridge and Oxford, "and else-where', presumably on tour in the provinces. The first definite dated performance took place on a ship anchored off the coast of Africa in September 1607, the Red Dragon. The play was performed by the crew.",
"date": "1599-1601",
"genre": "Tragedies",
"play": "Hamlet"
},
{
"record": "John Manningham mentions in his Diary having seen the play performed in February 1602",
"evidence": "",
"published": "First Folio (1623) as Twelfe Night, Or what you will",
"performance": "John Manningham saw the play performed at the Middle Temple on Candlemas 1602, which fell on 2 February.",
"date": "1601",
"genre": "Comedies",
"play": "Twelfth Night"
},
{
"record": "version of the play entered into the Stationers' Register on 7 February 1603",
"evidence": "",
"published": "version of the play published in quarto in 1609 as The historie of Troylus and Cresseida. 1623 Folio text appeared under the title The Tragedie of Troilus and Cressida",
"performance": "an adaptation of the play by John Dryden was staged in 1679.",
"date": "1602",
"genre": "Tragedies",
"play": "Troilus and Cressida"
},
{
"record": "revels accounts for Christmas 1604-1605 state the play was performed over the holidays",
"evidence": "This play is notoriously difficult to date specifically partly due to a lack of solid evidence and partly due to the theory that the text which appeared in the First Folio was not Shakespeare's original text. Obviously the play was written (in some form) prior to December 1604. The only other evidence are possible topical references within the play itself which would seem to indicate a date most likely in 1602, but this is not universally accepted by all scholars. Furthermore, there is a theory that Thomas Middleton rewrote the play after Shakespeare's death, possibly in 1621, which throws further doubt on the exact date of initial composition.",
"published": "First Folio (1623)",
"performance": "Revels accounts for Christmas 1604-1605 indicate the play was performed at Whitehall on St. Stephen's Day 1604.",
"date": "1603-1604",
"genre": "Comedies",
"play": "Measure for Measure"
},
{
"record": "revels accounts refer to the play having been performed in November 1604",
"evidence": "",
"published": "version of the play published in quarto in 1622 as The Tragedy of Othello, the Moore of Venice",
"performance": "revels accounts indicate the play was performed at Whitehall on 1 November 1604.",
"date": "1603-1604",
"genre": "Tragedies",
"play": "Othello"
},
{
"record": "version of the play entered into the Stationers' Register on 26 November 1607 as A booke called. Mr William Shakespeare his historye of Kinge Lear",
"evidence": "the play must have been written by late 1606. Additionally, scholars generally agree that the play is indebted to Samuel Harsnett's Declaration of Egregious Popish Impostures (entered into the Stationers' Register on 16 March 1603) and John Florio's 1603 translation of Montaigne's Essays., placing the date of composition as somewhere between March 1603 and December 1606. A further possible source for the play has evoked some disagreement however. Whilst many scholars feel that Shakespeare used the anonymous play The True Chronicle History of King Leir (entered into the Stationers' Register on 8 May 1605), and hence must have been written between May 1605 and December 1606, others argue that the relationship between the two plays has been inverted, and The True Chronicle History of King Leir was actually written to capitalise on the success of Shakespeare's play, which was probably written in 1603 or 1604. No real critical consensus has been reached regarding this disagreement.",
"published": "version of the play published in quarto in 1608 as The true chronicle historie of the life and death of King Lear and his three daughters. With the unfortunate life of Edgar, sonne and heire to the Earle of Gloster, and his sullen and assumed humor of Tom of Bedlam",
"performance": "according to the Stationers' Register, the play was performed at Whitehall on 26 December 1606",
"date": "1605-1606",
"genre": "Tragedies",
"play": "King Lear"
},
{
"record": "entered into the Stationers' Register on 8 May 1623",
"evidence": "This play is another which is extremely difficult to date precisely, not the least cause of which is the claim that Shakespeare may only have written part of it, with the play being subsequently revised by Thomas Middleton. There is no reference to the play whatsoever prior to 1623, and as such, evidence for its date of composition must come from within the play itself. Taylor concludes that Middleton and Shakespeare were jointly responsible for the play and assigns the composition date to 1605 on the basis of previous analyses of colloquialism-in-verse and rare vocabulary.",
"published": "First Folio (1623) as The Life of Timon of Athens",
"performance": "in 1674, Thomas Shadwell wrote an adaptation of the play under the title Timon of Athens: Or, The Man-hater",
"date": "1605-1606",
"genre": "Tragedies",
"play": "Timon of Athens"
},
{
"record": "possibly by Simon Forman, who records seeing the play in April 1611. However, there is considerable debate amongst scholars as to whether Forman's account is genuine",
"evidence": "Scholars place the date of composition as somewhere between 1603 and 1607, but efforts to narrow that date have proved inconclusive. Several possible topical references to the Gunpowder Plot of 1605 have been proposed and debated among scholars, but these references have not been universally accepted. In 1790, Edward Malone dated the play to 1606, and the vast majority of critics agree with this date even while acknowledging that little conclusive evidence exists, though the date seems correct in the context of Shakespeare's other work of the period. One suggested allusion supporting a date in late 1606 is the first witch's dialogue about a sailor's wife: "'Aroint thee, witch!" the rump-fed ronyon cries./Her husband's to Aleppo gone, master o' the Tiger" (1.6-7). This has been thought to allude to the Tiger, a ship that returned to England 27 June 1606 after a disastrous voyage in which many of the crew were killed by pirates. A few lines later the witch speaks of the sailor, "He shall live a man forbid:/Weary se'nnights nine times nine" (1.21-2). The real ship was at sea 567 days, the product of 7x9x9, which has been taken as a confirmation of the allusion, which if correct, confirms that the play could not have been written any earlier than July 1606. A. R. Braunmuller, however, in the New Cambridge edition, finds the 1605-6 arguments inconclusive, and argues only for an earliest date of 1603. Further complicating the dating of Macbeth is the fact that the play shows evidence of later revisions by Middleton, particularly in the witch scenes.",
"published": "First Folio (1623) as The Tragedie of Macbeth",
"performance": "possibly in April 1611, recorded by Simon Forman",
"date": "1606",
"genre": "Tragedies",
"play": "Macbeth"
},
{
"record": "entered into the Stationers' Register on 20 May 1608",
"evidence": "",
"published": "First Folio (1623) as The Tragedie of Antony and Cleopatra",
"performance": "according to the 1669 records for the Lord Chamberlain's Men, the play had recently been performed at Blackfriars, but no further information is given; earliest definite performance in 1759 when it was staged by David Garrick.",
"date": "1606",
"genre": "Tragedies",
"play": "Antony and Cleopatra"
},
{
"record": "First Folio (1623)",
"evidence": "",
"published": "First Folio (1623)",
"performance": "1741 at Goodman's Fields Theatre, directed by Henry Giffard.",
"date": "1606-1607",
"genre": "Comedies",
"play": "All's Well That Ends Well"
},
{
"record": "version of the play entered into the Stationers' Register on 20 May 1608",
"evidence": "Because the play was not included in the First Folio, there has always been doubt as to whether or not Shakespeare actually wrote it at all. It first appears together with Shakespeare's other plays in the second issue of the Third Folio of 1664. In a contested field, the most widely accepted theory today is that Shakespeare collaborated on the play with another playwright, probably his younger colleague, George Wilkins. There is no complete agreement what the motives or mechanism of this collaboration were. In 1608, Wilkins published a prose narrative of Pericles purporting to be a narrative version of the play and which contains numerous phrases that seem to recall specific lines in the play, suggesting that work on the play preceded his composition of the prose version. Textual analysis of the play has suggested it be placed as in some close relation with All's Well That Ends Well and Coriolanus, which would confirm a date of 1607-1608.",
"published": "version of the play published in quarto in 1609 as The Late and much admired Play Called Pericles, Prince of Tyre, with the true Relation of the whole History, adventures, and fortunes of the sayd Prince: As also, the no lesse strange, and worthy accidents, in the Birth and Life, of his Daughter Mariana",
"performance": "April 1607, seen by the Venetian ambassador to England, Zorzi Giustinian.",
"date": "1607",
"genre": "Comedies",
"play": "Pericles, Prince of Tyre"
},
{
"record": "entered into the Stationers' Register on 8 November 1623",
"evidence": "Stylistic tests place the composition of the play after Lear, Macbeth, and Antony and Cleopatra, and the form of the verse and imagery fit well with Timon, Antony, and Pericles. Shakespeare's treatment of the grain riots is strikingly reminiscent of the Midlands corn riots of 1607. Though Menenius' fable of the belly was used in other contemporary works, the wording of Menenius's speech about the body politic is derived from William Camden's Remaines (1605). Two possible echoes of George Chapman's Iliad (registered 14 November 1608) support a date of 1608-9. A reference to "the coal of fire upon ice" (1.1.170) is a possible allusion to the winter of 1607-08, when the frost was so severe that vendors set up booths on the frozen Thames river and pans of coals were placed on the ice so that pedestrians could warm themselves. An allusion to the complaints about Hugh Myddelton's project to bring water to London has also been detected in Martius' warning to the patricians (3.1.98-9). Taylor says that the cumulative internal evidence all points to a composition date of no earlier than spring of 1608, while others favour late 1608 to early 1609. Several allusions in other works establish a terminal date of composition: Ben Jonson's Epicœne, or The silent woman, composed in late 1609, mocks a peculiar phrase in the play, and Phantasma (registered 6 February 1609), written by Robert Armin, a member of the King's Men from 1599 to 1610, contains a close literary parallel. Critics also suggest that the regular act intervals indicate that it could have been written for the indoor Blackfriars Theatre, which Shakespeare's company acquired in 1608.",
"published": "First Folio (1623) as The Tragedy of Coriolanus",
"performance": "an adaptation of the play by Nahum Tate was performed at Drury Lane in 1681, under the title The Ingratitude of a Common-Wealth",
"date": "1608",
"genre": "Tragedies",
"play": "Coriolanus"
},
{
"record": "Simon Forman saw the play at the Globe on 15 May 1611; it was performed at Court 11 November 1611",
"evidence": "The dance of twelve satyrs is similar to the dance of satyrs in Ben Jonson's masque Oberon performed at Court on 1 January 1611, but Taylor believes it is a later interpolation. It shares some of the same source material as Cymbeline, and stylistically it is in Shakespeare's late period. Most critics agree that it should be paired with Cymbeline.",
"published": "First Folio (1623)",
"performance": "",
"date": "1609-1610",
"genre": "Comedies",
"play": "The Winter's Tale"
},
{
"record": "Simon Forman saw it performed at the Globe in 1611",
"evidence": "",
"published": "First Folio (1623) as The Tragedie of Cymbeline",
"performance": "In an undated entry, Simon Forman saw the play performed at the Globe in 1611",
"date": "1610-1611",
"genre": "Comedies",
"play": "Cymbeline"
},
{
"record": "revels accounts refer to the play having been performed in November 1611",
"evidence": "",
"published": "First Folio (1623)",
"performance": "1 November 1611, at Whitehall for James I, performed by the King's Men.",
"date": "1610-1611",
"genre": "Comedies",
"play": "The Tempest"
},
{
"record": "entered into the Stationers' Register in 1653, attributed to William Shakespeare and John Fletcher",
"evidence": "A lost play, published only in an adaptation by Lewis Theobald entitled Double Falshood (1728).",
"published": "an adaptation was published in 1727 by Lewis Theobald entitled Double Falshood; or, the Distrest Lovers",
"performance": "1613, performed at the Globe by the King's Company",
"date": "1612-1613",
"genre": "",
"play": "Cardenio"
},
{
"record": "",
"evidence": "Probably written in collaboration with John Fletcher",
"published": "First Folio (1623) as The Famous History of the Life of King Henry the Eight",
"performance": "29 June 1613, the night the Globe burnt down.",
"date": "1613",
"genre": "Histories",
"play": "Henry VIII, or All is True"
},
{
"record": "entered into the Stationer' Register on 8 April 1634",
"evidence": "Not included in the First Folio; written in collaboration with John Fletcher.",
"published": "published in quarto in 1634",
"performance": "",
"date": "1613",
"genre": "Comedies",
"play": "The Two Noble Kinsmen"
}
];
timelineData = {
headline: "Chronology of Shakespeare's Plays",
type: "default",
date: []
};
plays.forEach(function(play) {
var start = play.date;
var end = "";
if (play.date.indexOf("-") !== -1) {
var dates = play.date.split("-");
start = dates[0];
end = dates[1];
}
timelineData.date.push({
startDate: start,
endDate: end,
headline: play.play,
text: play.evidence,
tag: play.genre,
asset: {
media: play.media,
credit: play.credit,
caption: play.caption
}
});
});
timelineConfig = {
type: 'timeline',
'100%',
height: '600',
source: {timeline: timelineData},
embed_id: 'timeline'
};
timelinejs = new VMM.Timeline('timeline','100%','600px');
timelinejs.init(timelineConfig);
}
</script>
</body>
</html>
第六章地理位置信息的可视化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Geography as a Competitive Advantage</title>
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/leaflet.css" rel="stylesheet" type="text/css">
<style>
body {
background-color: rgb(243, 243, 243);
}
.leaflet-label {
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-ms-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
.leaflet-top .leaflet-control-title,
.leaflet-left .leaflet-control-title {
margin: 0;
padding-left: 10px;
padding-top: 0;
450px;
background-color: white;
background-color: rgba(255,255,255,0.8);
border-right: 1px solid #CECDD2;
border-bottom: 1px solid #CECDD2;
}
.leaflet-control-title h1 {
font-size: 22px;
margin: 0;
}
.leaflet-control-title p {
padding-right: 15px;
-webkit-hyphens: auto;
hyphens: auto;
}
.seaboard {color: #88020B;}
.southern {color: #106634;}
.seaboard, .southern {
position: relative;
top: 1px;
}
#map {
840px;
height: 660px;
margin: 40px auto;
border: 1px solid #CECDD2;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="js/leaflet.js"></script>
<script>
window.onload = function() {
/*------------*/
/** Data Set **/
/*------------*/
/* From http://www.streamlinerschedules.com/concourse/track1/silvercomet194706.html */
var seaboard = [
{ "stop": "Washington", "latitude": 38.895111, "longitude": -77.036667, "duration": 77, "offset": [-30,-10] },
{ "stop": "Fredericksburg", "latitude": 38.301806, "longitude": -77.470833, "duration": 89, "offset": [ 6, 4] },
{ "stop": "Richmond", "latitude": 37.533333, "longitude": -77.466667, "duration": 29, "offset": [ 6, 4] },
{ "stop": "Petersburg", "latitude": 37.21295, "longitude": -77.400417, "duration": 93, "offset": [ 6, 4] },
{ "stop": "Henderson", "latitude": 36.324722, "longitude": -78.408611, "duration": 44, "offset": [ 6, 4] },
{ "stop": "Raleigh", "latitude": 35.818889, "longitude": -78.644722, "duration": 116, "offset": [ 6, 4] },
{ "stop": "Hamlet", "latitude": 34.888056, "longitude": -79.706111, "duration": 74, "offset": [ 6, 6] },
{ "stop": "Monroe", "latitude": 34.988889, "longitude": -80.549722, "duration": 58, "offset": [ 6, -8] },
{ "stop": "Chester", "latitude": 34.705556, "longitude": -81.211667, "duration": 54, "offset": [ 6, 6] },
{ "stop": "Clinton", "latitude": 34.471389, "longitude": -81.875, "duration": 34, "offset": [ 6, 6] },
{ "stop": "Greenwood", "latitude": 34.189722, "longitude": -82.154722, "duration": 22, "offset": [ 10, -2] },
{ "stop": "Abbeville", "latitude": 34.178611, "longitude": -82.379167, "duration": 39, "offset": [ 4, 10] },
{ "stop": "Elberton", "latitude": 34.109722, "longitude": -82.865556, "duration": 41, "offset": [ 6, 10] },
{ "stop": "Athens", "latitude": 33.95, "longitude": -83.383333, "duration": 75, "offset": [ 6, 6] },
{ "stop": "Emory", "latitude": 33.791111, "longitude": -84.323333, "duration": 25, "offset": [ 10, 4] },
{ "stop": "Atlanta", "latitude": 33.755, "longitude": -84.39, "duration": 0, "offset": [-21, 10] }
];
/* From http://www.streamlinerschedules.com/concourse/track1/southerner194112.html */
var southern = [
{ "stop": "Washington", "latitude": 38.895111, "longitude": -77.036667, "duration": 14, "offset": [-30,-10] },
{ "stop": "Alexandria", "latitude": 38.804722, "longitude": -77.047222, "duration": 116, "offset": [ 4, 4] },
{ "stop": "Charlottesville", "latitude": 38.0299, "longitude": -78.479, "duration": 77, "offset": [-85, 0] },
{ "stop": "Lynchburg", "latitude": 37.403672, "longitude": -79.170205, "duration": 71, "offset": [-62, 0] },
{ "stop": "Danville", "latitude": 36.587238, "longitude": -79.404404, "duration": 64, "offset": [-48, -1] },
{ "stop": "Greensboro", "latitude": 36.08, "longitude": -79.819444, "duration": 18, "offset": [-69, -4] },
{ "stop": "High Point", "latitude": 35.970556, "longitude": -79.9975, "duration": 47, "offset": [ 5, 7] },
{ "stop": "Salisbury", "latitude": 35.668333, "longitude": -80.478611, "duration": 50, "offset": [-57, 0] },
{ "stop": "Charlotte", "latitude": 35.226944, "longitude": -80.843333, "duration": 25, "offset": [ 8, 0] },
{ "stop": "Gastonia", "latitude": 35.255278, "longitude": -81.180278, "duration": 63, "offset": [-26,-10] },
{ "stop": "Spartanburg", "latitude": 34.946667, "longitude": -81.9275, "duration": 43, "offset": [-80, -7] },
{ "stop": "Greenville", "latitude": 34.844444, "longitude": -82.385556, "duration": 187, "offset": [-70, 2] },
{ "stop": "Atlanta", "latitude": 33.755, "longitude": -84.39, "duration": 0, "offset": [-21, 10] }
];
/*----------------------*/
/** Leaflet Extensions **/
/*----------------------*/
L.Control.Animate = L.Control.extend({
options: {
position: 'bottomleft',
animateStartText: '▶︎',
animateStartTitle: 'Start animation',
animatePauseText: '◼︎',
animatePauseTitle: 'Pause animation',
animateResumeText: '▶︎',
animateResumeTitle: 'Resume animation',
animateStartFn: null,
animateStopFn: null
},
onAdd: function () {
var animateName = 'leaflet-control-animate',
container = L.DomUtil.create('div', animateName + ' leaflet-bar'),
options = this.options;
this._button = this._createButton(options.animateStartText, options.animateStartTitle,
animateName, container, this._clicked);
return container;
},
_createButton: function (html, title, className, container, fn) {
var link = L.DomUtil.create('a', className, container);
link.innerHTML = html;
link.href = '#';
link.title = title;
L.DomEvent
.on(link, 'mousedown dblclick', L.DomEvent.stopPropagation)
.on(link, 'click', L.DomEvent.stop)
.on(link, 'click', fn, this);
return link;
},
_running: false,
_clicked: function() {
if (this._running) {
this._button.innerHTML = this.options.animateResumeText;
this._button.title = this.options.animateResumeTitle;
if (this.options.animateStopFn) {
this.options.animateStopFn();
}
} else {
this._button.innerHTML = this.options.animatePauseText;
this._button.title = this.options.animatePauseTitle;
if (this.options.animateStartFn) {
this.options.animateStartFn();
}
}
this._running = !this._running;
},
reset: function() {
this._running = false;
this._button.innerHTML = this.options.animateStartText;
this._button.title = this.options.animateStartTitle;
}
});
L.control.animate = function(options) {
return new L.Control.Animate(options);
};
L.Label = L.Class.extend({
initialize: function(latLng, label, options) {
this._latlng = latLng;
this._label = label;
L.Util.setOptions(this, options);
this._status = "hidden";
},
options: {
offset: new L.Point(0, 0)
},
onAdd: function(map) {
this._container = L.DomUtil.create('div', 'leaflet-label');
this._container.style.lineHeight = "0";
this._container.style.opacity = "0";
map.getPanes().markerPane.appendChild(this._container);
this._container.innerHTML = this._label;
var pos = map.latLngToLayerPoint(this._latlng);
var op = new L.Point(pos.x + this.options.offset.x, pos.y + this.options.offset.y);
L.DomUtil.setPosition(this._container, op);
},
getStatus: function() {
return this._status;
},
setStatus: function(status) {
switch (status) {
case "hidden":
this._status = "hidden";
this._container.style.opacity = "0";
break;
case "shown":
this._status = "shown";
this._container.style.opacity = "1";
break;
case "dimmed":
this._status = "dimmed";
this._container.style.opacity = "0.5";
break;
}
}
});
L.Control.Title = L.Control.extend({
options: {
position: "topleft"
},
initialize: function (title, options) {
L.setOptions(this, options);
this._title = title;
},
onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-control-title');
container.innerHTML = this._title;
return container;
}
});
L.control.title = function(title, options) {
return new L.Control.Title(title, options);
};
/*----------------*/
/** Map Creation **/
/*----------------*/
var map = L.map('map',{
center: [36.3, -80.6],
maxBounds: [ [33.32134852669881, -85.20996093749999], [39.16414104768742, -75.9814453125] ],
zoom: 7,
minZoom: 7,
maxZoom: 7,
dragging: false,
zoomControl: false,
touchZoom: false,
scrollWheelZoom: false,
doubleClickZoom: false,
boxZoom: false,
keyboard: false
});
L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ',
maxZoom: 16
}).addTo(map);
L.polyline(
seaboard.map(function(stop) {return [stop.latitude, stop.longitude]}),
{clickable: false, color: "#88020B", weight: 1}
).addTo(map);
L.polyline(
southern.map(function(stop) {return [stop.latitude, stop.longitude]}),
{clickable: false, color: "#106634", weight: 1}
).addTo(map);
L.control.title(
"<h1>Geography as a Competitive Advantage</h1>" +
"<p>In the 1940s, the route of Southern Railways’ <i>Southerner</i> " +
"(<span class='southern'>━━━</span>) " +
"was shorter than the rival " +
"<i>Silver Comet</i> of the Seaboard Air Line " +
"(<span class='seaboard'>━━━</span>)." +
"Passengers traveling on the <i>Southerner</i> " +
"could expect to arrive more than 90 minutes sooner " +
"than those on the <i>Silver Comet</i>.</p>" +
"<p>Click the play button below to trace the journeys " +
"of both trains between Washington, DC and Atlanta, GA.</p>"
).addTo(map);
var start = seaboard[0];
var label = new L.Label(
[start.latitude,start.longitude],
start.stop,
{offset: new L.Point(start.offset[0], start.offset[1])}
);
map.addLayer(label);
label.setStatus("shown");
var finish = seaboard[seaboard.length-1];
label = new L.Label(
[finish.latitude,finish.longitude],
finish.stop,
{offset: new L.Point(finish.offset[0], finish.offset[1])}
);
map.addLayer(label);
label.setStatus("shown");
/*-------------------*/
/** Animation Setup **/
/*-------------------*/
var buildPathAnimation = function(route, options) {
var animation = [];
for (var stopIdx=0, prevStops=[]; stopIdx < route.length-1; stopIdx++) {
var stop = route[stopIdx];
var nextStop = route[stopIdx+1]
prevStops.push([stop.latitude, stop.longitude]);
for (var minutes = 1; minutes <= stop.duration; minutes++) {
var position = [
stop.latitude + (nextStop.latitude - stop.latitude) * (minutes/stop.duration),
stop.longitude + (nextStop.longitude - stop.longitude) * (minutes/stop.duration)
];
animation.push(L.polyline(prevStops.concat([position]),options));
}
}
return animation;
}
var buildLabelAnimation = function() {
var args = Array.prototype.slice.call(arguments),
labels = [];
args.forEach(function(route) {
var minutes = 0;
route.forEach(function(stop,idx) {
if (idx !== 0 && idx < route.length-1) {
var label = new L.Label(
[stop.latitude,stop.longitude],
stop.stop,
{offset: new L.Point(stop.offset[0], stop.offset[1])}
);
map.addLayer(label);
labels.push({minutes: minutes, label: label, status: "shown"});
labels.push({minutes: minutes+50, label: label, status: "dimmed"});
}
minutes += stop.duration;
});
});
labels.sort(function(a,b) {return a.minutes - b.minutes;})
return labels;
}
var labels = buildLabelAnimation(seaboard, southern);
var labelAnimation = labels.slice(0);
var routeAnimations = [
buildPathAnimation(seaboard, {clickable: false, color: "#88020B", weight: 8, opacity: 1.0}),
buildPathAnimation(southern, {clickable: false, color: "#106634", weight: 8, opacity: 1.0})
];
var maxPathSteps = Math.min.apply(null,routeAnimations.map(function(animation) {return animation.length}));
var maxLabelSteps = labels[labels.length-1].minutes;
var maxSteps = Math.max(maxPathSteps, maxLabelSteps);
var step = 0;
var animateStep = function() {
if (step > 0 && step < maxPathSteps) {
routeAnimations.forEach(function(animation) {
map.removeLayer(animation[step-1]);
});
}
if (step === maxSteps) {
routeAnimations.forEach(function(animation) {
map.removeLayer(animation[maxPathSteps-1]);
});
step = 0;
labelAnimation = labels.slice(0);
labelAnimation.forEach(function(label) {
label.label.setStatus("hidden");
});
}
while (labelAnimation.length && step === labelAnimation[0].minutes) {
var label = labelAnimation[0].label;
if (label.getStatus() === "shown" || step < maxPathSteps) {
label.setStatus(labelAnimation[0].status);
}
labelAnimation.shift();
}
if (step < maxPathSteps) {
routeAnimations.forEach(function(animation) {
map.addLayer(animation[step]);
});
}
return ++step === maxSteps;
}
var interval = null;
var animate = function() {
interval = window.setInterval(function() {
if (animateStep()) {
window.clearInterval(interval);
control.reset();
}
}, 30);
}
var pause = function() {
window.clearInterval(interval);
}
var control = L.control.animate({
animateStartFn: animate,
animateStopFn: pause
});
control.addTo(map);
}
</script>
</body>
</html>