Skip to content

Instantly share code, notes, and snippets.

@thestrabusiness

thestrabusiness/.block

Created June 1, 2018 12:45
Show Gist options
  • Save thestrabusiness/cbb2095549846b5fad315877e1e7e69f to your computer and use it in GitHub Desktop.
Save thestrabusiness/cbb2095549846b5fad315877e1e7e69f to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.domain { display: none }
circle.morning { stroke: #70c3d0; fill: #70c3d0}
circle.evening { stroke: #316ba7; fill: #316ba7 }
circle.red { stroke: #d0021b; fill: #d0021b}
.vertical-line { fill: none; stroke: #70c3d0; stroke-width: 5;}
.vertical-line.evening { fill: none; stroke: #316ba7; stroke-width: 5;}
.tick line { stroke: #C0C0BB; }
.tick text { fill: #8E8883; font-size: 14pt; font-family: sans-serif; }
.axis-label { fill: #635F5D; font-size: 14pt; font-family: sans-serif; }
</style>
</head>
<body>
<script>
var margin = {top: 120, right: 100, bottom: 50, left: 150};
var width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var data = {
"reading_type": 'blood-sugar-reading',
"discharge_date": "2018-05-24 13:26:08 UTC",
"morning": [
{"systolic":125,"diastolic":79,"date":0, "alert": false},
{"systolic":123,"diastolic":82,"date":1, "alert": false},
{"systolic":133,"diastolic":79,"date":2, "alert": false},
{"systolic":140,"diastolic":100,"date":3, "alert": true},
{"systolic":125,"diastolic":81,"date":4, "alert": false},
{"systolic":130,"diastolic":82,"date":5, "alert": false},
{"systolic":117,"diastolic":82,"date":6, "alert": false},
{"systolic":132,"diastolic":87,"date":7, "alert": false},
{"systolic":111,"diastolic":76,"date":8, "alert": false},
{"systolic":123,"diastolic":86,"date":9, "alert": false},
{"systolic":125,"diastolic":84,"date":10, "alert": false},
{"systolic":121,"diastolic":74,"date":11, "alert": false},
{"systolic":117,"diastolic":82,"date":15, "alert": false},
{"systolic":101,"diastolic":80,"date":16, "alert": false},
{"systolic":106,"diastolic":88,"date":19, "alert": false},
{"systolic":122,"diastolic":87,"date":22, "alert": false},
{"systolic":123,"diastolic":86,"date":23, "alert": false},
{"systolic":151,"diastolic":81,"date":12, "alert": true},
{"systolic":125,"diastolic":80,"date":25, "alert": false},
{"systolic":142,"diastolic":76,"date":13, "alert": true},
{"systolic":132,"diastolic":72,"date":27, "alert": false},
{"systolic":133,"diastolic":88,"date":17, "alert": false},
{"systolic":133,"diastolic":82,"date":14, "alert": false}
],
"evening": [
{"systolic":115,"diastolic":74,"date":0, "alert": false},
{"systolic":113,"diastolic":80,"date":1, "alert": false},
{"systolic":123,"diastolic":73,"date":2, "alert": false},
{"systolic":130,"diastolic":90,"date":3, "alert": false},
{"systolic":115,"diastolic":80,"date":4, "alert": false},
{"systolic":120,"diastolic":82,"date":5, "alert": false},
{"systolic":107,"diastolic":83,"date":6, "alert": false},
{"systolic":122,"diastolic":86,"date":7, "alert": false},
{"systolic":110,"diastolic":73,"date":8, "alert": false},
{"systolic":113,"diastolic":81,"date":9, "alert": false},
{"systolic":115,"diastolic":79,"date":10, "alert": false},
{"systolic":111,"diastolic":74,"date":11, "alert": false},
{"systolic":107,"diastolic":78,"date":15, "alert": false},
{"systolic":111,"diastolic":74,"date":16, "alert": false},
{"systolic":116,"diastolic":72,"date":19, "alert": false},
{"systolic":102,"diastolic":80,"date":22, "alert": false},
{"systolic":103,"diastolic":75,"date":23, "alert": false},
{"systolic":101,"diastolic":73,"date":12, "alert": false},
{"systolic":115,"diastolic":72,"date":25, "alert": false},
{"systolic":122,"diastolic":71,"date":13, "alert": false},
{"systolic":122,"diastolic":70,"date":27, "alert": false},
{"systolic":123,"diastolic":80,"date":17, "alert": false},
{"systolic":140,"diastolic":100,"date":14, "alert": true}
]
};
var lineGenerator = d3.line();
var morningData = data.morning;
var eveningData = data.evening;
var series = [];
morningData.map(function(reading){
series.push( {x: reading.date, y: reading.systolic});
series.push( {x: reading.date, y: reading.diastolic})
});
eveningData.map(function(reading){
series.push( {x: reading.date, y: reading.systolic});
series.push( {x: reading.date, y: reading.diastolic})
});
var verticalLinePath = function(d) {
return lineGenerator(
[[x(d.date), y(d.diastolic)], [x(d.date) ,y(d.systolic)]]
);
};
var offsetVerticalPath = function(d) {
return lineGenerator(
[[x(d.date+.33), y(d.diastolic)], [x(d.date+.33) ,y(d.systolic)]]
);
}
var y = d3.scaleLinear()
.range([0, height]);
var x = d3.scaleLinear()
.range([0, width]);
var min_y = d3.min(series, function(d) {return d.y});
var max_y = d3.max(series, function(d) {return d.y});
y.domain([max_y +10 , min_y - 10]);
x.domain([0, d3.max(series, function(d) { return d.x })]);
// x.nice();
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
const g = svg.append('g')
.attr('transform',`translate(${margin.left},${margin.top})`);
const xAxisG = g.append('g')
.attr('transform', `translate(0, ${height})`);
const yAxisG = g.append('g');
const xAxis = d3.axisBottom(x);
const yTicks = 10;
const yAxis = d3.axisLeft(y)
.ticks(yTicks)
.tickPadding(20)
.tickSize(-width);
//Define area containing all readings
readingsGroup = svg.append("g").attr("class", "readings");
//Plot morning data
morningReadings = readingsGroup.selectAll(".readings")
.data(data.morning)
.enter().append("g")
.attr("class", "reading")
.attr('transform',`translate(${margin.left},${margin.top})`);;
morningReadings.append("path")
.attr("class", "vertical-line")
.attr("d", verticalLinePath)
.attr();
morningSystolic = morningReadings.append("circle")
.attr('class', function(d) {
if (d.alert) { return "red" }
else { return "morning"}
})
.attr("r", 5)
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d){return y(d.systolic)});
morningDiastolic = morningReadings.append("circle")
.attr("class", "morning")
.attr('class', function(d) {
if (d.alert) { return "red" }
else { return "morning"}
})
.attr("r", 5)
.attr("cx", function(d) {
return x(d.date);
})
.attr("cy", function(d){return y(d.diastolic)});
//Plot evening data, offset x-value so it doesn't overlap with morning
eveningReadings = readingsGroup.selectAll(".readings")
.data(data.evening)
.enter().append("g")
.attr("class", "reading")
.attr('transform',`translate(${margin.left},${margin.top})`);;
eveningReadings.append("path")
.attr("class", "vertical-line evening")
.attr("d", offsetVerticalPath)
.attr();
eveningSystolic = eveningReadings.append("circle")
.attr("class", "evening")
.attr('class', function(d) {
if (d.alert) { return "red" }
else { return "evening"}
})
.attr("r", 5)
.attr("cx", function(d) {
return x(d.date + 0.33);
})
.attr("cy", function(d){return y(d.systolic)});
eveningDiastolic = eveningReadings.append("circle")
.attr("class", "evening")
.attr('class', function(d) {
if (d.alert) { return "red" }
else { return "evening"}
})
.attr("r", 5)
.attr("cx", function(d) {
return x(d.date + 0.33);
})
.attr("cy", function(d){return y(d.diastolic)});
xAxisG.call(xAxis);
yAxisG.call(yAxis);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment