Skip to content

Instantly share code, notes, and snippets.

@bewest

bewest/README.markdown

Forked from jasondavies/index.html
Last active January 28, 2019 17:35
Show Gist options
  • Save bewest/4241973 to your computer and use it in GitHub Desktop.
Save bewest/4241973 to your computer and use it in GitHub Desktop.
Download ZIP
D3.js glucose levels
Raw
README.markdown

Visualize glucose levels using d3.js

Demo http://bl.ocks.org/4241973

src https://gist.github.com/4241973

Dear world,

Once upon a time I sought to have real-time glucose monitoring. The best algorithms available could help me predict what my therapy was doing to me, and how I could better control the dangerous situations we encounter from day to day. But there are actually very few visualizations of this common bio-metric. See diabetes-understanding-by-simulation for more on what we hope to do with this data.

This is a quick and dirty copy of a population prediction bar graph visualization (also a demo of d3). That visualization was quickly modified to display glucose levels over time.

Some test data is used to initialize a graph, but the main graph is drawn after CSV data has been retrieved from the server.

This is a "hello world" experiment with D3 to get the basics going. It is what it is.

Eventually, it would be nice to get tiles of time segments that draw themselves so that they could be overlaid onto a slippy map. Immediate next steps however, are much more basic:

  • fix time formatting

  • get some kind of per unit of time abstractiong going

    • eg, week, or day,
    • get each unit to draw themselves
      • presumably some kind of tiling thing?
    • add pan/zoom

-bewest

Screenshots

Zoom

observing d3.js render glucose levels

Overview

observing d3.js render sugars with source code

Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Glucose levels</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://raw.github.com/mbostock/d3/master/d3.js"></script>
<script src="script.js"></script>
<div id="lab">
<div id="test"></div>
</div>
<div id="clone"></div>
</body>
</html>
Raw
main.css
.chart {
background-color: white;
}
.chart rect {
stroke: white;
fill: steelblue;
}
.axis {
shape-rendering: crispEdges;
}
.x.axis line {
stroke: black;
}
.y.axis line {
stroke: black;
}
.axis text {
font-size: 12px;
}
.safety .safe-sugar {
fill: green;
opacity: .1;
}
Raw
script.js
$( function() {
var csv_text = 'date,sugar\n\
2011-01-13T15:42:08,108\n\
2011-01-14T15:42:08,108\n\
2011-01-15T15:42:08,108\n\
2011-01-16T15:42:08,108\n\
2011-01-17T15:42:08,108\n\
2011-02-15T20:58:25,121\n\
2011-02-16T20:58:25,121\n\
2011-02-17T20:58:25,121\n\
2011-02-18T20:58:25,121\n\
2011-02-19T20:58:25,121\n\
2011-02-20T20:58:25,121\n\
2011-02-21T20:58:25,121\n\
2011-03-08T16:55:07,100\n\
2011-03-08T18:29:12,91\n\
2011-03-08T19:30:37,94\n\
2011-03-08T21:34:27,126\n\
2011-03-09T08:38:01,242\n';
var json = [ ];
json = d3.csv.parse(csv_text);
json.forEach(fix_row);
var url = './sugars.csv';
draw_graph(json);
d3.csv(url, update_data);
} );
function draw_graph(data) {
var results,
chart,
dots,
margin = 100,
w = 8,
h = 500,
x, y,
width = 1100,
xAxis, yAxis;
$('#lab #test').remove( );
$('#lab').append( $('#clone').clone(true).attr('id', 'test') );
chart = d3.select( '#test' ).append( 'svg' )
.attr( 'class', 'chart' )
.attr( 'width', width )
.attr( 'height', h )
.append('g');
d3.select('svg g')
.attr('transform', 'translate(50, 50)');
x = d3.time.scale()
.domain( [data[0].date, d3.time.day.offset(data[data.length - 1].date, 1)] )
.range( [0, width - margin] )
y = d3.scale.linear()
.domain( [0, d3.max( data, function( d ) { return d.sugar; } )] )
.rangeRound( [0, h - margin] );
// safety bars
var safeties = {
low: 70,
high: 140,
x: x.range()[0],
y: (h - margin) - y(140) + .5,
width: (width - margin),
height: y(140) - y(70) + .5
};
var bars = chart.append('g')
.attr('class', 'safety');
bars.append('rect')
.attr('class', 'safe-sugar')
.attr( 'x', safeties.x)
.attr( 'y', safeties.y)
.attr( 'width', safeties.width)
.attr( 'height', safeties.height)
;
// Bars
dots = chart.append('g')
.attr('class', 'dots');
dots.selectAll( 'circle' )
.data( data )
.enter().append( 'circle' )
.attr( 'cx', function( d, i ) { return x( d.date ) - .5; } )
.attr( 'cy', function( d ) { return (h - margin) - y( d.sugar ) + .5 } )
.attr( 'r', '.5ex')
// .attr( 'width', w )
// .attr( 'height', function( d ) { return y( d.population ) } )
.append('g');
// Axis
xAxis = d3.svg.axis()
.scale(x)
.ticks(12)
// .tickFormat(d3.time.format('%m/%d/%y'))
.tickSize(10, 20, 1);
yAxis = d3.svg.axis()
.scale(d3.scale.linear().domain( [0, d3.max( data, function( d ) { return d.sugar || 0; } )] ).rangeRound( [h - margin, 0] ))
.ticks(7)
.tickSize(6, 3, 1)
.orient('left');
// .orient('right');
chart.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0, ' + (h - margin) + ')')
.call(xAxis);
chart.append('g')
.attr('class', 'y axis')
// .attr('transform', 'translate(' + x.range()[1] + ')')
.call(yAxis);
}
function update_data(rows) {
// console.log('XXX', this, arguments);
if (rows) {
rows.forEach(fix_row);
draw_graph(rows);
}
}
function fix_row(row, i) {
row.date = d3.time.format.iso.parse(row.date);
row.sugar = parseInt(row.sugar);
// console.log('rows each', this, arguments);
}
Raw
sugars.csv
date sugar
2011-01-13T14:30:45 139
2011-01-13T15:42:08 108
2011-01-13T16:32:17 68
2011-01-13T18:29:58 85
2011-01-13T20:19:17 92
2011-01-14T01:54:29 204
2011-01-14T02:42:41 144
2011-01-14T09:44:39 94
2011-01-14T11:58:00 66
2011-01-14T13:14:37 98
2011-01-14T13:54:15 69
2011-01-14T14:27:13 88
2011-01-14T15:21:33 97
2011-01-14T16:59:50 152
2011-01-14T17:46:02 194
2011-01-14T18:25:13 176
2011-01-14T18:39:59 185
2011-01-14T22:07:44 158
2011-01-15T01:18:16 105
2011-01-15T05:25:45 82
2011-01-15T10:40:06 47
2011-01-15T12:45:18 64
2011-01-15T20:00:48 60
2011-01-16T08:22:26 107
2011-01-16T11:27:42 285
2011-01-16T14:37:40 62
2011-01-16T15:23:12 74
2011-01-16T19:25:13 48
2011-01-16T20:07:15 61
2011-01-16T20:30:03 95
2011-01-16T22:05:26 287
2011-01-17T04:13:08 218
2011-01-17T09:53:49 104
2011-01-17T12:58:49 64
2011-01-17T14:54:34 153
2011-01-17T15:56:18 120
2011-01-17T17:26:31 53
2011-01-17T17:38:53 57
2011-01-17T17:49:51 65
2011-01-17T17:57:11 80
2011-01-17T20:36:16 101
2011-01-17T21:05:45 124
2011-01-17T23:25:11 59
2011-01-18T01:51:06 155
2011-01-18T07:50:35 141
2011-01-18T11:38:33 171
2011-01-18T12:45:35 131
2011-01-18T14:14:44 203
2011-01-18T16:25:20 60
2011-01-18T17:15:28 74
2011-01-18T17:56:54 62
2011-01-18T19:28:05 82
2011-01-18T23:05:31 138
2011-01-19T01:19:24 101
2011-01-19T02:30:15 100
2011-01-19T09:58:54 179
2011-01-19T11:38:07 225
2011-01-19T14:28:26 59
2011-01-19T15:33:47 62
2011-01-19T16:42:21 84
2011-01-19T17:21:32 82
2011-01-19T18:33:28 209
2011-01-19T19:23:02 65
2011-01-19T19:24:55 71
2011-01-19T19:49:33 80
2011-01-19T23:12:03 94
2011-01-20T08:27:57 104
2011-01-20T09:27:57 108
2011-01-20T09:50:11 116
2011-01-20T11:58:19 117
2011-01-20T13:02:56 61
2011-01-20T13:21:41 61
2011-01-20T14:43:06 125
2011-01-20T15:24:06 113
2011-01-20T16:22:48 71
2011-01-20T17:41:08 60
2011-01-20T17:54:09 80
2011-01-20T18:28:50 80
2011-01-20T19:12:19 66
2011-01-20T20:55:02 118
2011-01-20T23:06:04 137
2011-01-21T01:44:14 164
2011-01-21T09:59:09 142
2011-01-21T11:44:44 95
2011-01-21T12:42:44 52
2011-01-21T12:50:51 62
2011-01-21T14:45:31 66
2011-01-21T16:05:51 71
2011-01-21T17:58:13 153
2011-01-21T19:04:13 132
2011-01-21T20:00:49 90
2011-01-21T22:20:29 67
2011-01-22T12:30:42 75
2011-01-22T15:59:01 51
2011-01-22T17:11:20 76
2011-01-22T19:53:00 87
2011-01-22T21:17:33 39
2011-01-23T00:06:49 63
2011-01-23T09:04:27 269
2011-01-23T10:34:11 116
2011-01-23T11:22:05 74
2011-01-23T12:06:44 45
2011-01-23T12:22:28 58
2011-01-23T16:25:41 160
2011-01-23T18:33:23 54
2011-01-23T21:10:52 159
2011-01-24T00:34:18 183
2011-01-24T09:38:58 121
2011-01-24T11:54:09 216
2011-01-24T12:17:20 215
2011-01-24T12:44:26 229
2011-01-24T13:53:18 129
2011-01-24T14:21:47 108
2011-01-24T14:41:15 83
2011-01-24T16:55:15 71
2011-01-24T17:08:59 91
2011-01-24T18:14:04 77
2011-01-24T20:27:59 120
2011-01-25T00:20:32 144
2011-01-25T03:36:35 71
2011-01-25T08:09:17 74
2011-01-25T10:03:22 144
2011-01-25T11:48:01 192
2011-01-25T12:46:46 118
2011-01-25T15:37:39 62
2011-01-25T17:32:09 76
2011-01-25T19:24:05 89
2011-01-25T20:25:17 44
2011-01-25T20:56:23 95
2011-01-25T22:41:48 185
2011-01-26T08:32:52 154
2011-01-26T09:21:37 152
2011-01-26T10:06:44 156
2011-01-26T12:47:59 80
2011-01-26T12:55:50 65
2011-01-26T13:06:37 53
2011-01-26T13:11:21 50
2011-01-26T13:15:35 55
2011-01-26T13:22:50 66
2011-01-26T13:42:33 78
2011-01-26T14:52:11 161
2011-01-26T15:46:49 156
2011-01-26T16:17:33 184
2011-01-26T17:00:18 186
2011-01-26T19:34:05 144
2011-01-26T20:03:00 119
2011-01-27T01:32:45 75
2011-01-27T10:47:29 171
2011-01-27T11:13:27 174
2011-01-27T12:44:48 156
2011-01-27T16:27:58 81
2011-01-27T18:19:19 71
2011-01-27T21:57:13 176
2011-01-28T01:20:11 63
2011-01-28T09:06:19 155
2011-01-28T10:37:14 192
2011-01-28T12:08:44 374
2011-01-28T12:42:29 394
2011-01-28T12:49:01 420
2011-01-28T13:24:23 383
2011-01-28T13:34:35 344
2011-01-28T13:58:47 361
2011-01-28T14:27:09 340
2011-01-28T15:10:16 371
2011-01-28T16:03:11 320
2011-01-28T16:22:41 327
2011-01-28T16:32:03 300
2011-01-28T16:52:52 280
2011-01-28T17:23:12 264
2011-01-28T17:56:10 233
2011-01-28T19:27:11 225
2011-01-28T20:37:24 266
2011-01-28T20:45:32 263
2011-01-28T22:04:00 226
2011-01-29T00:12:02 119
2011-01-29T01:11:34 63
2011-01-29T07:55:39 39
2011-01-29T08:10:12 56
2011-01-29T08:24:25 62
2011-01-29T08:46:34 90
2011-01-29T13:20:18 44
2011-01-29T13:36:14 66
2011-01-29T13:40:43 71
2011-01-29T18:23:06 114
2011-01-29T19:22:37 61
2011-01-29T20:18:31 67
2011-01-29T22:10:52 156
2011-01-29T23:17:50 126
2011-01-30T01:09:19 85
2011-01-30T04:16:04 128
2011-01-30T12:22:52 91
2011-01-30T16:43:57 68
2011-01-30T19:05:23 195
2011-01-30T23:43:18 140
2011-01-31T08:23:42 232
2011-01-31T08:48:03 215
2011-01-31T10:27:16 255
2011-01-31T10:49:52 239
2011-01-31T11:49:00 198
2011-01-31T12:08:55 139
2011-01-31T12:13:35 133
2011-01-31T12:30:09 87
2011-01-31T12:36:17 81
2011-01-31T12:46:54 80
2011-01-31T15:18:25 258
2011-01-31T17:07:27 167
2011-01-31T18:35:57 101
2011-01-31T22:26:51 114
2011-02-01T02:02:28 98
2011-02-01T09:10:39 88
2011-02-01T10:11:29 73
2011-02-01T11:34:18 169
2011-02-01T12:24:29 143
2011-02-01T15:42:41 110
2011-02-01T17:36:25 66
2011-02-01T20:10:19 109
2011-02-01T23:31:48 154
2011-02-02T09:37:56 127
2011-02-02T10:03:16 113
2011-02-02T12:38:09 109
2011-02-02T12:43:14 99
2011-02-02T16:48:29 65
2011-02-02T17:50:14 104
2011-02-02T18:55:45 135
2011-02-02T23:35:15 244
2011-02-03T01:57:47 41
2011-02-03T02:06:34 47
2011-02-03T02:26:56 68
2011-02-03T02:37:15 81
2011-02-03T02:54:15 71
2011-02-03T09:55:34 193
2011-02-03T10:34:47 204
2011-02-03T12:32:54 158
2011-02-03T13:05:40 98
2011-02-03T16:07:19 203
2011-02-03T17:04:09 172
2011-02-03T17:50:31 131
2011-02-03T19:13:23 137
2011-02-03T19:59:55 108
2011-02-03T20:46:58 78
2011-02-04T10:29:31 145
2011-02-04T10:45:15 129
2011-02-04T12:11:54 103
2011-02-04T14:44:30 150
2011-02-04T16:56:50 197
2011-02-04T18:07:11 169
2011-02-04T18:40:10 173
2011-02-04T20:32:55 144
2011-02-04T23:56:20 150
2011-02-05T10:21:34 54
2011-02-05T10:41:32 60
2011-02-05T11:16:59 153
2011-02-05T13:24:55 133
2011-02-05T15:26:13 113
2011-02-05T17:59:27 122
2011-02-05T18:57:53 102
2011-02-05T19:57:27 110
2011-02-05T21:00:20 114
2011-02-05T21:46:24 158
2011-02-06T00:27:31 125
2011-02-06T07:32:48 57
2011-02-06T08:03:11 64
2011-02-06T09:04:38 112
2011-02-06T10:21:57 141
2011-02-06T11:46:20 89
2011-02-06T19:08:42 142
2011-02-06T23:04:06 95
2011-02-07T00:24:54 99
2011-02-07T07:56:50 72
2011-02-07T09:25:28 108
2011-02-07T12:07:02 220
2011-02-07T14:32:48 150
2011-02-07T15:59:06 98
2011-02-07T17:03:35 120
2011-02-07T18:32:52 149
2011-02-07T20:34:30 223
2011-02-08T01:12:02 114
2011-02-08T08:04:53 54
2011-02-08T08:55:57 75
2011-02-08T09:45:03 127
2011-02-08T13:07:37 81
2011-02-08T14:43:59 72
2011-02-08T15:05:31 59
2011-02-08T15:25:34 53
2011-02-08T16:02:32 82
2011-02-08T16:28:48 83
2011-02-08T22:18:37 141
2011-02-08T23:36:25 38
2011-02-09T00:45:20 75
2011-02-09T07:49:26 311
2011-02-09T10:31:17 168
2011-02-09T11:42:17 176
2011-02-09T12:19:40 124
2011-02-09T12:31:30 117
2011-02-09T13:48:21 89
2011-02-09T16:01:35 92
2011-02-09T17:09:16 78
2011-02-09T17:56:18 71
2011-02-09T20:03:29 87
2011-02-09T20:41:33 85
2011-02-09T22:57:19 164
2011-02-09T23:44:19 127
2011-02-10T01:18:35 85
2011-02-10T08:01:48 251
2011-02-10T08:23:13 239
2011-02-10T11:01:38 133
2011-02-10T12:22:48 134
2011-02-10T17:40:15 105
2011-02-10T20:12:05 90
2011-02-11T01:17:10 198
2011-02-11T08:49:38 163
2011-02-11T10:48:33 165
2011-02-11T12:33:47 139
2011-02-11T17:52:36 68
2011-02-11T19:01:43 97
2011-02-12T01:00:17 59
2011-02-12T01:04:40 61
2011-02-12T01:11:54 61
2011-02-12T05:26:20 316
2011-02-12T09:50:32 93
2011-02-12T13:05:43 57
2011-02-12T17:36:42 127
2011-02-12T18:50:28 136
2011-02-12T19:51:37 131
2011-02-13T00:21:21 219
2011-02-13T08:40:41 120
2011-02-13T10:25:39 190
2011-02-13T11:56:36 145
2011-02-13T18:32:37 70
2011-02-14T01:32:02 257
2011-02-14T08:32:00 114
2011-02-14T10:25:18 133
2011-02-14T12:44:58 150
2011-02-14T17:12:52 91
2011-02-14T21:13:50 62
2011-02-14T22:58:56 55
2011-02-15T09:43:21 177
2011-02-15T11:46:56 124
2011-02-15T16:45:09 140
2011-02-15T18:06:14 101
2011-02-16T01:09:39 54
2011-02-16T01:41:00 48
2011-02-16T01:49:21 75
2011-02-16T09:11:15 271
2011-02-16T12:11:16 103
2011-02-16T12:28:56 92
2011-02-16T16:08:50 143
2011-02-16T16:28:50 134
2011-02-16T16:52:52 143
2011-02-16T17:23:27 113
2011-02-16T19:55:27 113
2011-02-16T20:21:01 119
2011-02-16T20:49:57 101
2011-02-17T02:17:38 114
2011-02-17T11:53:49 133
2011-02-17T16:53:29 200
2011-02-17T18:13:16 141
2011-02-17T19:20:16 69
2011-02-17T20:01:43 51
2011-02-17T20:07:41 62
2011-02-17T20:29:30 72
2011-02-17T20:57:29 135
2011-02-17T22:06:29 187
2011-02-17T23:03:59 227
2011-02-18T01:33:03 297
2011-02-18T09:20:07 215
2011-02-18T11:02:51 182
2011-02-18T12:25:12 183
2011-02-18T14:36:13 122
2011-02-18T16:28:48 79
2011-02-18T19:56:24 95
2011-02-18T20:25:58 95
2011-02-18T20:58:25 121
2011-02-18T22:01:09 172
2011-02-19T02:21:53 203
2011-02-19T10:14:21 191
2011-02-19T10:37:21 210
2011-02-19T11:46:34 156
2011-02-19T13:02:23 92
2011-02-19T17:16:23 183
2011-02-19T17:55:25 172
2011-02-19T18:32:04 192
2011-02-19T19:38:46 205
2011-02-19T20:18:08 219
2011-02-19T20:59:11 195
2011-02-19T21:06:41 214
2011-02-20T08:37:57 45
2011-02-20T09:01:18 54
2011-02-20T09:32:49 88
2011-02-20T10:57:58 278
2011-02-20T12:23:13 184
2011-02-20T14:07:27 129
2011-02-20T15:10:17 86
2011-02-20T18:09:47 115
2011-02-20T21:14:12 76
2011-02-20T22:00:07 109
2011-02-20T23:43:26 205
2011-02-21T04:51:57 275
2011-02-21T09:44:36 88
2011-02-21T13:07:39 68
2011-02-21T13:44:52 66
2011-02-21T17:55:34 168
2011-02-21T20:24:58 256
2011-02-21T22:24:26 230
2011-02-22T03:23:11 141
2011-02-22T09:39:58 140
2011-02-22T12:24:53 132
2011-02-22T22:34:48 113
2011-02-23T01:12:06 94
2011-02-23T05:29:36 93
2011-02-23T09:16:35 62
2011-02-23T12:44:35 89
2011-02-23T14:29:55 124
2011-02-23T16:53:46 57
2011-02-23T17:07:24 60
2011-02-23T17:10:51 64
2011-02-24T01:34:07 154
2011-02-24T12:19:07 118
2011-02-24T12:56:33 118
2011-02-24T18:00:35 269
2011-02-24T19:58:45 114
2011-02-24T21:59:21 89
2011-02-25T09:50:04 129
2011-02-25T11:46:11 208
2011-02-25T16:29:38 65
2011-02-25T16:43:02 61
2011-02-25T17:57:03 61
2011-02-25T20:45:13 156
2011-02-26T03:53:15 90
2011-02-26T09:39:55 83
2011-02-26T12:21:43 243
2011-02-26T13:40:58 275
2011-02-26T16:49:04 62
2011-02-26T18:12:08 61
2011-02-26T22:16:12 65
2011-02-26T22:21:53 59
2011-02-27T01:49:18 227
2011-02-27T10:33:09 95
2011-02-27T18:34:02 88
2011-02-28T09:00:36 80
2011-02-28T12:39:52 137
2011-02-28T18:54:01 121
2011-03-01T11:00:09 187
2011-03-01T16:14:12 127
2011-03-01T17:23:06 141
2011-03-01T22:16:51 160
2011-03-01T23:07:59 126
2011-03-02T02:42:12 92
2011-03-02T11:32:44 82
2011-03-02T14:25:49 210
2011-03-02T17:19:58 233
2011-03-02T18:03:01 255
2011-03-02T19:34:00 201
2011-03-02T22:09:33 159
2011-03-03T01:37:59 144
2011-03-03T11:06:20 94
2011-03-03T12:41:23 112
2011-03-03T14:57:04 88
2011-03-03T15:54:13 106
2011-03-03T17:59:14 100
2011-03-03T19:01:56 123
2011-03-03T21:13:53 185
2011-03-04T01:19:29 343
2011-03-04T08:46:43 231
2011-03-04T12:07:23 151
2011-03-04T14:35:09 93
2011-03-04T15:35:42 103
2011-03-04T16:40:34 87
2011-03-04T18:06:11 116
2011-03-04T18:47:15 86
2011-03-04T20:03:49 156
2011-03-05T10:10:42 267
2011-03-05T14:38:33 67
2011-03-05T20:44:07 127
2011-03-06T09:59:44 209
2011-03-06T13:20:09 107
2011-03-06T16:09:08 67
2011-03-06T19:51:17 158
2011-03-07T08:42:14 57
2011-03-07T09:35:36 80
2011-03-07T10:58:53 139
2011-03-07T12:09:40 186
2011-03-07T14:02:48 162
2011-03-07T14:45:46 144
2011-03-07T16:44:14 121
2011-03-07T17:21:34 143
2011-03-07T19:04:12 90
2011-03-08T01:22:06 67
2011-03-08T01:50:50 99
2011-03-08T08:34:59 289
2011-03-08T11:28:39 143
2011-03-08T12:22:34 100
2011-03-08T14:43:02 89
2011-03-08T16:20:21 57
2011-03-08T16:21:07 84
2011-03-08T16:55:07 100
2011-03-08T18:29:12 91
2011-03-08T19:30:37 94
2011-03-08T21:34:27 126
2011-03-09T08:38:01 242
@biovisualize
Copy link

Could you please fix the broken link to d3.js, using http://d3js.org/d3.v2.min.js ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment