mirror of
https://github.com/heavyai/heavyai-charting.git
synced 2026-01-25 14:57:45 +00:00
7251f1d4e3
* [MAPDC] refactor using es6 modules add logging module add more charts and mixins add bubble overlay, heatmap, boxplot add more charts finish moving to new folder beging moving overrides to new folder replace mapdc src/ update build script fix tests fix mapdc import fix mapdc import prebuild mapdc css styles remove console redrawAll on rangeFilter update remove grunt, delete dead files update tests minor fixes fix raster-mixin d3 import lint clear cache fix mapdc style import fix example styles * remove dc from scatter-mixin
172 lines
6.7 KiB
HTML
172 lines
6.7 KiB
HTML
-<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>MapD</title>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/mapdc.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/chart.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/mapbox-gl.css" />
|
|
<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;
|
|
}
|
|
.mapd {
|
|
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="mapd">MapD 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">Point Map with Lasso Tool</div>
|
|
<div id="chart1-example"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/lodash.js"></script>
|
|
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
|
|
<script src="js/d3.min.js"></script>
|
|
<script src="js/thrift.js"></script>
|
|
<script src="js/mapd.thrift.js"></script>
|
|
<script src="js/mapd_types.js"></script>
|
|
<script src="js/MapdCon.js"></script>
|
|
<script src="js/mapd-crossfilter.js"></script>
|
|
<script src="js/mapdc.js"></script>
|
|
<script src="js/mapbox-gl.js"></script>
|
|
<script src="js/mapboxgl-overrides.js"></script>
|
|
<script src="js/mapbox-gl-draw.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="css/mapbox-gl-draw.css" />
|
|
<script>
|
|
|
|
function createCharts(crossFilter, con, tableName) {
|
|
var w = document.documentElement.clientWidth - 30;
|
|
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 200;
|
|
var countGroup = crossFilter.groupAll();
|
|
var dataCount = dc.dataCount(".data-count")
|
|
.dimension(crossFilter)
|
|
.group(countGroup);
|
|
|
|
/*----------------BACKEND RENDERED POINT MAP WITH LASSO TOOL EXAMPLE-----------------------*/
|
|
var langDomain = ['en', 'pt', 'es', 'in', 'und', 'ja', 'tr', 'fr', 'tl', 'ru', 'ar', 'th', 'it', 'nl', 'sv', 'ht', 'de', 'et', 'pl', 'sl', 'ko', 'fi', 'lv', 'sk', 'uk', 'da', 'zh', 'ro', 'no', 'cy', 'iw', 'hu', 'bg', 'lt', 'bs', 'vi', 'el', 'is', 'hi', 'hr', 'fa', 'ur', 'ne', 'ta', 'sr', 'bn', 'si', 'ml', 'hy', 'lo', 'iu', 'ka', 'ps', 'te', 'pa', 'am', 'kn', 'chr', 'my', 'gu', 'ckb', 'km', 'ug', 'sd', 'bo', 'dv'];
|
|
var langOriginColors = ["#27aeef", "#ea5545", "#87bc45", "#b33dc6", "#f46a9b", "#ede15b", "#bdcf32", "#ef9b20", "#4db6ac", "#edbf33", "#7c4dff"]
|
|
var langColors = [];
|
|
var pointMapDim = crossFilter.dimension(null).projectOn(["conv_4326_900913_x(lon) as x", "conv_4326_900913_y(lat) as y", "lang as color", "followers as size"]);
|
|
var xDim = crossFilter.dimension("lon");
|
|
var yDim = crossFilter.dimension("lat");
|
|
var parent = document.getElementById("chart1-example");
|
|
var rScale = d3.scale.linear().domain([0,5000]).range([2,12]);
|
|
mapLangColors(40);
|
|
|
|
var pointMapChart = dc.bubbleRasterChart(parent, true)
|
|
.con(con)
|
|
.height(h/1.5)
|
|
.width(w)
|
|
.dimension(pointMapDim)
|
|
.group(pointMapDim)
|
|
.tableName(tableName)
|
|
.mapUpdateInterval(750)
|
|
.cap(500000)
|
|
.sampling(true)
|
|
.dynamicR(d3.scale.sqrt().domain([20000,0]).range([1.0,7.0]).clamp(true))
|
|
.othersGrouper(false)
|
|
.xDim(xDim)
|
|
.yDim(yDim)
|
|
.colorBy({type: 'STR', value: 'lang', domain: langDomain})
|
|
.r(rScale)
|
|
.defaultColor("#80DEEA")
|
|
.colors(d3.scale.ordinal().domain(langDomain).range(langColors))
|
|
.mapStyle('json/dark-v8.json')
|
|
.popupSearchRadius(2)
|
|
.popupColumns(['tweet_text', 'sender_name', 'tweet_time', 'lang', 'origin', 'followers'])
|
|
|
|
pointMapChart.init().then((chart) => {
|
|
/*--------------------------LASSO TOOL DRAW CONTROL------------------------------*/
|
|
/* Here enable the lasso tool draw control and pass in a coordinate filter */
|
|
pointMapChart
|
|
.addDrawControl()
|
|
.coordFilter(crossFilter.filter())
|
|
dc.renderAllAsync()
|
|
})
|
|
|
|
/*--------------------------RESIZE EVENT------------------------------*/
|
|
/* Here we listen to any resizes of the main window. On resize we resize the corresponding widgets and call dc.renderAll() to refresh everything */
|
|
|
|
window.addEventListener("resize", _.debounce(reSizeAll, 500));
|
|
|
|
function reSizeAll(){
|
|
var w = document.documentElement.clientWidth - 30;
|
|
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 200;
|
|
|
|
pointMapChart.map().resize();
|
|
pointMapChart.isNodeAnimate = false;
|
|
pointMapChart
|
|
.width(w)
|
|
.height(h/1.5)
|
|
.render();
|
|
|
|
dc.renderAllAsync();
|
|
}
|
|
|
|
function mapLangColors(n) {
|
|
langDomain = langDomain.slice(0, n);
|
|
for (var i = 0; i < langDomain.length; i++) {
|
|
langColors.push(langOriginColors[i%langOriginColors.length]);
|
|
}
|
|
}
|
|
}
|
|
|
|
function init() {
|
|
var con = new MapdCon()
|
|
.logging(true)
|
|
.protocol("http")
|
|
.host("kali.mapd.com")
|
|
.port("9092")
|
|
.dbName("mapd")
|
|
.user("mapd")
|
|
.password("HyperInteractive")
|
|
.connect(function(error, con) {
|
|
var tableName = 'tweets_nov_feb';
|
|
var crossFilter = crossfilter.crossfilter(con, tableName)
|
|
.then(function(cf) {
|
|
createCharts(cf, con, tableName)
|
|
})
|
|
;
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', init, false);
|
|
</script>
|
|
</body>
|
|
</html>
|