Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar

ramiroaznar/index.html

Last active July 6, 2016 08:18
Show Gist options
  • Save ramiroaznar/c2a7c25644bd1f32da12c4520c9296fd to your computer and use it in GitHub Desktop.
Save ramiroaznar/c2a7c25644bd1f32da12c4520c9296fd to your computer and use it in GitHub Desktop.
Download ZIP
How to add and remove widgets in a CartoDB dashboard
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to add and remove widgets in a CartoDB dashboard</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 style="top: 40px;bottom: auto;position: absolute;z-index: 100;left: 105px;">
<button class="CDB-Button CDB-Button--primary CDB-Button--big" id="add">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">Add Widget</span>
</button>
<button class="CDB-Button CDB-Button--primary CDB-Button--big" id="remove">
<span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">Remove Widget</span>
</button>
</div>
<div id="dashboard"></div>
​
<script>
window.onload = function() {
// set vizJson
var vizJSON = "https://team.cartodb.com/u/ramirocartodb/api/v3/viz/1740ac74-384e-11e6-91fe-0e31c9be1b51/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();
// 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 city = {
"type": "category",
"title": "City Category",
"column": "name"
};
var country = {
"type": "category",
"title": "Country Category",
"column": "adm0name"
};
// add widgets to the dashboard
var sumWidget = dashboard.createFormulaWidget(sum,map.getLayer(1));
var avgWidget = dashboard.createFormulaWidget(avg,map.getLayer(1));
var histoWidget = dashboard.createHistogramWidget(histo,map.getLayer(1));
var countryWidget = dashboard.createCategoryWidget(country,map.getLayer(1));
// add & remove city widget
cdb.$('#add').click(function() {
var cityWidget = dashboard.createCategoryWidget(city,map.getLayer(1));
cdb.$('#remove').click(function() {
cityWidget.remove();
});
});
});
}
</script>
</body>
</html>
Raw
style.css
/** bubble visualization */
#popultaed_places{
marker-fill-opacity: 0.6;
marker-line-color: #3E7BB6;
marker-line-width: 0.20;
marker-line-opacity: 0;
marker-placement: point;
marker-multi-policy: largest;
marker-type: ellipse;
marker-fill: #FFFFFF;
marker-allow-overlap: true;
marker-clip: false; }
#populated_places [ pop_max <= 35676000] {
marker-width: 5.0;
}
#populated_places [ pop_max <= 674394] {
marker-width: 4.6;
}
#populated_places [ pop_max <= 299987.5] {
marker-width: 4.1;
}
#populated_places [ pop_max <= 175972.5] {
marker-width: 3.7;
}
#populated_places [ pop_max <= 111015.5] {
marker-width: 3.2;
}
#populated_places [ pop_max <= 72387.5] {
marker-width: 2.8;
}
#populated_places [ pop_max <= 47570.5] {
marker-width: 2.3;
}
#populated_places [ pop_max <= 29588] {
marker-width: 1.9;
}
#populated_places [ pop_max <= 15534] {
marker-width: 1.4;
}
#populated_places [ pop_max <= 5500] {
marker-width: 1.0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment