Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar

ramiroaznar/index.html

Last active June 28, 2016 09:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ramiroaznar/1375bc74fe43eb74ed3c8c4209b46cc6 to your computer and use it in GitHub Desktop.
Save ramiroaznar/1375bc74fe43eb74ed3c8c4209b46cc6 to your computer and use it in GitHub Desktop.
Download ZIP
Dashboard | ServiGIS Tuna
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Deep-Insights.js | Tuna ServiGIS</title>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<meta name=viewport content="width=device-width initial-scale=1">
<link rel="stylesheet" href="http://libs.cartocdn.com/di.js/v0/themes/css/deep-insights.css" />
<script src=" http://libs.cartocdn.com/di.js/v0/deep-insights.uncompressed.js"></script>
<style type="text/css">
html, body {
position:relative;
height: 100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="dashboard"></div>
​
<script>
window.onload = function() {
// set vizJson - you need to change v2 to v3
var vizJSON = "https://ramiroaznar.cartodb.com/api/v3/viz/c3719428-3c6c-11e6-b75c-0e98b61680bf/viz.json";
// create dashboard
cartodb.deepInsights.createDashboard('#dashboard', vizJSON, {
no_cdn: false,
cartodb_logo: false
},function(err,dashboard){
// get map object
var map = dashboard.getMap();
// get layer
var layer1 = map.getLayer(1);
// set widget parameters
var cat = {
"type": "category",
"title": "Species Code",
"column": "speciescode"
};
var sum = {
"type": "formula",
"title": "Total Length",
"column": "len",
"operation": "sum"
};
var avg = {
"type": "formula",
"title": "Average Length",
"column": "len",
"operation": "avg"
};
var histo = {
"type": "histogram",
"title": "Tuna Length",
"column": "len",
"bins": 20
};
// add widgets to the dashboard
dashboard.createFormulaWidget(avg,layer1);
dashboard.createFormulaWidget(sum,layer1);
dashboard.createHistogramWidget(histo,layer1);
dashboard.createCategoryWidget(cat,layer1);
});
}
</script>
</body>
</html>
Raw
query.sql
SELECT * FROM historical_tagged_skj
UNION ALL
SELECT * FROM historical_tagged_bet
UNION ALL
SELECT * FROM historical_tagged_yft
Raw
style.css
/** category visualization */
#layer {
marker-width: 1;
marker-fill-opacity: 0.7;
marker-allow-overlap: true;
marker-line-width: 0;
marker-line-color: #FFFFFF;
marker-line-opacity: 1;
}
#historical_tagged_skj[speciescode="BET"] {
marker-fill: #e58606;
}
#historical_tagged_skj[speciescode="SKJ"] {
marker-fill: #99c945;
}
#historical_tagged_skj[speciescode="YFT"] {
marker-fill: #cc2d7f;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment