129 lines
4.8 KiB
HTML
129 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>WrongMove</title>
|
|
|
|
<!--Style stuff-->
|
|
<link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
|
|
<link rel="stylesheet" href="https://unpkg.com/skeleton-css@2.0.4/css/normalize.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/skeleton-css@2.0.4/css/skeleton.css">
|
|
|
|
<link rel="stylesheet" href="style.css?v=1">
|
|
<script src="own_libs/HexgridHeatmap.js?v=1"></script>
|
|
<!-- <script src="own_libs/HexgridHeatmapNew.js"></script> -->
|
|
|
|
<!--libs-->
|
|
<!-- <script src='https://api.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script> -->
|
|
<!-- <link href='https://api.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' /> -->
|
|
<script src='https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.js'></script>
|
|
<link href='https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.css' rel='stylesheet' />
|
|
|
|
<script src="https://d3js.org/d3.v4.min.js"></script>
|
|
<script src="https://unpkg.com/crossfilter@1.3.12/crossfilter.js"></script>
|
|
<script src="https://unpkg.com/rivets@0.9.6/dist/rivets.bundled.min.js"></script>
|
|
<script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
|
|
|
|
<!--data-->
|
|
<!-- <script src="data/all_geojs.js"></script> -->
|
|
<!-- <script src="data/not_all_geojs.js"></script> -->
|
|
<script src="data/london_geojs.js"></script>
|
|
|
|
<style>
|
|
.scrollable-panel {
|
|
width: 100%;
|
|
max-width: 800px;
|
|
height: 500px;
|
|
margin: 20px auto;
|
|
overflow-y: auto;
|
|
background: #f9f9f9;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
padding: 15px;
|
|
}
|
|
|
|
.scrollable-panel::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.scrollable-panel::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.scrollable-panel::-webkit-scrollbar-thumb {
|
|
background: #888;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.scrollable-panel::-webkit-scrollbar-thumb:hover {
|
|
background: #555;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id='map'></div>
|
|
|
|
<div id="legend">
|
|
<svg id="svg">
|
|
</svg>
|
|
</div>
|
|
|
|
<div id="overlay">
|
|
<div class="modal modal-open" id="modal_overlay">
|
|
<div class="modal-inner">
|
|
<div class="modal-content">
|
|
<div class="modal-close-icon">
|
|
<a href="javascript:void(0)" class="close-modal"><i class="fa fa-times"
|
|
aria-hidden="true"></i></a>
|
|
</div>
|
|
<div class="modal-content-inner">
|
|
<h4>Visualization Parameters</h4>
|
|
<p>Conflicting parameters will yield zero results.</p>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="five columns">
|
|
<label for="city_input">City</label>
|
|
<input type="search" class="u-full-width" id="city_input" placeholder="London"
|
|
rv-value="filter.city"> <br>
|
|
</div>
|
|
<div class="one columns">
|
|
<p></p>
|
|
<p></p>
|
|
<p>or</p>Squaremeter
|
|
</div>
|
|
<div class="five columns">
|
|
<label for="country_input">Country</label>
|
|
<select class="u-full-width" id="country_input" rv-value="filter.country">
|
|
<option rv-each-country="filter.countries" rv-value="country">{country}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<hr class="modal-buttons-seperator">
|
|
<label for="heatmap_type">What to visualize?</label>
|
|
|
|
<select class="u-full-width" id="heatmap_type" rv-value="filter.mode">
|
|
<option selected="selected" value="qmprice">Price per squaremeter</option>
|
|
<option value="rooms">Number of rooms</option>
|
|
<option value="qm">Squaremeter</option>
|
|
<option value="total_price">Price</option>
|
|
</select>
|
|
|
|
<hr class="modal-buttons-seperator">
|
|
<div class="modal-buttons">
|
|
<button class="button-primary close-modal" onclick="update()">Load Data</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="script.js?v=1"></script>
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|