{"id":28510,"date":"2017-02-28T03:01:20","date_gmt":"2017-02-27T17:01:20","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=28510"},"modified":"2017-02-27T21:18:45","modified_gmt":"2017-02-27T11:18:45","slug":"dams-in-the-united-states-lists-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/dams-in-the-united-states-lists-tutorial\/","title":{"rendered":"Dams in the United States Lists Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Dams in the United States Lists Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa_lists.jpg\" title=\"Dams in the United States Lists Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Dams in the United States Lists Tutorial<\/p><\/div>\n<p>We started out on a new geospatial web application with <a title='Dams in the United States Primer Tutorial' href='#dituspt'>Dams in the United States Primer Tutorial<\/a> yesterday, in which we set up the initial handling of the free public data source into <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Chart Map Chart' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=4832'>Map Charts<\/a>.  Along the way, we define a huge array, which can now be <i>viewed<\/i> in different ways (and that &#8220;view&#8221; sorted) to present various &#8220;lists&#8221; or different views plucked from that same data source.  This also serves as a tool for optional decluttering of the Map Chart views.<\/p>\n<p>Think a lot of us are attracted to lists involving numbers, so we latch onto the National Atlas of the United States Dam data fields (via DATA.GOV <a target=_blank title='Major Dams of the United States - Direct Download' href='https:\/\/catalog.data.gov\/dataset?metadata_type=geospatial&#038;page=13'>Major Dams of the United States &#8211; Direct Download<\/a> link) &#8230;<\/p>\n<ul>\n<li>Dam Height<\/li>\n<li>Maximum Storage<\/li>\n<li>Normal Storage<\/li>\n<li>Surface Area<\/li>\n<li>Drainage Area<\/li>\n<\/ul>\n<p> &#8230; to show the user &#8220;Top 10&#8221; lists that relate to (a view of) all of the United States of America dam data, or on a state selection basis.  These are shown in HTML select element dropdown elements that when clicked just show Map Charts with that Dam displaying, or others of its ilk also displayed.  And so this can open up display mechanisms that are both &#8230;<\/p>\n<ul>\n<li>not restricted to the one state &#8230; and that are &#8230;<\/li>\n<li>less cluttered<\/li>\n<\/ul>\n<p>So onward and upward with HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.html---GETME\" title=\"dams_usa.html\">dams_usa.html<\/a> code that changed in HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.html---GETME\" title=\"dams_usa.html\">this way<\/a> and that can be seen in action at this HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='dituspt'>Previous relevant <a target=_blank title='Dams in the United States Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/dams-in-the-united-states-primer-tutorial\/'>Dams in the United States Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Dams in the United States Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.jpg\" title=\"Dams in the United States Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Dams in the United States Primer Tutorial<\/p><\/div>\n<p>We&#8217;re starting out on a new geospatial web application today.  We&#8217;re going to call it &#8220;Dams in the United States of America&#8221; because we are using a public data source for this information giving &#8230;<\/p>\n<ul>\n<li>Names of Dam<\/li>\n<li>Location Place Information for Dam &#8230; State, County<\/li>\n<li><b>Geospatial Latitude and Longitude<\/b><\/li>\n<li>Owner of Dam Information<\/li>\n<li>Height of Dam, Surface Area etcetera<\/li>\n<li>Year Dam Was Built<\/li>\n<li>Type of Dam<\/li>\n<\/ul>\n<p> &#8230; and that public data source webpage we found was at this DATA.GOV <a target=_blank title='Major Dams of the United States - Direct Download' href='https:\/\/catalog.data.gov\/dataset?metadata_type=geospatial&#038;page=13'>Major Dams of the United States &#8211; Direct Download<\/a> link.  It, in turn attributes the data to &#8230;<\/p>\n<p><code><br \/>\n      Originator: National Atlas of the United States<br \/>\n      Publication_Date: 200603<br \/>\n      Title: Major Dams of the United States<br \/>\n<\/code><\/p>\n<p> &#8230; so thanks, everybody.  It is great to find these public data sources.<\/p>\n<p>What happened on a MacBook Pro laptop downloaded this <i>tar<\/i> file was that on double click it it extracted various files, the most interesting one being &#8230;<\/p>\n<p><code><br \/>\ndams00x020.dbf<br \/>\n<\/code><\/p>\n<p> &#8230; which <i>Opens With<\/i> LibreOffice into a Spreadsheet that we File -&gt; Export(ed) as HTML that forms the &#8220;child&#8221; contents of our HTML and Javascript &#8220;parent&#8221;&#8216;s iframe element today.  Just as with <a target=_blank title='Learning Programming Short Quiz Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/learning-programming-short-quiz-tutorial\/'>Learning Programming Short Quiz Tutorial<\/a>&#8216;s (gleeful) use of the Javascript DOM <i>document.body.innerText<\/i> (rather than our usual <a target=_blank title='Client Pre-emptive Javascript Iframe' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=Client+Pre-emptive&#038;stype=Search'>Client Pre-emptive Javascript Iframe<\/a> <i>document.body.innerHTML<\/i> usage, and thanks to this <a target=_blank title='Useful link, thanks' href='http:\/\/www.davidtong.me\/innerhtml-innertext-textcontent-html-and-text\/'>useful link<\/a> regarding cross-browser issues here) saves us heaps of parsing (out the &lt;&#8216;s and &gt;&#8217;s) HTML difficulties, and we end up with a simple parsing statement that goes &#8230;<\/p>\n<p><code><br \/>\ndam_data_arr=aconto.body.innerText.split(String.fromCharCode(10));<br \/>\n<\/code><\/p>\n<p> &#8230; that ends up giving you a huge, and we mean huge <font size=1>&#8230; we leave two minutes for loading purposes &#8230;<\/font> array to analyze for Dam reporting purposes <font size=1>hot damn!<\/font><\/p>\n<p>As you might surmise by <b>Geospatial Latitude and Longitude<\/b> above, we&#8217;ll be hard pressed not to be tempted by reporting this Dam data via our <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Chart Map Chart' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=4832'>Map Chart<\/a> interfacing web application (with its inhouse &#8220;select&#8221; event (onclick) additional functionalities), that we POST to via an HTML form element with a <i>target<\/i> property pointing at (another) HTML iframe element&#8217;s <i>name<\/i> property.<\/p>\n<p>There&#8217;s a fair bit more to go into with this project, but we&#8217;ll take a breather there for now to let you know that you can try this for yourself with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.html\" title=\"Click picture\">live run<\/a> link that has this, purely clientside (because of our Client Pre-emptive Javascript Iframe design) HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.html--GETME\" title=\"dams_usa.html\">dams_usa.html<\/a> code for your perusal.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d28229' onclick='var dv=document.getElementById(\"d28229\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/preemptive\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d28229' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d28510' onclick='var dv=document.getElementById(\"d28510\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dropdown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d28510' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We started out on a new geospatial web application with Dams in the United States Primer Tutorial yesterday, in which we set up the initial handling of the free public data source into Google Charts Map Charts. Along the way, &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/dams-in-the-united-states-lists-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[275,2145,291,2146,354,360,367,480,481,513,576,587,651,694,710,2126,997,1319],"class_list":["post-28510","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-cross-browser","tag-dam","tag-data-feed","tag-data-gov","tag-dom","tag-download","tag-dropdown","tag-geodata","tag-geographicals","tag-google","tag-html","tag-iframe","tag-javascipt","tag-libreoffice","tag-list","tag-map-chart","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/28510"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=28510"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/28510\/revisions"}],"predecessor-version":[{"id":28516,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/28510\/revisions\/28516"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=28510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=28510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=28510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}