heavyai-charting/example/exampleWindBarbs.html
Christopher Root 17975a31c8
Adds windbarb raster chart layer via a new raster layer state parser/validator/vega-generator [DRAFT] (#585)
* Adds a new windbarb raster chart layer that aligns with it BE-
rendering counterpart. Vega-lite-like state json parsing is done
with a more stable parser/validator and vega generator.

Initial changes include:
 * adding a new exampleWindBarbs example with webpack config
 * adding a new windbarb raster layer called raster-layer-windarb-mixin
   * embedded in this file is a first iteration of a more refined raster
     layer state parser/validator and vega generator.
   * once this new parser/validator/generator is in a more solid state,
     the expectation is to change the other existing raster charts to
     it.
 * exposing the new windbarb raster layer in raster-chart, raster-layer
   and index

* Adds initial implementations of other scales that haven't been fully
utilized, namely threshold scale. The scales come with default "auto"
handling. For example, threshold scales use sigma values as stops
for "auto"

* Adds more formal legend support, including options to build legends
for threshold and quantize scales more appropriately.

* Fixes some tests to account for changes in stacked-legend

NOTE: the change to the stacked-legend::should gradient test is
questionable. It's possible the changes made to the stacked-legend may
break legend behavior and the fact that this test is failing might be
and indicator of that. This may require additional investigation to
verify or not behavior changes. Going to land this in the meantime to
unblock and deal with any legend issues secondarily.
2022-11-10 08:45:05 -08:00

67 lines
2.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>HEAVY.AI</title>
<meta charset="UTF-8">
<!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'> -->
<style>
.title {
font-weight: bold;
text-align: center;
}
.heavyai {
position: relative;
top: 2px;
}
.search {
display: inline-block;
margin-top: 12px;
margin-left: 50px;
}
.data-count {
padding-right: 20px;
}
.filter-count {
font-weight: bold;
color: #45B1E8;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header" style="margin-top:10px">
<img alt="Brand" src="images/favicon.png" height="30" width="30">
<span class="heavyai">HEAVY.AI Demo</span>
</div>
<div class="navbar-text navbar-right">
<div class="data-count">
<span class="total"><span><span class="filter-count"></span></span>
<span>of <span class="total-count"></span> tweets</span>
</div>
</div>
</div>
</nav>
<div class="main-container">
<div class="col-xs-12">
<div class="title">Wind Barb Map</div>
<div id="windbarb-example"></div>
</div>
</div>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="assets/app.bundle.js"></script> -->
<script src="assets/windbarb.bundle.js"></script>
</body>
</html>