<commit_before><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>State Loading Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=<KEY>"
      type="text/javascript"></script>
    <script type="text/javascript" src="http://static.simile.mit.edu/timeline/api/timeline-api.js"></script>
    <script src="../timemap.js" type="text/javascript"></script>
    <script src="../param.js" type="text/javascript"></script>
    <script src="../state.js" type="text/javascript"></script>
	<script type="text/javascript">

var tm;
function onLoad() {

    // Setting the state from the URL takes a couple of extra steps, shown below
    // (numbered in the order they're called).
    
    // Step one: Set up the config as a variable
    var config = {
        mapId: "map",               // Id of map div element (required)
        timelineId: "timeline",     // Id of timeline div element (required)
        options: {
            eventIconPath: "../images/"
        },
        datasets: [
            {
                id: "artists",
                title: "Artists",
                theme: "orange",
                // note that the lines below are now the preferred syntax
                type: "basic",
                options: {
                    items: [
                        {
                          "start" : "1449",
                          "end" : "1494-01-11",
                          "point" : {
                              "lat" : 43.7717,
                              "lon" : 11.2536
                           },
                          "title" : "<NAME>",
                          "options" : {
                            // set the full HTML for the info window
                            "infoHtml": "<div class='custominfostyle'><b><NAME></b> was a visual artist of some sort.</div>"
                          }
                        },
                        {
                          "start" : "1475",
                          "end" : "1564",
                          "point" : {
                              "lat" : 43.6433,
                              "lon" : 11.9875
                           },
                          "title" : "Michelangelo",
                          "options" : {
                            // use the default title/description info window
                            "description": "Renaissance Man",
                            "theme": "yellow"
                          }
                        }
                    ]
                }
            }
        ],
        bandIntervals: [
            Timeline.DateTime.DECADE, 
            Timeline.DateTime.CENTURY
        ],
        
        // Step Three (because it's called asynchronously): Call tm.initState() once data is loaded
        dataDisplayedFunction: function(tm) {
            tm.initState();
        }
    };
    
    // Step Two: Set URL state in config object
    TimeMap.state.setConfigFromUrl(config);
    
    // Step Four: Initialize TimeMap object
    tm = TimeMap.init(config);
}
    </script>
	<link href="examples.css" type="text/css" rel="stylesheet"/>
    <style>
    div#timelinecontainer{ height: 300px; }
    div#mapcontainer{ height: 300px; }
    </style>
  </head>

  <body onload="onLoad();" onunload="GUnload();">
    <div id="help">
    <h1>Loading State from the URL</h1>
    In this example, we're getting the timemap state from the hash portion of the URL (the part after the "#"). This should work in all browsers the first time you come to the page, and in browsers that support the "onhashchange" event (IE8, FF3, Chrome), you should be able to use in-page links to set the state as well, e.g. <a href="#zoom=9&center=43.83,11.06&date=1500-01-21T12:15:49Z&selected=1">#zoom=9&amp;center=43.83,11.06&amp;date=1500-01-21T12:15:49Z&amp;selected=1</a> (if you're using another browser, try clicking this link then reloading).</div>
    <div id="timemap">
        <div id="timelinecontainer">
          <div id="timeline"></div>
        </div>
        <div id="mapcontainer">
          <div id="map"></div>
        </div>
    </div>
  </body>
</html><commit_msg>adding link to state example<commit_after><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>State Loading Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=<KEY>"
      type="text/javascript"></script>
    <script type="text/javascript" src="http://static.simile.mit.edu/timeline/api/timeline-api.js"></script>
    <script src="../timemap.js" type="text/javascript"></script>
    <script src="../param.js" type="text/javascript"></script>
    <script src="../state.js" type="text/javascript"></script>
	<script type="text/javascript">

var tm;
function onLoad() {

    // Setting the state from the URL takes a couple of extra steps, shown below
    // (numbered in the order they're called).
    
    // Step one: Set up the config as a variable
    var config = {
        mapId: "map",               // Id of map div element (required)
        timelineId: "timeline",     // Id of timeline div element (required)
        options: {
            eventIconPath: "../images/"
        },
        datasets: [
            {
                id: "artists",
                title: "Artists",
                theme: "orange",
                // note that the lines below are now the preferred syntax
                type: "basic",
                options: {
                    items: [
                        {
                          "start" : "1449",
                          "end" : "1494-01-11",
                          "point" : {
                              "lat" : 43.7717,
                              "lon" : 11.2536
                           },
                          "title" : "<NAME>",
                          "options" : {
                            // set the full HTML for the info window
                            "infoHtml": "<div class='custominfostyle'><b><NAME></b> was a visual artist of some sort.</div>"
                          }
                        },
                        {
                          "start" : "1475",
                          "end" : "1564",
                          "point" : {
                              "lat" : 43.6433,
                              "lon" : 11.9875
                           },
                          "title" : "Michelangelo",
                          "options" : {
                            // use the default title/description info window
                            "description": "Renaissance Man",
                            "theme": "yellow"
                          }
                        }
                    ]
                }
            }
        ],
        bandIntervals: [
            Timeline.DateTime.DECADE, 
            Timeline.DateTime.CENTURY
        ],
        
        // Step Three (because it's called asynchronously): Call tm.initState() once data is loaded
        dataDisplayedFunction: function(tm) {
            tm.initState();
        }
    };
    
    // Step Two: Set URL state in config object
    TimeMap.state.setConfigFromUrl(config);
    
    // Step Four: Initialize TimeMap object
    tm = TimeMap.init(config);
}
    </script>
	<link href="examples.css" type="text/css" rel="stylesheet"/>
    <style>
    div#timelinecontainer{ height: 300px; }
    div#mapcontainer{ height: 300px; }
    </style>
  </head>

  <body onload="onLoad();" onunload="GUnload();">
    <div id="help">
    <h1>Loading State from the URL</h1>
    In this example, we're getting the timemap state from the hash portion of the URL (the part after the "#"). This should work in all browsers the first time you come to the page, and in browsers that support the "onhashchange" event (IE8, FF3, Chrome), you should be able to use in-page links to set the state as well, e.g. <a href="#zoom=9&center=43.83,11.06&date=1500-01-21T12:15:49Z&selected=1">#zoom=9&amp;center=43.83,11.06&amp;date=1500-01-21T12:15:49Z&amp;selected=1</a> (if you're using another browser, try clicking this link then reloading).<br><br>
    You can also <a href="javascript:alert(tm.getStateUrl());">get the URL for the current state</a>.
    </div>
    <div id="timemap">
        <div id="timelinecontainer">
          <div id="timeline"></div>
        </div>
        <div id="mapcontainer">
          <div id="map"></div>
        </div>
    </div>
  </body>
</html>
{'fraction_non_alphanumeric': 0.1343757081350555, 'fraction_numerical': 0.02605937004305461, 'mean_word_length': 1.4822834645669292, 'pattern_counts': {'":': 6, '<': 103, '<?xml version=': 0, '>': 103, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5131197', 'n_tokens_mistral': 2649, 'n_tokens_neox': 2446, 'n_words': 631}