<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Cactus Data Visualization</title>
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500|Poppins:400,500,600,700|Roboto:400,500" rel="stylesheet"/>
<link href="https://cdn.materialdesignicons.com/3.0.39/css/materialdesignicons.min.css" rel="stylesheet" />
<!-- PLUGINS CSS STYLE -->
<link href="assets/plugins/toaster/toastr.min.css" rel="stylesheet" />
<!-- <link href="assets/plugins/nprogress/nprogress.css" rel="stylesheet" /> -->
<link href="assets/plugins/flag-icons/css/flag-icon.min.css" rel="stylesheet"/>
<link href="assets/plugins/select2/css/select2.min.css" rel="stylesheet" />
<!-- SLEEK CSS -->
<link id="sleek-css" rel="stylesheet" href="assets/css/sleek.css" />
<!-- FAVICON -->
<link href="assets/img/favicon.png" rel="shortcut icon" />
<!--
HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
-->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<link rel="stylesheet" href="/res/leaflet.css" />
<style>
#map {
width: 800px;
height: 500px;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
.legend {
text-align: left;
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
</style>
</head>
<body class="sidebar-fixed sidebar-dark header-light header-fixed" id="body">
<div class="mobile-sticky-body-overlay"></div>
<div class="wrapper">
<!--
====================================
——— LEFT SIDEBAR WITH FOOTER
=====================================
-->
<aside class="left-sidebar bg-sidebar">
<div id="sidebar" class="sidebar sidebar-with-footer">
<!-- Aplication Brand -->
<div class="app-brand">
<a href="/index.html">
<svg
class="brand-icon"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid"
width="30"
height="33"
viewBox="0 0 30 33"
>
<g fill="none" fill-rule="evenodd">
<path
class="logo-fill-blue"
fill="#7DBCFF"
d="M0 4v25l8 4V0zM22 4v25l8 4V0z"
/>
<path class="logo-fill-white" fill="#FFF" d="M11 4v25l8 4V0z" />
</g>
</svg>
<span class="brand-name">Cacti Data</span>
</a>
</div>
<!-- begin sidebar scrollbar -->
<div class="sidebar-scrollbar">
<!-- sidebar menu -->
<ul class="nav sidebar-inner" id="sidebar-menu">
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#pages"
aria-expanded="false" aria-controls="pages">
<i class="mdi mdi-image-filter-none"></i>
<span class="nav-text">Pages</span> <b class="caret"></b>
</a>
<ul class="collapse" id="pages"
data-parent="#sidebar-menu">
<div class="sub-menu">
<li >
<a class="sidenav-item-link" href="index.html">
<span class="nav-text">Visualization</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="zoompack.html">
<span class="nav-text">Zoomable Pack</span>
</a>
</li>
<li >
<a class="sidenav-item-link" href="temperature.html">
<span class="nav-text">Temperature Chart</span>
</a>
</li>
<li class="has-sub" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#authentication"
aria-expanded="false" aria-controls="authentication">
<span class="nav-text">Word Clouds</span> <b class="caret"></b>
</a>
<ul class="collapse" id="authentication">
<div class="sub-menu">
<li >
<a href="wordcloud-flower.html">Flower Producible</a>
</li>
<li >
<a href="wordcloud-no-flower.html">Non Flower Producible</a>
</li>
</div>
</ul>
</li>
<li >
<a class="sidenav-item-link" href="documentation.html">
<span class="nav-text">Documentation</span>
</a>
</li>
</div>
</ul>
</li>
</ul>
</div>
</div>
</aside>
<div class="page-wrapper">
<!-- Header -->
<header class="main-header " id="header">
<nav class="navbar navbar-static-top navbar-expand-lg">
<!-- Sidebar toggle button -->
<button id="sidebar-toggler" class="sidebar-toggle">
<span class="sr-only">Toggle navigation</span>
</button>
<!-- search form -->
<div class="search-form d-none d-lg-inline-block">
<h1>A Guide to Cacti in Americas</h1>
</div>
</nav>
</header>
<div class="content-wrapper">
<div class="content">
<div id="map" style=" width: 100%;"></div>
<div class="row">
<div class="col-md-12">
<!-- World Chart -->
<div class="card card-default" id="analytics-country">
<div class="card-body">
<!-- <div id="map" style="height: 100%; width: 100%;"></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer mt-auto">
<div class="copyright bg-white">
<p>Project done for Dr. Sharon Hsiao's Class (CSE 578), Arizona State University
</p>
</div>
</footer>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCn8TFXGg17HAUcNpkwtxxyT9Io9B_NcM" defer></script>
<script src="assets/plugins/jquery/jquery.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/plugins/toaster/toastr.min.js"></script>
<script src="assets/plugins/slimscrollbar/jquery.slimscroll.min.js"></script>
<script src="assets/plugins/ladda/spin.min.js"></script>
<script src="assets/plugins/jquery-mask-input/jquery.mask.min.js"></script>
<script src="assets/plugins/select2/js/select2.min.js"></script>
<script src="assets/plugins/daterangepicker/moment.min.js"></script>
<script src="assets/plugins/daterangepicker/daterangepicker.js"></script>
<script src="assets/js/sleek.js"></script>
<script src="assets/js/custom.js"></script>
<script src="/res/leaflet.js"></script>
<script type="text/javascript" src="/res/americas.js"></script>
<script type="text/javascript">
var map = L.map('map').setView([7.1508906, -77.7484821], 3);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'examples.map-20v6611k'
}).addTo(map);
// control that shows state info on hover
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML = '<h4>Cactus Population in the Americas</h4>' + (props ?
'<b>' + props.name + '</b><br />' + props.cactus_occurance + ' species'
: 'Hover over a state');
};
info.addTo(map);
// get color depending on cactus_occurance value
function getColor(d) {
return d > 40 ? '#800026' :
d > 30 ? '#BD0026' :
d > 20 ? '#E31A1C' :
d > 10 ? '#FC4E2A' :
d > 5 ? '#FD8D3C' :
d > 1 ? '#FEB24C' :
d > 0 ? '#FED976' :
'#FFEDA0';
}
function style(feature) {
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7,
fillColor: getColor(feature.properties.cactus_occurance)
};
}
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
info.update(layer.feature.properties);
}
var geojson;
function resetHighlight(e) {
geojson.resetStyle(e.target);
info.update();
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
geojson = L.geoJson(statesData, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
map.attributionControl.addAttribution('Population data © <a href="http://census.gov/">US Census Bureau</a>');
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [0, 1, 5, 10, 20, 30, 35, 40],
labels = [],
from, to;
for (var i = 0; i < grades.length; i++) {
from = grades[i];
to = grades[i + 1];
labels.push(
'<i style="background:' + getColor(from + 1) + '"></i> ' +
from + (to ? '–' + to : '+'));
}
div.innerHTML = labels.join('<br>');
return div;
};
legend.addTo(map);
</script>
</body>
</html>