Skip to content

Instantly share code, notes, and snippets.

@RobertDelgado

RobertDelgado/.block

Last active September 20, 2017 21:48
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 RobertDelgado/8d5567ffcdddfba2caf5a40c375b8ada to your computer and use it in GitHub Desktop.
Save RobertDelgado/8d5567ffcdddfba2caf5a40c375b8ada to your computer and use it in GitHub Desktop.
Download ZIP
Age vs. Systolic Blood pressure
Raw
.block
license: mit
Raw
README.md

Built with blockbuilder.org

This graph shows Age vs. Systolic Blood pressure of patients in the Dominican Republic who were treated for a variety of ailments.

The data for this plot was obtained from the following source: Data Source

The specific file is called DominicanHTN.xls. (I then converted it to a csv file).

The plot was created from guidance from the following video: Video

I also had some help creating my legend from prof Kelleher.

Raw
DominicanHTD.csv
Village Gender Age SBP DBP
Juan Sanchez Male 56 150 100
Juan Sanchez Male 42 120 90
Juan Sanchez Male 69 120 90
Juan Sanchez Male 70 180 80
Juan Sanchez Male 62 138 78
Juan Sanchez Male 63 115 80
Juan Sanchez Male 31 130 80
Juan Sanchez Male 35 150 90
Juan Sanchez Male 40 200 100
Juan Sanchez Male 38 120 80
Juan Sanchez Male 51 190 110
Juan Sanchez Male 56 90 50
Juan Sanchez Male 60 130 80
Juan Sanchez Female 36 120 76
Juan Sanchez Female 43 200 120
Juan Sanchez Female 50 140 70
Juan Sanchez Female 34 110 80
Juan Sanchez Female 59 134 90
Juan Sanchez Female 52 160 105
Juan Sanchez Female 60 140 90
Juan Sanchez Female 52 105 65
Juan Sanchez Female 32 126 80
Juan Sanchez Female 42 129 80
Juan Sanchez Female 44 120 78
Juan Sanchez Female 27 100 64
Juan Sanchez Female 100 130 70
Juan Sanchez Female 28 118 80
Juan Sanchez Female 52 144 70
Juan Sanchez Female 43 180 120
Juan Sanchez Female 52 138 70
Juan Sanchez Female 48 110 84
Juan Sanchez Female 48 140 90
Juan Sanchez Female 52 120 70
Juan Sanchez Female 29 118 78
Juan Sanchez Female 23 110 70
Juan Sanchez Female 38 110 70
Juan Sanchez Female 29 130 88
Juan Sanchez Female 28 140 80
Juan Sanchez Female 26 130 88
Juan Sanchez Female 60 165 90
Juan Sanchez Female 60 180 90
Juan Sanchez Female 49 130 82
Juan Sanchez Female 58 140 90
Juan Sanchez Female 32 112 80
Juan Sanchez Female 47 130 68
Juan Sanchez Female 62 158 100
Juan Sanchez Female 35 112 76
Juan Sanchez Female 47 150 90
Juan Sanchez Female 56 140 86
Juan Sanchez Female 63 142 80
Juan Sanchez Female 46 110 78
Juan Sanchez Female 40 140 70
Juan Sanchez Female 60 130 80
Cojobal Male 38 132 94
Cojobal Male 77 140 88
Cojobal Male 45 140 92
Cojobal Male 45 122 86
Cojobal Male 68 128 92
Cojobal Male 56 90 72
Cojobal Male 70 118 78
Cojobal Male 60 120 90
Cojobal Male 30 110 70
Cojobal Male 48 122 84
Cojobal Male 50 200 100
Cojobal Male 43 110 75
Cojobal Female 49 140 90
Cojobal Female 32 150 100
Cojobal Female 19 120 82
Cojobal Female 60 150 96
Cojobal Female 66 120 82
Cojobal Female 65 164 98
Cojobal Female 39 122 82
Cojobal Female 47 112 80
Cojobal Female 35 130 84
Cojobal Female 36 140 86
Cojobal Female 63 102 78
Cojobal Female 43 122 80
Cojobal Female 32 130 96
Cojobal Female 41 102 88
Cojobal Female 29 130 88
Cojobal Female 24 122 76
Cojobal Female 37 200 120
Cojobal Female 19 140 82
Cojobal Female 67 180 120
Cojobal Female 43 124 82
Cojobal Female 47 110 80
Cojobal Female 41 124 92
Cojobal Female 29 90 60
Cojobal Female 52 120 80
Cojobal Female 49 159 90
Cojobal Female 41 142 92
Cojobal Female 66 140 84
Cojobal Female 74 118 78
Cojobal Female 43 122 76
Cojobal Female 22 108 70
Cojobal Female 52 170 106
Cojobal Female 51 120 70
Cojobal Female 56 140 84
Cojobal Female 54 100 70
Cojobal Female 26 118 68
Cojobal Female 38 110 80
Cojobal Female 34 114 72
Cojobal Female 50 150 100
Cojobal Female 63 160 95
Cojobal Female 56 140 92
Cojobal Female 67 190 105
Cojobal Female 35 118 78
Cojobal Female 43 120 80
Cojobal Female 43 150 82
Cojobal Female 60 120 80
Cojobal Female 70 200 110
Cojobal Female 44 150 97
Carmona Male 83 168 98
Carmona Male 60 110 78
Carmona Male 50 142 78
Carmona Male 51 150 96
Carmona Male 64 160 100
Carmona Male 56 142 84
Carmona Male 84 160 90
Carmona Male 76 150 80
Carmona Male 51 110 70
Carmona Male 73 128 78
Carmona Male 68 122 84
Carmona Male 75 150 100
Carmona Male 50 140 90
Carmona Male 53 122 60
Carmona Male 51 120 76
Carmona Male 40 130 90
Carmona Male 37 100 70
Carmona Male 37 130 100
Carmona Male 63 150 100
Carmona Male 44 130 93
Carmona Male 48 100 80
Carmona Male 70 120 75
Carmona Male 26 105 75
Carmona Male 71 100 70
Carmona Male 48 150 100
Carmona Female 39 196 100
Carmona Female 59 130 98
Carmona Female 21 110 80
Carmona Female 61 140 100
Carmona Female 20 122 62
Carmona Female 38 110 80
Carmona Female 48 164 104
Carmona Female 30 120 82
Carmona Female 32 120 60
Carmona Female 40 150 88
Carmona Female 56 160 102
Carmona Female 46 150 96
Carmona Female 39 135 92
Carmona Female 40 124 78
Carmona Female 32 110 70
Carmona Female 30 100 80
Carmona Female 34 95 80
Carmona Female 50 130 80
Carmona Female 50 120 80
Carmona Female 54 108 78
Carmona Female 56 118 78
Carmona Female 56 170 105
Carmona Female 20 105 70
Carmona Female 55 120 80
Carmona Female 40 95 70
Carmona Female 50 95 70
Carmona Female 64 120 90
Carmona Female 39 140 100
Carmona Female 40 142 82
Carmona Female 39 160 120
Carmona Female 40 110 80
Carmona Female 70 190 118
Carmona Female 40 180 110
Carmona Female 39 130 85
Carmona Female 40 130 90
Carmona Female 45 120 80
Carmona Female 46 204 120
Carmona Female 39 150 110
Carmona Female 70 150 70
Bare' Nuevo Male 42 120 70
Bare' Nuevo Male 68 122 60
Bare' Nuevo Male 62 120 68
Bare' Nuevo Male 90 130 72
Bare' Nuevo Male 74 140 80
Bare' Nuevo Male 70 148 72
Bare' Nuevo Male 48 118 80
Bare' Nuevo Male 31 126 90
Bare' Nuevo Male 45 136 86
Bare' Nuevo Male 44 140 80
Bare' Nuevo Male 49 130 90
Bare' Nuevo Male 21 102 66
Bare' Nuevo Male 35 110 70
Bare' Nuevo Female 30 110 62
Bare' Nuevo Female 46 130 70
Bare' Nuevo Female 39 126 80
Bare' Nuevo Female 46 142 92
Bare' Nuevo Female 48 140 90
Bare' Nuevo Female 43 128 82
Bare' Nuevo Female 70 130 100
Bare' Nuevo Female 35 124 76
Bare' Nuevo Female 100 162 78
Bare' Nuevo Female 23 130 86
Bare' Nuevo Female 23 130 75
Bare' Nuevo Female 40 110 70
Bare' Nuevo Female 15 80 40
Bare' Nuevo Female 60 166 104
Bare' Nuevo Female 55 140 92
Bare' Nuevo Female 40 160 104
Bare' Nuevo Female 37 160 90
Bare' Nuevo Female 54 140 82
Bare' Nuevo Female 38 98 80
La Altagracia Male 42 138 90
La Altagracia Male 49 120 75
La Altagracia Male 59 112 84
La Altagracia Male 62 112 72
La Altagracia Male 40 134 84
La Altagracia Male 70 140 80
La Altagracia Male 34 115 82
La Altagracia Male 67 140 82
La Altagracia Male 72 98 60
La Altagracia Male 32 115 80
La Altagracia Male 56 120 80
La Altagracia Male 36 80 60
La Altagracia Male 59 160 70
La Altagracia Male 40 126 86
La Altagracia Male 35 110 80
La Altagracia Male 65 130 80
La Altagracia Male 60 104 60
La Altagracia Male 60 236 152
La Altagracia Female 53 118 78
La Altagracia Female 57 120 70
La Altagracia Female 46 140 95
La Altagracia Female 50 120 95
La Altagracia Female 20 98 78
La Altagracia Female 62 164 98
La Altagracia Female 66 150 100
La Altagracia Female 40 110 70
La Altagracia Female 49 120 90
La Altagracia Female 47 130 70
La Altagracia Female 40 170 130
La Altagracia Female 64 180 90
La Altagracia Female 42 110 70
La Altagracia Female 49 120 80
La Altagracia Female 40 130 90
La Altagracia Female 21 118 74
La Altagracia Female 70 130 80
La Altagracia Female 45 190 110
La Altagracia Female 63 158 100
La Altagracia Female 38 90 75
La Altagracia Female 34 99 70
La Altagracia Female 52 210 110
San Antonio Male 60 180 115
San Antonio Male 50 140 90
San Antonio Male 77 184 96
San Antonio Male 65 105 75
San Antonio Male 70 120 86
San Antonio Male 53 150 80
San Antonio Male 73 140 90
San Antonio Male 40 130 90
San Antonio Male 61 160 88
San Antonio Male 58 118 78
San Antonio Male 73 210 110
San Antonio Male 67 100 80
San Antonio Male 65 170 110
San Antonio Male 35 150 90
San Antonio Male 60 130 80
San Antonio Female 65 170 80
San Antonio Female 72 150 90
San Antonio Female 39 120 80
San Antonio Female 45 134 96
San Antonio Female 30 90 60
San Antonio Female 40 125 90
San Antonio Female 43 170 110
San Antonio Female 55 140 90
San Antonio Female 39 150 100
San Antonio Female 29 110 70
San Antonio Female 50 105 80
San Antonio Female 45 140 85
San Antonio Female 30 120 70
San Antonio Female 33 100 60
San Antonio Female 48 124 78
San Antonio Female 40 112 86
San Antonio Female 42 160 102
San Antonio Female 50 140 100
San Antonio Female 38 118 78
San Antonio Female 54 190 105
Los Gueneos Male 46 110 70
Los Gueneos Male 53 118 78
Los Gueneos Male 65 160 82
Los Gueneos Male 67 150 90
Los Gueneos Male 26 124 82
Los Gueneos Male 35 128 82
Los Gueneos Male 67 150 90
Los Gueneos Male 48 120 78
Los Gueneos Male 60 125 70
Los Gueneos Male 17 118 80
Los Gueneos Male 52 132 92
Los Gueneos Male 50 110 60
Los Gueneos Male 63 143 90
Los Gueneos Male 44 170 96
Los Gueneos Male 66 98 70
Los Gueneos Male 42 124 76
Los Gueneos Female 41 180 110
Los Gueneos Female 54 178 100
Los Gueneos Female 49 110 80
Los Gueneos Female 34 98 80
Los Gueneos Female 50 159 102
Los Gueneos Female 20 110 76
Los Gueneos Female 40 140 80
Los Gueneos Female 37 130 70
Los Gueneos Female 45 122 82
Los Gueneos Female 32 110 84
Los Gueneos Female 32 98 75
Los Gueneos Female 40 180 110
Los Gueneos Female 30 90 75
Los Gueneos Female 29 118 84
Los Gueneos Female 43 165 90
Los Gueneos Female 32 138 98
Los Gueneos Female 46 138 84
Los Gueneos Female 40 170 104
Los Gueneos Female 18 106 68
Los Gueneos Female 69 170 110
Los Gueneos Female 48 140 74
Los Gueneos Female 22 90 60
Los Gueneos Female 36 118 76
Los Gueneos Female 47 110 70
Los Gueneos Female 39 102 62
Los Gueneos Female 38 102 75
Los Gueneos Female 52 180 120
Los Gueneos Female 49 100 69
Los Gueneos Female 37 110 75
Los Gueneos Female 37 162 90
Los Gueneos Female 54 140 92
Los Gueneos Female 22 110 65
Los Gueneos Female 42 98 70
Los Gueneos Female 45 140 92
Los Gueneos Female 46 140 92
Los Gueneos Female 54 110 75
Los Gueneos Female 36 170 110
Los Gueneos Female 77 112 64
Los Gueneos Female 87 90 80
Los Gueneos Female 95 102 68
Los Gueneos Female 29 106 78
Batey Verde Male 45 124 78
Batey Verde Male 62 110 70
Batey Verde Male 62 180 100
Batey Verde Male 50 138 88
Batey Verde Male 52 90 60
Batey Verde Male 46 150 98
Batey Verde Male 73 126 88
Batey Verde Male 45 110 78
Batey Verde Male 67 130 88
Batey Verde Male 40 150 96
Batey Verde Male 54 145 90
Batey Verde Female 50 140 118
Batey Verde Female 50 156 100
Batey Verde Female 24 110 20
Batey Verde Female 17 150 78
Batey Verde Female 75 160 90
Batey Verde Female 21 120 80
Batey Verde Female 60 140 76
Batey Verde Female 78 120 70
Batey Verde Female 34 110 76
Batey Verde Female 42 120 76
Batey Verde Female 60 140 86
Batey Verde Female 44 160 86
Batey Verde Female 56 160 100
Batey Verde Female 38 110 66
Batey Verde Female 42 150 100
Batey Verde Female 31 118 78
Batey Verde Female 36 110 60
Batey Verde Female 40 120 80
Batey Verde Female 49 120 66
Batey Verde Female 50 146 88
Batey Verde Female 42 124 80
Batey Verde Female 34 170 100
Batey Verde Female 50 124 88
Batey Verde Female 63 170 104
Batey Verde Female 60 159 90
Batey Verde Female 28 120 80
Batey Verde Female 32 120 68
Batey Verde Female 34 118 70
Batey Verde Female 48 152 84
Batey Verde Female 85 190 100
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Rob's Scatter Plot</title>
<style>
body{font-family: sans-serif;}
//.circles{fill:"red";}
.legendCells, text {
fill: #8E8883;
font-size: 10pt;
font-family: sans-serif;
}
.axis-label, .legend-label
{
fill: #635F5D;
font-size: 20pt;
font-family: sans-serif;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
</head>
<body>
<h1>Age vs. Systolic Blood Pessure</h1>
<script>
var pointRadius = 6;
var margin = {left: 100, right: 20, top: 20, bottom: 180};
var outerWidth = 940;
var innerWidth = outerWidth - margin["left"] - margin["right"];
var outerHeight = 500;
var innerHeight = outerHeight - margin["top"] - margin["bottom"];
var svg = d3.select("body").append("svg").attr("width", outerWidth).attr("height", outerHeight);
var g = svg.append("g").attr("transform", "translate(" + margin["left"] + "," + margin["top"] +")");
var xAxisG = g.append("g").attr("transform", "translate(0," + innerHeight + ")");
var yAxisG = g.append("g");
var colorLegendG = g.append("g").attr("transform", "translate(50, 40)");
function render(data
, x_input
, y_input
, color_input){
var colorValue = d => d[color_input];
var max_x = d3.max(data, function(d){return d[x_input];});
var max_y = d3.max(data, function(d){return d[y_input];});
var xScale = d3.scaleLinear().range([0,innerWidth]).domain([0,max_x]);
var yScale = d3.scaleLinear().range([innerHeight,0]).domain([0,max_y]);
var colorScale = d3.scaleOrdinal().range(d3.schemeCategory10);
var xAxis = d3.axisBottom().scale(xScale).tickPadding(2);
var yAxis = d3.axisLeft().scale(yScale).tickPadding(2);
xAxisG
.append("text")
.attr('class', 'axis-label')
.attr("x", innerWidth/2)
.attr("y", margin["bottom"]/4)
.text(x_input + " (Years)");
yAxisG
.append("text")
.attr("x", -innerHeight/5)
.attr('class', 'axis-label')
.attr("y", -margin["left"]/2)
.attr("transform", `rotate(-90)`)
.text(y_input + "(Systolic)");
colorLegendG
.append('text')
.attr('class', 'legend-label')
.attr('x', -10)
.attr('y', -15)
.text(color_input);
const colorLegend = d3.legendColor()
.scale(colorScale)
.shape('circle');
xScale.domain([0, max_x]);
yScale.domain([0,max_y]);
xAxisG.call(xAxis);
yAxisG.call(yAxis);
var circs = g.selectAll("circle").data(data);
circs.enter().append("circle")
.attr("r",pointRadius)
.attr("stroke", d => colorScale(colorValue(d)))
.attr("fill","none")
.attr("cx", function(d){return(xScale(d[x_input]));})
.attr("cy", function(d){return(yScale(d[y_input]));});
circs.exit().remove();
colorLegendG.call(colorLegend) //Has to come after the rendering of the circle since
.selectAll('.cell text') //colordomain is automatically filled and legend needs color domain
.attr('dy', '0.1em');
};
const row = d =>{
d.Age = +d.Age;
d.SBP = +d.SBP;
d.DBP = +d.DBP
d.Gender = d.Gender;
return(d);
};
d3.csv("DominicanHTD.csv",row, function(array){render(array, "Age", "SBP", "Gender");});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment