NYU-CS6313-Projects · yejer · Apr 21, 2015 · Apr 21, 2015 · Apr 21, 2015 · Apr 25, 2015
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Project X
+# Visualizing Health Data
 
 TODO describe project here
 

diff --git a/cobubble5.html b/cobubble5.html
@@ -0,0 +1,339 @@
+
+<!DO"+ctype+" html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Chronic Diseases</title>
+ <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
+ <script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script>
+ <script type="text/javascript" src="http://d3js.org/topojson.v1.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
+<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
+<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+<script type="text/javascript">
+        var people, asc1 = 1,
+            asc2 = 1,
+            asc3 = 1;
+        window.onload = function () {
+            people = document.getElementById("people");
+        }
+
+        function sort_table(tbody, col, asc) {
+            var rows = tbody.rows,
+                rlen = rows.length,
+                arr = new Array(),
+				cid = new Array(),
+                i, j, cells, clen;
+            // fill the array with values from the table
+            for (i = 0; i < rlen; i++) {
+                cells = rows[i].cells;
+                clen = cells.length;
+                arr[i] = new Array();
+
+                for (j = 0; j < clen; j++) {
+                    arr[i][j] = cells[j].innerHTML;
+					cid[i]=cells[j].innerHTML;
+                }
+            }
+            // sort the array by the specified column number (col) and order (asc)
+            arr.sort(function (a, b) {
+                return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1 * asc);
+            });
+            // replace existing rows with new rows created from the sorted array
+			var ltext;
+			var Cancer=arr[1][0];
+            for (i = 0; i < rlen; i++) {
+				ltext="onClick=\"changeSrc('"+arr[i][0].substring(15,arr[i][0].length-7)+"')\"";
+                rows[i].innerHTML = "<td "+ltext+">"+arr[i].join("</td><td>") + "</td>";
+            }
+        }
+</script>
+</head>
+<style>
+
+path {
+ stroke:white;
+ stroke-width: 1px;
+}
+
+td.last {
+    width: 1px;
+    white-space: nowrap;
+}
+
+ .header{
+	cursor: pointer;
+	}
+
+body {
+ font-family: Arial, sans-serif;
+}
+
+ .bubble {
+  fill-opacity: .5;
+  stroke: #fff;
+  stroke-width: .5px;
+}
+
+.city {
+ font: 10px sans-serif;
+ font-weight: bold;
+}
+
+.legend {
+ font-size: 12px;
+}
+
+div.tooltip {
+ position: absolute;
+ text-align: center;
+ width: 150px;
+ height: 25px;
+ padding: 2px;
+ font-size: 10px;
+ background: #FFFFE0;
+ border: 1px;
+ border-radius: 8px;
+ pointer-events: none;
+}
+</style>
+<body>
+<h1>Chronic Disease Distribution and Associated Costs in Medicare Patients</h1>
+<h5>Instructions: Click on a disease to display the distribution of Medicare patients for that disease.  Use the row headers to sort</h5>
+<table>
+<tr><td>
+<div id="CSVTable"></div></tr></td>
+</table>
+ <script type="text/javascript">
+ function changeSrc(newSrc){
+ var width = 960,
+ height = 500;
+	var color_domain = [0,1, 5, 10, 20, 35, 50, 70, 90]
+ var ext_color_domain = [-1,0, 1, 5, 10, 20, 35, 50, 70, 90]
+ var legend_labels = ["no data","< 1%", "1%+", "5+", "10%+", "20%+", "35%+", "50%+", "70%+", "90%+"]
+
+ var color = d3.scale.threshold()
+ .domain(color_domain)
+ .range(["#e6e6e6",
+ "#fff7ec",
+"#fee8c8",
+"#fdd49e",
+"#fdbb84",
+"#fc8d59",
+"#ef6548",
+"#d7301f",
+"#b30000",
+"#7f0000"]);
+
+var div = d3.select("tr").append("div")
+ .attr("class", "tooltip")
+ .style("opacity", 0);
+
+ d3.select("svg").remove();
+
+var svg = d3.select("tr").append("svg")
+ .attr("width", width)
+ .attr("height", height)
+ .style("margin", "10px auto");
+ var path = d3.geo.path()
+
+ var radius = d3.scale.sqrt()
+    .domain([0, 10000])
+    .range([0, 10]);
+
+
+
+srcFile=newSrc;
+
+queue()
+ .defer(d3.json, "us.json")
+ .defer(d3.csv, "data/"+srcFile+".csv")
+ .await(ready);
+
+
+
+function ready(error, us, data) {
+ var pairCostWithId = {};
+ var pairNameWithId = {};
+ var pairPerPopWithId = {};
+ var pairPopWithId = {};
+ var pairAvgWithId = {};
+ var pairHighWithId = {};
+ var pairLowWithId = {};
+
+data.forEach(function(d) {
+ pairCostWithId[d.id] = +d.dif_from_dev;
+ pairNameWithId[d.id] = d.cnty_name;
+ pairPerPopWithId[d.id] = d.percent_pop;
+ pairPopWithId[d.id]=d.cnty_pop;
+ pairAvgWithId[d.id]=d.avg_cost;
+ pairHighWithId[d.id]=d.high_cost;
+ pairLowWithId[d.id]=d.low_cost;
+ });
+ svg.append("g")
+ .attr("class", "county")
+ .selectAll("path")
+ .data(topojson.feature(us, us.objects.counties).features)
+ .enter().append("path")
+ .attr("d", path)
+ //.style("fill", "steelblue")
+ .style ( "fill" , function (d) {
+ return color (pairPerPopWithId[d.id]);
+ }) 
+  .style("opacity", 0.8)
+ .on("mouseover", function(d) {
+   var avgText;
+  if ( pairAvgWithId[d.id]==0){
+	avgText="<br/>average cost: insufficient data";
+	}
+	else {
+	avgText="<br/>Average Cost : $"+pairAvgWithId[d.id]+"<br/>Highest Cost : $"+pairHighWithId[d.id]+"<br/>Lowest Cost : $"+pairLowWithId[d.id];
+	}
+  var hText;
+  if (pairPerPopWithId[d.id]==-1){
+	hText = "no data";
+	}
+	else{
+	hText = pairNameWithId[d.id] + " : " + pairPerPopWithId[d.id]+"% of "+pairPopWithId[d.id]+avgText;
+	}
+
+ d3.select(this).transition().duration(300).style("opacity", 1);
+ div.transition().duration(300)
+ .style("opacity", 1)
+ div.html(hText)
+ .style("left", (d3.event.pageX) + "px")
+ .style("top", (d3.event.pageY -30) + "px")
+ .style("height",70+"px");
+
+ })
+ .on("mouseout", function() {
+ d3.select(this)
+ .transition().duration(300)
+ .style("opacity", 0.8);
+ div.transition().duration(300)
+ .style("opacity", 0);
+ })
+;  // changes
+
+
+ svg.append("g")
+    .attr("class", "bubble")
+  .selectAll("circle")
+    .data(topojson.feature(us, us.objects.counties).features
+      .sort(function(d) { return pairCostWithId[d.id] - pairCostWithId[d.id]  ;}))
+  .enter().append("circle")
+    .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
+    .attr("r", function(d) { return radius(pairCostWithId[d.id]); })
+  .style("opacity", 0.8)
+ .on("mouseover", function(d) {
+    var avgText;
+  if ( pairAvgWithId[d.id]==0){
+	avgText="<br/>average cost: insufficient data";
+	}
+	else {
+	avgText="<br/>Average Cost : $"+pairAvgWithId[d.id]+"<br/>Highest Cost : $"+pairHighWithId[d.id]+"<br/>Lowest Cost : $"+pairLowWithId[d.id];
+	}
+  var hText;
+  if (pairPerPopWithId[d.id]==-1){
+	hText = "no data";
+	}
+	else{
+	hText = pairNameWithId[d.id] + " : " + pairPerPopWithId[d.id]+"% of "+pairPopWithId[d.id]+avgText;
+	}
+ d3.select(this).transition().duration(300).style("opacity", 1);
+ div.transition().duration(300)
+ .style("opacity", 1)
+ div.html(hText)
+ .style("left", (d3.event.pageX) + "px")
+ .style("top", (d3.event.pageY -30) + "px")
+ .style("height",70+"px");
+ })
+ .on("mouseout", function() {
+ d3.select(this)
+ .transition().duration(300)
+ .style("opacity", 0.8);
+ div.transition().duration(300)
+ .style("opacity", 0);
+ })
+
+ };
+
+var legend = svg.selectAll("g.legend")
+ .data(ext_color_domain)
+ .enter().append("g")
+ .attr("class", "legend");
+
+var ls_w = 20, ls_h = 20;
+
+legend.append("rect")
+ .attr("x", 20)
+ .attr("y", function(d, i){ return height - (i*ls_h) - 2*ls_h;})
+ .attr("width", ls_w)
+ .attr("height", ls_h)
+ .style("fill", function(d, i) { return color(d); })
+ .style("opacity", 0.8);
+
+legend.append("text")
+ .attr("x", 50)
+ .attr("y", function(d, i){ return height - (i*ls_h) - ls_h - 4;})
+ .text(function(d, i){ return legend_labels[i]; });
+ }
+</script>
+
+</body>
+
+<script>
+$.get('data/listdata.csv', function(data) {
+
+	// start the table	
+	var html = '<table class="table table-hover">';
+
+	// split into lines
+	var rows = data.split("\n");
+	// parse lines
+	rows.forEach( function getvalues(ourrow) {
+		// split line into columns
+		var ctype="td";
+		var ctype2;
+		var ctype3;
+		var columns = ourrow.split(",");
+		if (columns[0] == "0"){
+			html += "<thead>";
+			ctype = "th class=\"header\" onClick=\"sort_table(chronic, 0, asc1); asc1 *= -1; asc2 = 1; asc3 = 1;\"";
+			ctype2="th";
+			ctype3="th></thead><tbody id=chronic>";
+			}
+		else {
+			ctype = "td onClick=\"changeSrc('"+columns[1]+"')\"";
+			ctype2="td";
+			ctype3="td>";
+			}
+		// start a table row
+		html += "<tr id=\"menu\" >";
+		html += "<"+ctype+"><font size=1>" + columns[1] + "</font></"+ctype2+">";
+		html += "<"+ctype+"><font size=1>" + columns[2] + "</font></"+ctype2+">";
+		//html += "<"+ctype+"><font size=1>" + columns[3] + "</font></"+ctype+">";
+		html += "<"+ctype+"><font size=1>" + columns[4] + "</font></"+ctype2+">";
+		html += "<"+ctype+"><font size=1>" + columns[5] + "</font></"+ctype2+">";
+		html += "<"+ctype+"><font size=1>" + columns[6] + "</font></"+ctype3;
+
+		// close row
+		html += "</tr>";		
+	})
+	// close table
+	html += "</tbody></table>";
+
+	// insert into div
+	$('#CSVTable').append(html);
+
+});
+</script>
+</html>
+
+
+
+
+
+