
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="description" content="Milestones in the History of Thematic Cartography, Statistical Graphics, and Data Visualization" />
		<meta name="keywords" content="Milestones Project, Thematic Cartography, Cartography, Statistical Graphics, Data Visualization, Information visualization, History of Thematic Cartography, History of Statistical Graphics, History of Data Visualization" />
		<title>Milestones in the History of Thematic Cartography, Statistical Graphics, and Data Visualization</title>
		<link rel="icon" href="//www.datavis.ca/favicon.ico" type="image/x-icon">
		<link rel="shortcut icon" href="//www.datavis.ca/favicon.ico" type="image/x-icon">
		<link rel="alternate" type="application/rss+xml" href="feed.rss" title="RSS feed" />
		<link href="//code.jquery.com/ui/1.12.1/themes/redmond/jquery-ui.css" rel="stylesheet" />
		<link href="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.6/jquery.fancybox.min.css" rel="stylesheet" />
		<link href="styles/main.css" rel="stylesheet" />
		<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
		<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.6/jquery.fancybox.min.js"></script>

		
		<link rel="alternate" type="application/rdf+xml" href="scripts/timeline/doap.rdf" />
		<link href="styles/timeline.css" rel="stylesheet" />
		<script src="scripts/timeline.js"></script>
		<script src="scripts/timeline/api/timeline-api.js"></script>
		<script src="scripts/timeline/api/timeline-bundle.js"></script>
		

		

		
	</head>
	<body onresize="onResize();">
		<div id="container">
			<div name="topfixed" id="topfixed"></div>

<!-- START MASTHEAD -->
<div id="masthead"></div>
<!-- END MASTHEAD -->
<!-- START SEARCH -->
<div class="search">
	<form name="form1" id="form1" method="get" action="index.php" autocomplete="off">
		<input name="query" type="text" class="search" />
		<input type="button" class="btn" value="Search" onclick="form1.submit();" />
		<a href="index.php?page=search+help"><img src="images/icons/help.gif" width="16" height="16" alt="help" /></a>
	</form>
</div>
<!-- START NAV -->
<div id="nav">
	<ul>
		<li class="home">
			<a href="index.php?page=home">
				<img src="images/icons/home.gif" border="0" alt="home" />
			</a>
		</li>
		
		<li>
			<a href="index.php?page=introduction" class="normal">introduction</a>
		</li>
		
		<li>
			<a href="index.php?page=milestones+project" class="normal">milestones project</a>
		</li>
		
		<li>
			<a href="index.php?page=varieties+of+data+visualization" class="normal">varieties of data visualization</a>
		</li>
		
		<li>
			<a href="index.php?page=related" class="normal">related</a>
		</li>
		
		<li>
			<a href="index.php?page=references" class="normal">references</a>
		</li>
		
		<li>
			<a href="index.php?page=keyword+index" class="normal">keyword index</a>
		</li>
		
	</ul>
</div>
<div id="groups">
	<ul>
		
		<li>
			<a href="index.php?group=pre-1600" class="normal">Pre-1600</a>
		</li>
		
		<li>
			<a href="index.php?group=1600s" class="normal">1600s</a>
		</li>
		
		<li>
			<a href="index.php?group=1700s" class="normal">1700s</a>
		</li>
		
		<li>
			<a href="index.php?group=1800%2B" class="normal">1800+</a>
		</li>
		
		<li>
			<a href="index.php?group=1850%2B" class="normal">1850+</a>
		</li>
		
		<li>
			<a href="index.php?group=1900%2B" class="normal">1900+</a>
		</li>
		
		<li>
			<a href="index.php?group=1950%2B" class="normal">1950+</a>
		</li>
		
		<li>
			<a href="index.php?group=1975%2B" class="normal">1975+</a>
		</li>
		
	</ul>
</div>
<!-- END NAV -->
<!--START 'TIMELINE' CONTENT-->

<div id="contentWrap">
	<div id="content">
		
		<h1>Timeline</h1>
		<p style="margin:0px 0px 20px;padding:0px;font-family:Verdana, Tahoma, sans-serif;font-size:12px;line-height:20.3999996185303px;">This page provides a graphic overview of the events in the history of data visualization that we call "<strong style="margin:0px;padding:0px;">milestones</strong>." These milestones are shown below in the the form of <em style="margin:0px;padding:0px;">an interactive timeline</em>. The timeline is divided into <em style="margin:0px;padding:0px;">two vertical sections</em>. You can <em style="margin:0px;padding:0px;">drag each section left or right</em> to see milestones of different time periods. You can also click one of the links at the bottom of the timeline to jump to a particular epoch.</p>
<p style="margin:0px 0px 20px;padding:0px;font-family:Verdana, Tahoma, sans-serif;font-size:12px;line-height:20.3999996185303px;">Each of the milestone's in the timeline can be clicked to reveal its summary that includes both a link to its full details and a category to which it belongs. The category can also be clicked to initiate a search of other milestone's based on that category.</p>
		
	</div>
	<div id="category-list">
		<ul>
			<li><strong>Item categories:</strong></li>
			<li><img src="xml/icons/red-circle.png" width="16" height="16"/>Cartography</li>
			<li><img src="xml/icons/blue-circle.png" width="16" height="16"/>Statistics and graphics</li>
			<li><img src="xml/icons/green-circle.png" width="16" height="16"/>Technology</li>
			<li><img src="xml/icons/gray-circle.png" width="16" height="16"/>Other</li>
		</ul>
	</div>
	<div id="tl" class="timeline-default" style="height: 400px; margin: 2em; ">
		<!--timeline shows here-->
	</div>
	<div id="timeline-list">
		<!-- START 'TIMELINE' GROUP LINKS -->
		<ul>
			
			<li><a href="javascript:centerTimeline(-1600);">Pre-1600</a></li>
			
			<li><a href="javascript:centerTimeline(1600);">1600s</a></li>
			
			<li><a href="javascript:centerTimeline(1700);">1700s</a></li>
			
			<li><a href="javascript:centerTimeline(1800);">1800+</a></li>
			
			<li><a href="javascript:centerTimeline(1850);">1850+</a></li>
			
			<li><a href="javascript:centerTimeline(1900);">1900+</a></li>
			
			<li><a href="javascript:centerTimeline(1950);">1950+</a></li>
			
			<li><a href="javascript:centerTimeline(1975);">1975+</a></li>
			
		</ul>
		<!-- END 'TIMELINE' GROUP LINKS -->
	</div>
</div>
<!--END 'TIMELINE' CONTENT-->

</div>
<!--END CONTAINER -->

<div id="footer-container">
	<div id="footer-inner">
		<p>This web version is dedicated to Arthur H. Robinson (1915-2004), who inspired and encouraged our interest; to Antoine de Falguerolles, who initiated it, and to les Chevaliers des Album de Statistique Graphique, who supported it with interest, enthusiasm, and resources. In particular, Gilles Palsky, Antoine de Falguerolles, Antony Unwin and Ruddy Ostermann contributed important images and background information. This work is supported by the National Sciences and Engineering Research Council of Canada, Grant OGP0138748.</p>
		<p><strong>Citations</strong>: References to information or images obtained from this web site should be cited as follows:
			<br>
			Friendly, M. & Denis, D. J. (2001).
			<em>Milestones in the history of thematic cartography, statistical graphics, and data visualization.</em>
			Web document, <tt>http://www.datavis.ca/milestones/</tt>. Accessed:
			<script>
				<!--
				// Array of month Names
				var monthNames = new Array(
				"January","February","March","April","May","June","July",
				"August","September","October","November","December");

				var now = new Date();
				document.write(monthNames[now.getMonth()] + " " +
				now.getDate() + ", " + now.getFullYear());
				// -->
			</script>
		</p>
		<p><strong>Copyright &copy; 2001-2018 Michael Friendly</strong><br/><a href="feed.rss">RSS</a>&nbsp;<img src="images/icons/feed-icon.png" border="0" width="14" height="14" /></p>
	</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-37752542-9"></script>
<script>
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}
	gtag('js', new Date());
	gtag('config', 'UA-37752542-9');
</script>
</body>
</html>

