Last active
June 17, 2016 12:48
-
-
Save oriolbx/dd5fdbd956a965c5ade9d38ebcae90c4 to your computer and use it in GitHub Desktop.
deep-insights.js: change widget styles
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <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; | |
| } | |
| /* general styles for the widgets */ | |
| .CDB-Widget{ | |
| background-color: #000; | |
| color:#FFF; | |
| border-radius: 25px; | |
| } | |
| /* styles for the bars of the widgets */ | |
| .CDB-Chart-bar { | |
| fill: #ff0000 !important; | |
| } | |
| /* styles for the text of the widgets */ | |
| .CDB-Text{ | |
| text-align: center!important; | |
| font-size: 14px; | |
| font-family: "Times New Roman", Georgia, Serif; | |
| } | |
| /* styles for the sidebar that have the widgets */ | |
| .CDB-Widget-canvasInner{ | |
| background-color: #E6E6FA; | |
| border-radius: 25px; | |
| opacity: 0.8; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="dashboard"></div> | |
| <script> | |
| window.onload = function() { | |
| // to make the deep insights work, use v3 instead of v2 in the viz.json url | |
| var vizJSON = "https://team.cartodb.com/u/oboix/api/v3/viz/35e4f89e-1204-11e6-beab-0e674067d321/viz.json"; | |
| cartodb.deepInsights.createDashboard('#dashboard', vizJSON, { | |
| no_cdn: false, | |
| cartodb_logo: false | |
| },function(err,dashboard){ | |
| if (err) { | |
| console.log('there was an error generating the dashboard'); | |
| return; | |
| } | |
| // update map layers | |
| var map = dashboard.getMap(); | |
| var params = { | |
| "type": "histogram", | |
| "title": "Minimum population", | |
| "column": "pop_min", | |
| "operation": "avg", | |
| "bins": 10 | |
| }; | |
| var params1 = { | |
| "type":"category", | |
| "title":"Countries", | |
| "column": "adm0_a3" | |
| } | |
| // histogram widget | |
| dashboard.createHistogramWidget(params,map.getLayer(1)) | |
| // category widget | |
| dashboard.createCategoryWidget(params1, map.getLayer(1)) | |
| }) | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment