<commit_before><!DOCTYPE html>
<!-- saved from url=(0052)https://guides.github.com/introduction/git-handbook/ -->
<html lang="en">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

      <title>Lab 3 - Interactive Choropleth Map </title>
      <!-- <link rel="icon" type="image/x-icon" href="https://guides.github.com/favicon.ico"> -->

      <meta name="viewport" content="width=device-width,initial-scale=1">

      <link rel="icon" href="brazil.png" >

      <link rel="stylesheet" href="gridism.css">
      <link rel="stylesheet" href="markdown.css">
      <link rel="stylesheet" href="octicons.css">
      <link href="main.css" rel="stylesheet">
      <link href="pygments.css" rel="stylesheet">

      <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
      <link href="prism.css" rel="stylesheet" />

      <script type="text/javascript" async="" src="ga.js"></script><script src="jquery.js" type="text/javascript"></script>
      <script src="snap.svg-min.js" type="text/javascript"></script>
      <script src="application.js" type="text/javascript"></script>

      <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-3769691-29']);
        _gaq.push(['_trackPageview']);
        (function() {
          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
      </script>

    </head>

    <body style="background-color:#7D6608">

        <article class="full">
            <div class="article-heading js-article-heading js-geopattern" style="background-color:#7D6608">
                <div class="wrap">
                  
                   <h1>Lab 3. Interactive Choropleth Map   <i class="fa fa-leaf"></i></h1> 
                  <h3 style="color:#F6F20D"><b><i class="fa fa-spinner fa-spin"></i>  Due: 11:59 pm, Thursday, 9/24</b></h3>
                </div>
            </div>

            <div class="wrap">
                <div class="toc-wrapper"><ol class="toc js-toc sticky"></ol></div>

                <div class="markdown-body content-body">


                  <p><a id="overview" title="Overview" class="toc-item"></a></p>
                  <h3><i class="fa fa-paint-brush"></i> Overview</h3>
                  <p><i class="fa fa-spinner fa-spin"></i>  In this lab, we will create an interactive <a href="https://en.wikipedia.org/wiki/Choropleth_map" target="_blank">choropleth map</a> using GeoJSON data. We will add mouseover effects and display attribute information as popups/tooltips. Scroll down to the <a href="#final">bottom</a> for an example.</p>
                    <p><i class="fa fa-spinner fa-spin"></i>  Please read the instructions carefully (including the explanations of each step) and complete the assignment in the <a href="#deliverable">Deliverables</a> section. Note you will need to acquire <b>your own data</b> (a shapefile with attribute values you are intended to map) for this lab. </p>



                  <p><a id="prep" title="Set Up Basemap" class="toc-item"></a></p>
                  <h3><i class="fa fa-paint-brush"></i> Set Up Basemap</h3>
                  <ul>
                         <li>Before start, create a <b>new file folder</b> (e.g., lab3) for saving the html document and associated data file.</li>

                          <li>Open your <b>code editor</b> and add the following lines to set up the basemap using the Carto light canvas.<br> 
                          If you are interested in using different basemaps, refer to this <a href="https://wiki.openstreetmap.org/wiki/Tile_servers", target="_blank">OpenStreetMap wiki page</a> which privides a list of tile maps with their url and attribution.

                               <pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Lab 3&lt;/title&gt;

        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet@1.6.0/dist/leaflet.css&quot;
        integrity=&quot;sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==&quot;
        crossorigin=&quot;&quot;/&gt;

        &lt;script src=&quot;https://unpkg.com/leaflet@1.6.0/dist/leaflet.js&quot;
        integrity=&quot;sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==&quot;
        crossorigin=&quot;&quot;&gt;&lt;/script&gt;

    &lt;/head&gt;

    &lt;body&gt;
        &lt;div id=&quot;map&quot; style=&quot;height: 500px&quot;&gt;&lt;/div&gt;

        &lt;script type=&quot;text/javascript&quot;&gt;

          var map = L.map('map', {
              center: [51.48,-0.07],
              zoom: 10
          });

         L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
           attribution: 'Map tiles by Carto, under CC BY 3.0. Data by OpenStreetMap, under ODbL.',
           maxZoom: 11,
           minZoom: 5
         }).addTo(map);

        &lt;/script&gt;
   &lt;/body&gt;
&lt;/html&gt;
</code></pre></li>
           <li>Then, save the document as <code>map3.html</code> in your lab 3 folder. Please remember to specify the file extension as <b>.html</b> to make it work. Your map should look like:<br></li>

            <iframe src="map/basemap.html" width=100% height=520 frameborder=0></iframe><br>
            <p>Yep, I will map London as an example this time! </p>
                       </ul>



                <p><a id="geojson" title="Prepare and Add GeoJSON Layer" class="toc-item"></a></p>
                  <h3><i class="fa fa-paint-brush"></i> Prepare and Add GeoJSON Layer</h3>
                    <p>In Lab 2, we have introduced a way to add markers manually using their coordinates. But you may wish to work with more complex spatial features as in a desktop GIS. So we introduce GeoJSON, which is a format for encoding a variety of geographic data structures (<a href="https://geojson.org" target="_blank">https://geojson.org</a>).</p>
                     <ul>

                        <li style="font-weight:bold;color:red;"> Getting Data: click <a href="https://drive.google.com//uc?export=download&id=0BzvZaHCgmEmNYWFmc2R4UHNHSzg" target="_blank">here</a> to download the sample shapefile I am using in this lab. But please note that you will need to find your own data for the assignment submission as stated in the <a href="#deliverable">Deliverables</a> section.</li>
                        <li>Extract the zipped data folder to your desired directory.</li>

                            <li>Launch <strong>QGIS Desktop</strong>. If you haven't installed QGIS, click <a href="https://qgis.org/en/site/forusers/download.html" target=_blank>here</a> to download and install it on your own computer. </li>

                            <li>In QGIS, go to <b>Layer (top menu bar) &gt; Add Layer &gt; Add Vector Layer</b>. Then browse to the directory where you have extracted the shapefile and select the <b>london_borough.shp</b> file to open it in QGIS. </li>
                           <li>The spatial units (polygons) of this layer are the boroughs in the greater London area.</li>

                            <li>Right-click the layer in the Layers Panel and select <b>Open Attribute Table</b>. The shapefile contains three fields/attributes: <b>NAME, pop_den (population density in <i>people per hectare</i> 2011), and per_indian (percent Indian population 2011)</b>. </li>

                              <li>Although we will be mapping the data on the web eventually, it is helpful to first explore the data in QGIS to help determine the details for rendering the data on the web. Right-click the layer again and select <b>Properties</b>, then choose the <b>Symbology</b> tab (see image below).
                                <ul>
                                <li>Use <b>Graduated</b> Symbol to render the data (this option is used when making choropleth maps).</li>
                                <li>For Value, use the drop-down button to choose the attribute you are intended to map, <code>pop_den</code> in my example.</li>
                                <li>Under Classes, you could pick the mode of data classification (I used Natural Breaks) and number of classes (I used 5). Make sure to click the <b>Classify</b> button or your map may disappear.<br>Wondering what the different modes mean? Check out <a href="https://gisgeography.com/choropleth-maps-data-classification/" target="_blank">this link</a>.</li>
                                  <center><img src="img/class.png" width=100% align="middle" ></center>
                                <li>Click OK to apply the selected style. And you should see an example of the london boroughs map rendered as a choropleth map.</li><commit_msg>tweak<commit_after><!DOCTYPE html>
<!-- saved from url=(0052)https://guides.github.com/introduction/git-handbook/ -->
<html lang="en">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

      <title>Lab 3 - Interactive Choropleth Map </title>
      <!-- <link rel="icon" type="image/x-icon" href="https://guides.github.com/favicon.ico"> -->

      <meta name="viewport" content="width=device-width,initial-scale=1">

      <link rel="icon" href="brazil.png" >

      <link rel="stylesheet" href="gridism.css">
      <link rel="stylesheet" href="markdown.css">
      <link rel="stylesheet" href="octicons.css">
      <link href="main.css" rel="stylesheet">
      <link href="pygments.css" rel="stylesheet">

      <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
      <link href="prism.css" rel="stylesheet" />

      <script type="text/javascript" async="" src="ga.js"></script><script src="jquery.js" type="text/javascript"></script>
      <script src="snap.svg-min.js" type="text/javascript"></script>
      <script src="application.js" type="text/javascript"></script>

      <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-3769691-29']);
        _gaq.push(['_trackPageview']);
        (function() {
          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
      </script>

    </head>

    <body style="background-color:#7D6608">

        <article class="full">
            <div class="article-heading js-article-heading js-geopattern" style="background-color:#7D6608">
                <div class="wrap">
                  
                   <h1>Lab 3. Interactive Choropleth Map   <i class="fa fa-leaf"></i></h1> 
                  <h3 style="color:#F6F20D"><b><i class="fa fa-spinner fa-spin"></i>  Due: 11:59 pm, Thursday, 9/24</b></h3>
                </div>
            </div>

            <div class="wrap">
                <div class="toc-wrapper"><ol class="toc js-toc sticky"></ol></div>

                <div class="markdown-body content-body">


                  <p><a id="overview" title="Overview" class="toc-item"></a></p>
                  <h3><i class="fa fa-paint-brush"></i> Overview</h3>
                  <p><i class="fa fa-spinner fa-spin"></i>  In this lab, we will create an interactive <a href="https://en.wikipedia.org/wiki/Choropleth_map" target="_blank">choropleth map</a> using GeoJSON data. We will add mouseover effects and display attribute information as popups/tooltips. Scroll down to the <a href="#final">bottom</a> for an example.</p>
                    <p><i class="fa fa-spinner fa-spin"></i>  Please read the instructions carefully (including the explanations of each step) and complete the assignment in the <a href="#deliverable">Deliverables</a> section. Note you will need to acquire <b>your own data</b> (a shapefile with attribute values you are intended to map) for this lab. </p>



                  <p><a id="prep" title="Set Up Basemap" class="toc-item"></a></p>
                  <h3><i class="fa fa-paint-brush"></i> Set Up Basemap</h3>
                  <ul>
                         <li>Before start, create a <b>new file folder</b> (e.g., lab3) for saving the html document and associated data file.</li>

                          <li>Open your <b>code editor</b> and add the following lines to set up the basemap using the Carto light canvas.<br> 
                          If you are interested in using different basemaps, refer to this <a href="https://wiki.openstreetmap.org/wiki/Tile_servers", target="_blank">OpenStreetMap wiki page</a> which privides a list of tile maps with their url and attribution.

                               <pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Lab 3&lt;/title&gt;

        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet@1.6.0/dist/leaflet.css&quot;
        integrity=&quot;sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==&quot;
        crossorigin=&quot;&quot;/&gt;

        &lt;script src=&quot;https://unpkg.com/leaflet@1.6.0/dist/leaflet.js&quot;
        integrity=&quot;<KEY>==&quot;
        crossorigin=&quot;&quot;&gt;&lt;/script&gt;

    &lt;/head&gt;

    &lt;body&gt;
        &lt;div id=&quot;map&quot; style=&quot;height: 500px&quot;&gt;&lt;/div&gt;

        &lt;script type=&quot;text/javascript&quot;&gt;

          var map = L.map('map', {
              center: [51.48,-0.07],
              zoom: 10
          });

         L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
           attribution: 'Map tiles by Carto, under CC BY 3.0. Data by OpenStreetMap, under ODbL.',
           maxZoom: 11,
           minZoom: 5
         }).addTo(map);

        &lt;/script&gt;
   &lt;/body&gt;
&lt;/html&gt;
</code></pre></li>
           <li>Then, save the document as <code>map3.html</code> in your lab 3 folder. Please remember to specify the file extension as <b>.html</b> to make it work. Your map should look like:<br></li>

            <iframe src="map/basemap.html" width=100% height=520 frameborder=0></iframe><br>
            <p>Yep, I will map London as an example this time! </p>
                       </ul>



                <p><a id="geojson" title="Prepare and Add GeoJSON Layer" class="toc-item"></a></p>
                  <h3><i class="fa fa-paint-brush"></i> Prepare and Add GeoJSON Layer</h3>
                    <p>In Lab 2, we have introduced a way to add markers manually using their coordinates. But you may wish to work with more complex spatial features as in a desktop GIS. So we introduce GeoJSON, which is a format for encoding a variety of geographic data structures (<a href="https://geojson.org" target="_blank">https://geojson.org</a>).</p>
                     <ul>

                        <li style="font-weight:bold;color:red;"> Getting Data: click <a href="https://drive.google.com//uc?export=download&id=0BzvZaHCgmEmNYWFmc2R4UHNHSzg" target="_blank">here</a> to download the sample shapefile I am using for the demonstration. But please note that you will need to find your own data for the assignment submission as stated in the <a href="#deliverable">Deliverables</a> section.</li>
                        <li>Extract the zipped data folder to your desired directory.</li>

                            <li>Launch <strong>QGIS Desktop</strong>. If you haven't installed QGIS, click <a href="https://qgis.org/en/site/forusers/download.html" target=_blank>here</a> to download and install it on your own computer. </li>

                            <li>In QGIS, go to <b>Layer (top menu bar) &gt; Add Layer &gt; Add Vector Layer</b>. Then browse to the directory where you have extracted the shapefile and select the <b>london_borough.shp</b> file to open it in QGIS. </li>
                           <li>The spatial units (polygons) of this layer are the boroughs in the greater London area.</li>

                            <li>Right-click the layer in the Layers Panel and select <b>Open Attribute Table</b>. The shapefile contains three fields/attributes: <b>NAME, pop_den (population density in <i>people per hectare</i> 2011), and per_indian (percent Indian population 2011)</b>. </li>

                              <li>Although we will be mapping the data on the web eventually, it is helpful to first explore the data in QGIS to help determine the details for rendering the data on the web. Right-click the layer again and select <b>Properties</b>, then choose the <b>Symbology</b> tab (see image below).
                                <ul>
                                <li>Use <b>Graduated</b> Symbol to render the data (this option is used when making choropleth maps).</li>
                                <li>For Value, use the drop-down button to choose the attribute you are intended to map, <code>pop_den</code> in my example.</li>
                                <li>Under Classes, you could pick the mode of data classification (I used Natural Breaks) and number of classes (I used 5). Make sure to click the <b>Classify</b> button or your map may disappear.<br>Wondering what the different modes mean? Check out <a href="https://gisgeography.com/choropleth-maps-data-classification/" target="_blank">this link</a>.</li>
                                  <center><img src="img/class.png" width=100% align="middle" ></center>
                                <li>Click OK to apply the selected style. And you should see an example of the london boroughs map rendered as a choropleth map.</li>
{'fraction_non_alphanumeric': 0.1419746215494212, 'fraction_numerical': 0.013301424755120214, 'mean_word_length': 2.6352417560186123, 'pattern_counts': {'":': 0, '<': 366, '<?xml version=': 0, '>': 366, 'https://': 26, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 12, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3037185', 'n_tokens_mistral': 5761, 'n_tokens_neox': 5325, 'n_words': 1569}