Skip to content

Instantly share code, notes, and snippets.

@bewest

bewest/README.md

Forked from mbostock/.block
Last active December 14, 2015 10:59
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bewest/5075497 to your computer and use it in GitHub Desktop.
Save bewest/5075497 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

d3 glucose heatmap over hours of day

D3 implementation of ~@jebecks excellent glucose heatmaps in R.

Raw
csv2keyval.py
#!/usr/bin/python
import argparse
import json
"""
csv2keyval - reformat csv histogram into json for d3 heatmap
"""
if __name__ == '__main__':
parser = argparse.ArgumentParser( )
parser.add_argument('csv', type=argparse.FileType('r'),
help="CSV File to re-organize")
opts = parser.parse_args( )
header = opts.csv.readline( ).strip( ).split(',')
glucose, keys = header[0], header[1:]
result = [ ]
datum = { }
for line in opts.csv.xreadlines( ):
line = line.strip( ).split(',')
glucose, values = line[0], line[1:]
datum = { 'key': int(glucose), 'values': map(int, values) }
result.append(datum)
print json.dumps(result, indent=2)
#####
# EOF
Raw
day_heat.json
{
"130": {
"0": 210,
"1": 210,
"2": 239,
"3": 143,
"4": 158,
"5": 155,
"6": 281
},
"260": {
"0": 10,
"1": 6,
"2": 0,
"3": 6,
"4": 0,
"5": 4,
"6": 5
},
"390": {
"0": 0,
"1": 0,
"2": 0,
"3": 0,
"4": 0,
"5": 0,
"6": 0
},
"140": {
"0": 205,
"1": 188,
"2": 194,
"3": 84,
"4": 126,
"5": 97,
"6": 194
},
"270": {
"0": 11,
"1": 0,
"2": 0,
"3": 5,
"4": 0,
"5": 4,
"6": 2
},
"400": {
"0": 0,
"1": 0,
"2": 0,
"3": 0,
"4": 0,
"5": 0,
"6": 0
},
"150": {
"0": 108,
"1": 146,
"2": 192,
"3": 94,
"4": 102,
"5": 89,
"6": 153
},
"280": {
"0": 3,
"1": 0,
"2": 0,
"3": 4,
"4": 0,
"5": 2,
"6": 2
},
"410": {
"0": 0,
"1": 0,
"2": 0,
"3": 0,
"4": 0,
"5": 0,
"6": 0
},
"160": {
"0": 111,
"1": 83,
"2": 107,
"3": 152,
"4": 100,
"5": 72,
"6": 113
},
"290": {
"0": 3,
"1": 0,
"2": 0,
"3": 9,
"4": 0,
"5": 5,
"6": 3
},
"170": {
"0": 82,
"1": 62,
"2": 78,
"3": 72,
"4": 47,
"5": 55,
"6": 90
},
"300": {
"0": 1,
"1": 0,
"2": 0,
"3": 12,
"4": 0,
"5": 10,
"6": 5
},
"50": {
"0": 16,
"1": 84,
"2": 52,
"3": 23,
"4": 24,
"5": 21,
"6": 11
},
"180": {
"0": 56,
"1": 56,
"2": 78,
"3": 71,
"4": 27,
"5": 52,
"6": 80
},
"310": {
"0": 0,
"1": 0,
"2": 0,
"3": 11,
"4": 0,
"5": 5,
"6": 3
},
"60": {
"0": 38,
"1": 41,
"2": 55,
"3": 90,
"4": 95,
"5": 104,
"6": 46
},
"190": {
"0": 34,
"1": 48,
"2": 51,
"3": 77,
"4": 22,
"5": 46,
"6": 65
},
"320": {
"0": 0,
"1": 0,
"2": 0,
"3": 10,
"4": 0,
"5": 0,
"6": 0
},
"70": {
"0": 61,
"1": 102,
"2": 73,
"3": 155,
"4": 231,
"5": 271,
"6": 111
},
"200": {
"0": 25,
"1": 46,
"2": 32,
"3": 37,
"4": 21,
"5": 32,
"6": 62
},
"330": {
"0": 0,
"1": 0,
"2": 0,
"3": 5,
"4": 0,
"5": 0,
"6": 0
},
"80": {
"0": 232,
"1": 249,
"2": 142,
"3": 236,
"4": 333,
"5": 413,
"6": 279
},
"210": {
"0": 11,
"1": 64,
"2": 15,
"3": 28,
"4": 19,
"5": 22,
"6": 55
},
"340": {
"0": 0,
"1": 0,
"2": 0,
"3": 0,
"4": 0,
"5": 0,
"6": 0
},
"90": {
"0": 307,
"1": 209,
"2": 191,
"3": 357,
"4": 304,
"5": 322,
"6": 235
},
"220": {
"0": 8,
"1": 40,
"2": 9,
"3": 15,
"4": 17,
"5": 5,
"6": 40
},
"350": {
"0": 0,
"1": 0,
"2": 0,
"3": 0,
"4": 0,
"5": 0,
"6": 0
},
"100": {
"0": 262,
"1": 194,
"2": 229,
"3": 312,
"4": 415,
"5": 249,
"6": 342
},
"230": {
"0": 5,
"1": 24,
"2": 4,
"3": 22,
"4": 32,
"5": 6,
"6": 30
},
"360": {
"0": 0,
"1": 0,
"2": 0,
"3": 0,
"4": 0,
"5": 0,
"6": 0
},
"110": {
"0": 333,
"1": 223,
"2": 282,
"3": 285,
"4": 306,
"5": 262,
"6": 218
},
"240": {
"0": 6,
"1": 6,
"2": 0,
"3": 10,
"4": 17,
"5": 3,
"6": 14
},
"370": {
"0": 0,
"1": 0,
"2": 0,
"3": 0,
"4": 0,
"5": 0,
"6": 0
},
"120": {
"0": 272,
"1": 174,
"2": 279,
"3": 196,
"4": 242,
"5": 234,
"6": 222
},
"250": {
"0": 10,
"1": 5,
"2": 0,
"3": 17,
"4": 0,
"5": 6,
"6": 18
},
"380": {
"0": 0,
"1": 0,
"2": 0,
"3": 0,
"4": 0,
"5": 0,
"6": 0
}
}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<H1>d3 Glucose heatmap over hours of day</H1>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
//var x = d3.time.scale()
var x = d3.scale.linear( )
.domain([0, 24])
.rangeRound([0, width])
;
var y = d3.scale.linear()
.domain([0, 420])
.rangeRound([height, 0]);
var z = d3.scale.linear()
.domain([0, 160])
.range(["white", "purple"])
.interpolate(d3.interpolateLab);
var formatTime = d3.time.format("%I %p"),
formatHour = function (d) {
if (d == 12) return "noon";
if (d == 24 || d == 0) return "midnight";
return formatTime(new Date(2013, 2, 9, d, 00));
};
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(formatHour)
;
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format("d"));
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("ipancreas_time_heatmap.json", function(error, data) {
var glucose = svg.selectAll(".glucose")
.data(data)
.enter( ).append("g")
.attr("class", "glucose")
;
glucose.selectAll(".bin")
.data(function (d) { return d.values; })
.enter( ).append("rect")
.attr("class", "bin")
.attr("x", function (d, i) { return x(i); })
.attr("width", function (d, i) { return x(i+1) - x(i); })
.style("fill", function(d) { return z(d); });
glucose.each(function (d) {
d3.select(this).selectAll(".bin")
.attr("y", y(d.key) )
.attr("height", 11 );
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
</script>
Raw
ipancreas_day_heatmap.csv
Monday Tuesday Wednesday Thursday Friday Saturday Sunday
50 16 84 52 23 24 21 11
60 38 41 55 90 95 104 46
70 61 102 73 155 231 271 111
80 232 249 142 236 333 413 279
90 307 209 191 357 304 322 235
100 262 194 229 312 415 249 342
110 333 223 282 285 306 262 218
120 272 174 279 196 242 234 222
130 210 210 239 143 158 155 281
140 205 188 194 84 126 97 194
150 108 146 192 94 102 89 153
160 111 83 107 152 100 72 113
170 82 62 78 72 47 55 90
180 56 56 78 71 27 52 80
190 34 48 51 77 22 46 65
200 25 46 32 37 21 32 62
210 11 64 15 28 19 22 55
220 8 40 9 15 17 5 40
230 5 24 4 22 32 6 30
240 6 6 0 10 17 3 14
250 10 5 0 17 0 6 18
260 10 6 0 6 0 4 5
270 11 0 0 5 0 4 2
280 3 0 0 4 0 2 2
290 3 0 0 9 0 5 3
300 1 0 0 12 0 10 5
310 0 0 0 11 0 5 3
320 0 0 0 10 0 0 0
330 0 0 0 5 0 0 0
340 0 0 0 0 0 0 0
350 0 0 0 0 0 0 0
360 0 0 0 0 0 0 0
370 0 0 0 0 0 0 0
380 0 0 0 0 0 0 0
390 0 0 0 0 0 0 0
400 0 0 0 0 0 0 0
410 0 0 0 0 0 0 0
Raw
ipancreas_time_heatmap.csv
glucose 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
50 6 0 10 12 5 20 39 26 37 21 7 4 0 2 0 7 1 1 12 3 1 5 4 8
60 4 5 13 3 29 49 54 42 50 37 10 14 13 13 15 15 9 12 19 8 17 19 10 9
70 18 39 61 39 42 41 54 99 96 89 89 55 46 36 17 5 13 28 22 22 24 27 31 11
80 33 69 47 59 112 108 128 150 140 157 125 115 62 44 48 42 18 36 35 66 62 90 89 49
90 82 76 59 109 58 102 106 98 96 137 98 60 54 46 66 65 45 73 81 59 77 112 74 92
100 76 37 64 79 102 83 93 68 81 83 98 91 82 96 74 75 102 107 81 109 100 78 65 79
110 70 40 47 90 57 72 60 93 89 65 91 65 85 86 98 92 114 111 113 83 75 60 85 68
120 68 42 57 39 52 76 62 40 45 32 35 66 73 98 96 108 125 96 82 72 57 63 65 70
130 64 72 52 49 66 34 30 44 36 40 32 66 68 99 104 92 100 60 53 40 50 47 55 43
140 49 55 19 40 32 18 26 20 35 32 49 56 49 77 56 67 72 69 53 55 47 37 35 40
150 36 41 68 20 26 31 27 15 10 13 29 57 80 41 51 54 44 41 30 45 44 33 14 34
160 21 29 52 22 20 25 17 11 12 24 24 18 53 24 44 43 47 43 29 35 45 42 17 41
170 28 44 37 26 22 28 7 11 8 15 12 8 16 13 29 22 10 10 20 29 29 21 15 26
180 32 39 29 38 17 18 7 7 8 6 14 7 14 22 6 9 4 9 21 17 32 23 25 16
190 40 28 29 28 18 7 10 4 11 3 2 12 4 14 3 12 1 5 12 27 17 16 14 26
200 18 26 20 42 17 0 0 4 1 0 5 8 2 3 1 4 0 4 11 22 11 17 25 14
210 11 15 16 18 11 2 0 5 0 0 12 5 3 3 2 3 0 2 25 10 12 9 25 25
220 9 14 16 12 11 2 0 6 0 0 0 1 1 4 4 4 0 0 10 8 6 7 13 6
230 5 3 13 3 16 8 10 4 0 0 0 0 6 5 7 1 3 0 4 10 8 11 5 1
240 2 5 5 2 10 8 4 0 0 0 0 0 0 0 4 2 4 0 1 2 3 1 1 2
250 0 6 4 5 0 1 5 0 0 0 0 0 0 0 4 5 3 0 7 1 5 1 9 0
260 0 5 4 1 0 1 4 0 0 0 0 0 0 0 0 3 1 5 3 2 2 0 0 0
270 0 0 0 1 0 1 4 0 0 0 0 0 0 0 0 1 2 8 1 3 0 1 0 0
280 0 0 0 3 1 1 0 0 0 0 0 0 0 0 0 0 1 1 0 3 0 0 1 0
290 0 0 0 2 6 3 0 0 0 0 0 0 0 0 0 0 4 1 3 0 0 0 0 1
300 0 0 0 2 7 4 0 0 0 0 0 0 0 0 0 0 6 4 1 0 0 0 1 3
310 0 0 0 0 5 4 0 0 0 0 0 0 0 0 0 0 0 5 0 0 0 0 3 2
320 0 0 0 0 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 5
330 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4 1
340 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
350 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
360 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
370 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
380 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
390 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
400 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
410 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Raw
ipancreas_time_heatmap.json
[
{
"values": [
6,
0,
10,
12,
5,
20,
39,
26,
37,
21,
7,
4,
0,
2,
0,
7,
1,
1,
12,
3,
1,
5,
4,
8
],
"key": 50
},
{
"values": [
4,
5,
13,
3,
29,
49,
54,
42,
50,
37,
10,
14,
13,
13,
15,
15,
9,
12,
19,
8,
17,
19,
10,
9
],
"key": 60
},
{
"values": [
18,
39,
61,
39,
42,
41,
54,
99,
96,
89,
89,
55,
46,
36,
17,
5,
13,
28,
22,
22,
24,
27,
31,
11
],
"key": 70
},
{
"values": [
33,
69,
47,
59,
112,
108,
128,
150,
140,
157,
125,
115,
62,
44,
48,
42,
18,
36,
35,
66,
62,
90,
89,
49
],
"key": 80
},
{
"values": [
82,
76,
59,
109,
58,
102,
106,
98,
96,
137,
98,
60,
54,
46,
66,
65,
45,
73,
81,
59,
77,
112,
74,
92
],
"key": 90
},
{
"values": [
76,
37,
64,
79,
102,
83,
93,
68,
81,
83,
98,
91,
82,
96,
74,
75,
102,
107,
81,
109,
100,
78,
65,
79
],
"key": 100
},
{
"values": [
70,
40,
47,
90,
57,
72,
60,
93,
89,
65,
91,
65,
85,
86,
98,
92,
114,
111,
113,
83,
75,
60,
85,
68
],
"key": 110
},
{
"values": [
68,
42,
57,
39,
52,
76,
62,
40,
45,
32,
35,
66,
73,
98,
96,
108,
125,
96,
82,
72,
57,
63,
65,
70
],
"key": 120
},
{
"values": [
64,
72,
52,
49,
66,
34,
30,
44,
36,
40,
32,
66,
68,
99,
104,
92,
100,
60,
53,
40,
50,
47,
55,
43
],
"key": 130
},
{
"values": [
49,
55,
19,
40,
32,
18,
26,
20,
35,
32,
49,
56,
49,
77,
56,
67,
72,
69,
53,
55,
47,
37,
35,
40
],
"key": 140
},
{
"values": [
36,
41,
68,
20,
26,
31,
27,
15,
10,
13,
29,
57,
80,
41,
51,
54,
44,
41,
30,
45,
44,
33,
14,
34
],
"key": 150
},
{
"values": [
21,
29,
52,
22,
20,
25,
17,
11,
12,
24,
24,
18,
53,
24,
44,
43,
47,
43,
29,
35,
45,
42,
17,
41
],
"key": 160
},
{
"values": [
28,
44,
37,
26,
22,
28,
7,
11,
8,
15,
12,
8,
16,
13,
29,
22,
10,
10,
20,
29,
29,
21,
15,
26
],
"key": 170
},
{
"values": [
32,
39,
29,
38,
17,
18,
7,
7,
8,
6,
14,
7,
14,
22,
6,
9,
4,
9,
21,
17,
32,
23,
25,
16
],
"key": 180
},
{
"values": [
40,
28,
29,
28,
18,
7,
10,
4,
11,
3,
2,
12,
4,
14,
3,
12,
1,
5,
12,
27,
17,
16,
14,
26
],
"key": 190
},
{
"values": [
18,
26,
20,
42,
17,
0,
0,
4,
1,
0,
5,
8,
2,
3,
1,
4,
0,
4,
11,
22,
11,
17,
25,
14
],
"key": 200
},
{
"values": [
11,
15,
16,
18,
11,
2,
0,
5,
0,
0,
12,
5,
3,
3,
2,
3,
0,
2,
25,
10,
12,
9,
25,
25
],
"key": 210
},
{
"values": [
9,
14,
16,
12,
11,
2,
0,
6,
0,
0,
0,
1,
1,
4,
4,
4,
0,
0,
10,
8,
6,
7,
13,
6
],
"key": 220
},
{
"values": [
5,
3,
13,
3,
16,
8,
10,
4,
0,
0,
0,
0,
6,
5,
7,
1,
3,
0,
4,
10,
8,
11,
5,
1
],
"key": 230
},
{
"values": [
2,
5,
5,
2,
10,
8,
4,
0,
0,
0,
0,
0,
0,
0,
4,
2,
4,
0,
1,
2,
3,
1,
1,
2
],
"key": 240
},
{
"values": [
0,
6,
4,
5,
0,
1,
5,
0,
0,
0,
0,
0,
0,
0,
4,
5,
3,
0,
7,
1,
5,
1,
9,
0
],
"key": 250
},
{
"values": [
0,
5,
4,
1,
0,
1,
4,
0,
0,
0,
0,
0,
0,
0,
0,
3,
1,
5,
3,
2,
2,
0,
0,
0
],
"key": 260
},
{
"values": [
0,
0,
0,
1,
0,
1,
4,
0,
0,
0,
0,
0,
0,
0,
0,
1,
2,
8,
1,
3,
0,
1,
0,
0
],
"key": 270
},
{
"values": [
0,
0,
0,
3,
1,
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1,
1,
0,
3,
0,
0,
1,
0
],
"key": 280
},
{
"values": [
0,
0,
0,
2,
6,
3,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
4,
1,
3,
0,
0,
0,
0,
1
],
"key": 290
},
{
"values": [
0,
0,
0,
2,
7,
4,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
6,
4,
1,
0,
0,
0,
1,
3
],
"key": 300
},
{
"values": [
0,
0,
0,
0,
5,
4,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
5,
0,
0,
0,
0,
3,
2
],
"key": 310
},
{
"values": [
0,
0,
0,
0,
2,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
3,
5
],
"key": 320
},
{
"values": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
4,
1
],
"key": 330
},
{
"values": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"key": 340
},
{
"values": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"key": 350
},
{
"values": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"key": 360
},
{
"values": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"key": 370
},
{
"values": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"key": 380
},
{
"values": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"key": 390
},
{
"values": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"key": 400
},
{
"values": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"key": 410
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment