Skip to content

Instantly share code, notes, and snippets.

@ZJONSSON

ZJONSSON/README.markdown

Forked from bewest/README.markdown
Created December 11, 2012 17:39
Show Gist options
  • Save ZJONSSON/4260533 to your computer and use it in GitHub Desktop.
Save ZJONSSON/4260533 to your computer and use it in GitHub Desktop.
Download ZIP
D3.js glucose levels
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.v2.min.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')
;
// Bars
dots = chart.append('g')
.attr('class', 'dots');
dots.selectAll( 'circle' )
.data( data )
.enter().append( 'circle' )
.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) + ')');
chart.append('g')
.attr('class', 'y axis');
// .attr('transform', 'translate(' + x.range()[1] + ')')
d3.select("svg").call(d3.behavior.zoom()
// By supplying only .x() any pan/zoom can only alter the x scale. y scale remains fixed.
.x(x)
.on("zoom",render)
);
function render() {
bars.selectAll("rect")
.attr( 'x', safeties.x)
.attr( 'y', safeties.y)
.attr( 'width', safeties.width)
.attr( 'height', safeties.height)
dots.selectAll("circle")
.attr( 'cx', function( d, i ) { return x( d.date ) - .5; } )
.attr( 'cy', function( d ) { return (h - margin) - y( d.sugar ) + .5 } )
chart.select(".x.axis").call(xAxis)
chart.select(".y.axis").call(yAxis)
}
// Call this to place initially
render();
}
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment