index.html

<!DOCTYPE html>
<html>
<head>
<title>Turkey Trot Map Demonstration</title>
</head>
<body>

<i>Last updated: February 3, 2026<br>
	Author: Profesor Christopher J. Seeger<br>
	Copyright 2026, free to share and reuse with attribution
</i>

	
	<br><hr>
<h1>Background</h1>
<p>This repository demonstrates a method to share both static maps and data as well as Tableau Public dashboards. 
  Note this page only uses basic HTML, no CSS. A good tutorial for writing HTML can be found at <a href="https://www.w3schools.com/html/default.asp" target="_blank">https://www.w3schools.com/html/default.asp</a>
	<br><br>
	
	A more advanced approach using JavaScript and the loading of dynamic data 
  from Google Sheets or CSV files will be added later as an additional page. The webpage is organized by section headings, please scroll down to find the various examples.</p>

  <p>This data for this project started as three GPX files that were created from data recorded over three 
    Turkey Trot Runs in Lincoln, Nebraska 2016 - 2018. Each of the GPX files included a timestamp, 
    latitude, longitude and elevation value as recorded by the GPS device. <br>
    
     <img src="images/gpx_format.png" width="400px" alt="GPX Data format example"><br>
    
     <p>These three data files were loaded into 
    ChatGPT and the elevation gained and the speed in MPH was calculated between the points. The data was then combined into one GEOJSON file and downloaded from ChatGPT. A sample of the geojson file looks as follows:</p>


<pre>
  <code>
   {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -96.700561,
          40.741621
        ]
      },
      "properties": {
        "ID": 1,
        "timestamp": "2016-11-24T14:33:12+00:00",
        "elevation_m": 381.8,
        "elevation_gain_ft": 0.0,
        "speed_mph": null
      }
    }
  </code>
</pre>


<p>The GeoJSON file was then loaded into Tableau Public for use in a Dashboard. Additionally, screenshots of bar, 
  line and tables graphics were captured from Tableau to provide examples, however it should be noted that these graphics 
  could just as easily been created using other data analysis tools such as R, Excel or MATLAB.</p>

	<p>Creating a GitHub Webpage is farily straight forward and only takes a few minutes. 	</p>
		<ol>
			<li>Create a new GitHub Repository and give it short but meaningful name</li>
			<li>Provide a descrioption of the Repository  - you can edit this more later.</li>
			<li>Confirm visiibility is set to Public</li>
			<li>Enable the 'Add README'</li>
			<li>Leave the Add .gitignore and Add license as the default</li>
			<li>Press "Create repository"</li>
			<li>The repository will be created and will display the contents of the README which you can edit.</li>
			<li>Next you need to enable GitHub Pages. Select the menu near the top right of the screen</li>
			<li>In the settings look on the left menu for "Pages" and click it.</li>
			<li>In the GitHub Pages config leave Deploy from Branch selected</li>
			<li>Change the Branch from None to Main. This will then allow you to select /root or /docs.  <br>
			If you select /root then your website will live in the root of the GitHub - for a basic site this is OK, but best practice would bee to have the files living in a directory named docs /</li>
			<li>Press Save (Note in this example I used /Docs</li>
			<li>You can optionally create a custome domain, read instructions if this is of interest, but for now just return to the main repository by clicking the name of the repo in the top left of screen.</li>
			<li>Since /docs was set to the location of the web pages, you need to create that directory and a file in it to use as the main page. <br>
			Create a new file and name it docs/ this will make the directory and a new name box will appear for you to write index.html</li>
			<li>a basic HTMl code block is below and can be copied and pasted into the editor. Maybe change the title and add a hello your name to the body of the page.</li>
			<li>Commit the page</li>
			<li>GitHup will process and start to build the page. This can take a few minutes to complete, You can check the status by clicking the Actions menu item</li>
			<li>To access the URL that the page is located at, go back to the main repository page, in the upper right it wiss say "About" with a gear icon. Click the gear. 
				Where it asks for a Website address, check "Use your GitHub Pages website" and save changes</li>
			<li>The about will now show the link to your page. If the action to create your page has completed you will be able to click the link and see your site.</li>
			<li>Continue to edit your index.html page, add other pages, data, or images. Be careful of case in file names, and put images and such in appropriate directories to avoid creation of an unorganized file structure.</li>
		</ol>
		
<pre>
	<code>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
		</code>
</pre>
				

	<br><hr>
  <h3>Overview map of site</h3>
  A screenshot of the Lincoln Memorial Cemetery.<br>
  <img src="images/map.png" width="500px" alt="Overview map of site">

	
	<br><hr>
  <h3>Static Graphics</h3>
  Screenshots or downloads from analysis software can be added tot he website as a jpg or png <br>
	The following three images were created in Tableau and then captured as a screenshot and saved as PNG images to GitHub.<br><br>
	
  <img src="images/line.png" width="500px" alt="example line chart"><br>
	This is just HTML text below the line chart and could be used to decribe what the viewer is seeing.<br><br>

	  <img src="images/bar.png" width="500px" alt="example bar chart"><br>
	This is just HTML text below the bar chart and could be used to decribe what the viewer is seeing.<br><br>

	  <img src="images/table.png" width="500px" alt="example table graphic"><br>
	This is just HTML text below the table and could be used to decribe what the viewer is seeing. 
	Note tabular data could also be saved from Excel in HTML format and added to the GitHub html page.<br><br>

	<br><hr>
	  <h3>Dynamic Graphics</h3>
	<p>Graphics and Maps that are generated dynamically can be added to a website using JavaScript. 
	While the JavaScript can be customed developed using libraries such as <a href = "https://leafletjs.com" target = "_blank">Leaflet</a> and <a href = "https://jquery.com" target = "_blank">JQuery</> and other graphinc tools, 
	a comprehensive library such as <a href = "https://www.highcharts.com/demo" target="_blank">HighCharts</a> can also be implemented. The data for these examples can be stored as flat text files on GitHub (CSV, JSON or GeoJSON) or within Google Sheets. 
	A benefit of Google Sheets is the data can be maintained and updated in Google Sheets and they directly linked to from the web page.<br>
	Additional examples on these tools will be added here in the future...</p>


		<br><hr>
    <h3>Tableau</h3>
  Tableau Public Dashboards are stored on a free Tableau Server. These dashboards can be linked to using a link such 
	as <a href = "https://public.tableau.com/app/profile/christopher.seeger/viz/LincolnRun/Dashboard1" target = "_Blank">https://public.tableau.com/app/profile/christopher.seeger/viz/LincolnRun/Dashboard1</a><br>
	This interactive tool allows user to filter the map for the GPS route recorded for all or a selected year. The data can also be filtered by the speed recorded between GPS points. <br>
		While this demo utilize GeoJSON data, the free Tableau Public can also connect directly to a Google Sheet. Tableau Public will auto refresh the data once every 24 hours, but can also be manually refreshed as needed.
		Tableau Public is not able to directly connect to databases such as MySQL, or PostGreSQL -- Did I mention Public is the free version of this software???

  <br><br>
	
  Tableau Dashboards can also be directly embedded into an HTML page and appear as shown below.
 
  <div class='tableauPlaceholder' id='viz1768490888952' style='position: relative'>
	<noscript>
		<a href='#'><img alt='Dashboard 1 ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Li&#47;LincolnRun&#47;Dashboard1&#47;1_rss.png' style='border: none' /></a>
	</noscript>
	<object class='tableauViz' style='display:none;'>
		<param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' />
		<param name='embed_code_version' value='3' />
		<param name='site_root' value='' />
		<param name='name' value='LincolnRun&#47;Dashboard1' />
		<param name='tabs' value='no' />
		<param name='toolbar' value='yes' />
		<param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Li&#47;LincolnRun&#47;Dashboard1&#47;1.png' />
		<param name='animate_transition' value='yes' />
		<param name='display_static_image' value='yes' />
		<param name='display_spinner' value='yes' />
		<param name='display_overlay' value='yes' />
		<param name='display_count' value='yes' />
		<param name='language' value='en-US' />
	</object>
</div>
<script type='text/javascript'>
var divElement = document.getElementById('viz1768490888952');
var vizElement = divElement.getElementsByTagName('object')[0];
if(divElement.offsetWidth > 800) {
	vizElement.style.minWidth = '420px';
	vizElement.style.maxWidth = '650px';
	vizElement.style.width = '100%';
	vizElement.style.minHeight = '587px';
	vizElement.style.maxHeight = '887px';
	vizElement.style.height = (divElement.offsetWidth * 0.75) + 'px';
} else if(divElement.offsetWidth > 500) {
	vizElement.style.minWidth = '420px';
	vizElement.style.maxWidth = '650px';
	vizElement.style.width = '100%';
	vizElement.style.minHeight = '587px';
	vizElement.style.maxHeight = '887px';
	vizElement.style.height = (divElement.offsetWidth * 0.75) + 'px';
} else {
	vizElement.style.width = '100%';
	vizElement.style.height = '1077px';
}
var scriptElement = document.createElement('script');
scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
vizElement.parentNode.insertBefore(scriptElement, vizElement);
</script>
  
</body>
</html>