92 lines
3.7 KiB
HTML
92 lines
3.7 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>
|
|
|
|
<!--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://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>
|
|
|
|
<!--data-->
|
|
<!-- <script src="data/all_geojs.js"></script> -->
|
|
<!-- <script src="data/not_all_geojs.js"></script> -->
|
|
<script src="data/london_geojs.js"></script>
|
|
</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>
|