Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar
Last active June 1, 2016 13:15
Show Gist options
  • Save ramiroaznar/9cf1f56b4af28e74df27830be8df67f1 to your computer and use it in GitHub Desktop.
Save ramiroaznar/9cf1f56b4af28e74df27830be8df67f1 to your computer and use it in GitHub Desktop.
DeepInsights.js + Turbo-Carto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Deep-Insights.js | Turbo-Carto</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>
<style type="cartocss/text" id="style">
/** Turbo-Carto Style */
#populated_places {
marker-fill-opacity: 0.8;
marker-line-color: #FFF;
marker-line-width: 1;
marker-line-opacity: 1;
marker-allow-overlap: true;
marker-width: ramp([pop_max], 7, 12, quantiles);
marker-fill: ramp([pop_max], colorbrewer(Greens), jenks);
}
</style>
<script type="text/SQL" id="query">
SELECT *
FROM populated_places
</script>
<script>
window.onload = function() {
// set vizJson
var vizJSON = "https://team.cartodb.com/u/ramirocartodb/api/v3/viz/1e045d98-27f1-11e6-a059-0e787de82d45/viz.json";
// set cartocss & sql variables
var style = cdb.$("#style").text();
var query = cdb.$("#query").text();
// create dashboard
cartodb.deepInsights.createDashboard('#dashboard', vizJSON, {
no_cdn: false,
cartodb_logo: false
},function(err,dashboard){
// get map object
var map = dashboard.getMap();
// set cartocss & sql
map.getLayer(1).set('cartocss', style);
map.getLayer(1).set('sql', query);
// set widget parameters
var sum = {
"type": "formula",
"title": "Total Population",
"column": "pop_max",
"operation": "sum"
};
var avg = {
"type": "formula",
"title": "Average Population",
"column": "pop_max",
"operation": "avg"
};
var histo = {
"type": "histogram",
"title": "Population Histogram",
"column": "pop_max",
"bins": 10
};
var country = {
"type": "category",
"title": "Country Category",
"column": "adm0name"
};
var region = {
"type": "category",
"title": "Region Category",
"column": "adm1name"
};
var city = {
"type": "category",
"title": "City Category",
"column": "name"
};
// add widgets to the dashboard
dashboard.createFormulaWidget(sum,map.getLayer(1));
dashboard.createFormulaWidget(avg,map.getLayer(1));
dashboard.createHistogramWidget(histo,map.getLayer(1));
dashboard.createCategoryWidget(country,map.getLayer(1));
dashboard.createCategoryWidget(region,map.getLayer(1));
dashboard.createCategoryWidget(city,map.getLayer(1));
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment