mirror of
https://github.com/heavyai/heavyai-charting.git
synced 2026-01-25 14:57:45 +00:00
78e36e551c
* First draft polygons layer + lines layer * Small adjustments to query to get it to work * Add opacity for contour colors, change colors a bit * Formatting * Fix lint problems and bug created when refactoring * Move default opacity to constant, use throughout * Add validation check for table before generating preflight query. Reject promise if not * Spiff up check, used extracted data const, formatting
284 lines
8.2 KiB
HTML
284 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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;
|
|
}
|
|
.data-count{
|
|
padding-right:20px;
|
|
}
|
|
.filter-count{
|
|
font-weight: bold;
|
|
color: #45B1E8;
|
|
}
|
|
</style>
|
|
<title>Contour Example</title>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-default">
|
|
<div class="container-fluid">
|
|
<div class="navbar-header" style="margin-top:10px">
|
|
<span class="heavyai">HEAVY.AI Demo</span>
|
|
</div>
|
|
<div class="navbar-text navbar-right">
|
|
<div class="data-count"></div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="main-container">
|
|
<div>
|
|
<div class="title">Contour Map</div>
|
|
<div id="contourChart"></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>
|
|
|
|
function createCharts(crossFilter, dc, config, con) {
|
|
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
|
|
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 100
|
|
|
|
// Linemap Chart
|
|
const parent = document.getElementById("contourChart");
|
|
const mapboxToken = "pk.eyJ1IjoibWFwZCIsImEiOiJjaWV1a3NqanYwajVsbmdtMDZzc2pneDVpIn0.cJnk8c2AxdNiRNZWtx5A9g";
|
|
|
|
const countGroup = crossFilter.groupAll();
|
|
|
|
dc.countWidget(".data-count")
|
|
.dimension(crossFilter)
|
|
.group(countGroup);
|
|
|
|
const ContourChart = dc.rasterChart(parent, true, null, mapboxgl)
|
|
.con(con)
|
|
.height(h)
|
|
.width(w)
|
|
.mapUpdateInterval(750)
|
|
.mapStyle('mapbox://styles/mapbox/light-v8')
|
|
.mapboxToken(mapboxToken) // need a mapbox accessToken for loading the tiles
|
|
.popupSearchRadius(2)
|
|
.useLonLat(true)
|
|
.useGeoTypes(true) // need for projecting geo column using "mercator_map_projection"
|
|
|
|
const contourPolygonLayer = dc.rasterLayer("polys")
|
|
.crossfilter(crossFilter)
|
|
.setState({
|
|
data: [
|
|
{
|
|
type: "contour",
|
|
table: config.table,
|
|
source: config.table,
|
|
contour_value_field: config.value,
|
|
lat_field: config.lat_field,
|
|
lon_field: config.lon_field,
|
|
agg_type: 'AVG',
|
|
fill_agg_type: 'AVG',
|
|
bin_dim_meters: config.bin_dim_meters,
|
|
neighborhood_fill_radius: 0,
|
|
fill_only_nulls: false,
|
|
flip_latitude: false,
|
|
minor_contour_interval: config.minor_contour_interval,
|
|
major_contour_interval: config.major_contour_interval,
|
|
contour_offset: 0,
|
|
}
|
|
],
|
|
transform: {
|
|
projection: "mercator_map_projection",
|
|
},
|
|
enableHitTesting: false,
|
|
mark: {
|
|
type: "poly",
|
|
strokeColor: "white",
|
|
strokeWidth: 0,
|
|
fillColor: "",
|
|
lineJoin: "miter",
|
|
miterLimit: 10
|
|
},
|
|
encoding: {
|
|
color: {
|
|
type: "linear",
|
|
domain: [0, 6000],
|
|
range: ["#FF0000", "#0000FF"],
|
|
opacity: 0.50
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
const contourLayer = dc.rasterLayer("lines")
|
|
.crossfilter(crossFilter)
|
|
.setState({
|
|
data: [{
|
|
type: "contour",
|
|
table: config.table,
|
|
source: config.table,
|
|
contour_value_field: config.value,
|
|
lat_field: config.lat_field,
|
|
lon_field: config.lon_field,
|
|
agg_type: 'AVG',
|
|
fill_agg_type: 'AVG',
|
|
bin_dim_meters: config.bin_dim_meters,
|
|
neighborhood_fill_radius: 0,
|
|
fill_only_nulls: false,
|
|
flip_latitude: false,
|
|
minor_contour_interval: config.minor_contour_interval,
|
|
major_contour_interval: config.major_contour_interval,
|
|
contour_offset: 0,
|
|
}],
|
|
transform: {
|
|
projection: "mercator_map_projection",
|
|
},
|
|
mark: {
|
|
type: "lines",
|
|
lineJoin: "bevel",
|
|
},
|
|
encoding: {
|
|
// Keep this here for now to keep line mixin happy
|
|
color: {},
|
|
|
|
// TODO(joe): Implement encoding in this format
|
|
// color: {
|
|
// field: "is_major_contour",
|
|
// type: "nominal",
|
|
// scale: {
|
|
// domain: [false, true],
|
|
// range: ["#999999", "#999999"]
|
|
// }
|
|
// },
|
|
// strokeWidth: {
|
|
// field: "is_major_contour",
|
|
// type: "nominal",
|
|
// scale: {
|
|
// domain: [false, true],
|
|
// range: [1, 2]
|
|
// }
|
|
// },
|
|
// opacity: {
|
|
// field: "is_major_contour",
|
|
// type: "nominal",
|
|
// scale: {
|
|
// domain: [false, true],
|
|
// range: [0.75, 0.8]
|
|
// }
|
|
// },
|
|
|
|
// Contour stuff
|
|
stroke: {
|
|
minor: {
|
|
width: 1,
|
|
color: "#666666",
|
|
opacity: 0.75
|
|
},
|
|
major: {
|
|
width: 2,
|
|
color: "#666666",
|
|
opacity: 0.8
|
|
}
|
|
}
|
|
|
|
},
|
|
enableHitTesting: false
|
|
})
|
|
|
|
ContourChart
|
|
.pushLayer("contourPolygonLayer", contourPolygonLayer)
|
|
.pushLayer("contourLayer", contourLayer)
|
|
.init()
|
|
.then((chart) => {
|
|
// This will zoom to data extent
|
|
chart.zoomToLocation({
|
|
bounds: {
|
|
sw: [-109.5400307407924, 36.77053773368342],
|
|
ne: [-101.56912902650292, 41.34207288081009]
|
|
}
|
|
})
|
|
|
|
dc.renderAllAsync()
|
|
})
|
|
|
|
|
|
window.addEventListener("resize", _.debounce(resizeAll, 100));
|
|
|
|
function resizeAll(){
|
|
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
|
|
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 100
|
|
|
|
ContourChart.map().resize();
|
|
ContourChart.isNodeAnimate = false;
|
|
ContourChart
|
|
.width(w)
|
|
.height(h)
|
|
.render()
|
|
|
|
dc.redrawAllAsync();
|
|
}
|
|
|
|
}
|
|
|
|
function init() {
|
|
const coloradoDEMConfig = {
|
|
table: "colorado_dem",
|
|
lat_field: "raster_lat",
|
|
lon_field: "raster_lon",
|
|
value: "z",
|
|
bin_dim_meters: 90,
|
|
minor_contour_interval: 100,
|
|
major_contour_interval: 500
|
|
}
|
|
|
|
const nwsPrecipitationConfig = {
|
|
table: "nws_precip_last7days_20221005_conus",
|
|
lat_field: "raster_lat",
|
|
lon_field: "raster_lon",
|
|
value: "band_1_1",
|
|
bin_dim_meters: 10000,
|
|
minor_contour_interval: 1,
|
|
major_contour_interval: 3
|
|
}
|
|
|
|
const nwsPercentageOfNormalConfig = {
|
|
table: "nws_precip_last7days_20221005_conus",
|
|
lat_field: "raster_lat",
|
|
lon_field: "raster_lon",
|
|
value: "band_1_4",
|
|
bin_dim_meters: 10000,
|
|
minor_contour_interval: 100,
|
|
major_contour_interval: 500
|
|
}
|
|
|
|
const config = coloradoDEMConfig;
|
|
|
|
const con = new DbCon()
|
|
.protocol("https")
|
|
.host("metis.mapd.com")
|
|
.port("443")
|
|
.dbName("mapd")
|
|
.user("mapd")
|
|
.password("HyperInteractive")
|
|
.connect(function(error, con) {
|
|
crossfilter.crossfilter(con, config.table)
|
|
.then(function(cf) {
|
|
createCharts(cf, dc, config, con)
|
|
})
|
|
;
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', init, false);
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|