Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar

ramiroaznar/index.html

Last active June 20, 2016 12:46
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/bf9825ae2c7c93fda7d17fa97f20a397 to your computer and use it in GitHub Desktop.
Save ramiroaznar/bf9825ae2c7c93fda7d17fa97f20a397 to your computer and use it in GitHub Desktop.
Download ZIP
DI Dashboard | World Glucose Measures
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Deep-Insights.js | Glucose Measures</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>
<div class='cartodb-legend custom' id='legend' style='top: 20px; bottom: auto;'>
<div style='display: flex; justify-content: space-between;'>
<div class="CDB-Text CDB-Size-small">100</div>
<div style="flex-grow: 99;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div class="CDB-Text CDB-Size-small">500</div>
<br>
</div>
<div style='display: flex; justify-content: space-around;align-items:center'>
<div style="width:6px; height:6px; background-image:url('https://upload.wikimedia.org/wikipedia/commons/4/43/Blue_circle_for_diabetes.svg'); background-size: cover;"></div>
<div style="width:8px; height:8px; background-image:url('https://upload.wikimedia.org/wikipedia/commons/4/43/Blue_circle_for_diabetes.svg'); background-size: cover;"></div>
<div style="width:10px; height:10px; background-image:url('https://upload.wikimedia.org/wikipedia/commons/4/43/Blue_circle_for_diabetes.svg'); background-size: cover;"></div>
<div style="width:12px; height:12px; background-image:url('https://upload.wikimedia.org/wikipedia/commons/4/43/Blue_circle_for_diabetes.svg'); background-size: cover;"></div>
<div style="width:14px; height:14px; background-image:url('https://upload.wikimedia.org/wikipedia/commons/4/43/Blue_circle_for_diabetes.svg'); background-size: cover;"></div>
<div style="width:16px; height:16px; background-image:url('https://upload.wikimedia.org/wikipedia/commons/4/43/Blue_circle_for_diabetes.svg'); background-size: cover;"></div>
</div>
<div class="CDB-Text CDB-Size-small">mg/dL</div>
</div>
​
<script>
window.onload = function() {
// to make the deep insights work, use v3 instead of v2 (v2 is the original url)
var vizJSON = "https://team.cartodb.com/u/ramirocartodb/api/v3/viz/78bd482c-298a-11e6-ab87-0ecfd53eb7d3/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();
var cartoLegend = document.querySelector('#legend');
vis.el.appendChild(cartoLegend);
// set widgests parameters
var avg_glu = {
"type": "formula",
"title": "Average Glucose (mg/dL)",
"column": "mgdl",
"operation": "avg"
};
var histo_glu = {
"type": "histogram",
"title": "Glucose (mg/dL)",
"column": "mgdl",
"bins": 10
};
var histo_dow = {
"type": "histogram",
"title": "Day of week",
"column": "dow_num",
"bins": 7
};
var histo_hour = {
"type": "histogram",
"title": "Hour of the day",
"column": "hour",
"bins": 24
};
var time_glu = {
"title": "Time Serie",
"column": "postedtime",
"bins": 30*24
};
// add widgets to the layer
dashboard.createFormulaWidget(avg_glu,map.getLayer(1));
dashboard.createHistogramWidget(histo_glu,map.getLayer(1));
dashboard.createHistogramWidget(histo_hour,map.getLayer(1));
dashboard.createHistogramWidget(histo_dow,map.getLayer(1));
dashboard.createTimeSeriesWidget(time_glu,map.getLayer(1));
});
}
</script>
</body>
</html>
Raw
query.sql
WITH
aux AS (
select
tw.cartodb_id,
tw.the_geom_webmercator,
unnest(regexp_matches(body, E'([1234567890]{3}) mg', 'g'))::numeric as mgdl,
postedtime,
extract('HOUR' from (postedtime + interval '1h' *tz.zone )) as hour,
extract('MINUTES' from (postedtime + interval '1h' *tz.zone)) as minutes,
to_char(postedtime, 'day') as dow,
extract(dow from (postedtime + interval '1h'*tz.zone )) + 1 as dow_num,
tz.zone
from
twitter_mgdl tw LEFT JOIN ne_10m_time_zones tz on st_within(tw.the_geom, tz.the_geom)
)
select
*,
CASE
WHEN minutes > 30 THEN hour + 1 ELSE hour end as hour,
CASE
WHEN mgdl < 60 THEN 'hypo'
WHEN mgdl >= 60 AND mgdl <= 200 THEN 'in range'
WHEN mgdl > 200 THEN 'hyper'
END control
from
aux
Raw
style.css
/** torque visualization */
Map {
-torque-frame-count:256;
-torque-animation-duration:30;
-torque-time-attribute:"postedtime";
-torque-aggregation-function:"avg(mgdl)";
-torque-resolution:1;
-torque-data-aggregation:cumulative;
}
#twitter_mgdl{
comp-op: source-over;
marker-fill-opacity: 0.9;
marker-line-color: #FFF;
marker-line-width: 0;
marker-line-opacity: 1;
marker-type: ellipse;
marker-width: 6;
marker-fill: #0F3B82;
marker-file: url(https://upload.wikimedia.org/wikipedia/commons/4/43/Blue_circle_for_diabetes.svg);
}
#twitter_mgdl[value<100] {
marker-width:6;
}
#twitter_mgdl[value>=100] {
marker-width:8;
}
#twitter_mgdl[value>=120] {
marker-width:10;
}
#twitter_mgdl[value>=180] {
marker-width:12;
}
#twitter_mgdl[value>=240] {
marker-width:14;
}
#twitter_mgdl[value>=300] {
marker-width:16;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment