kirkhunter/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Project 3


## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

h2.title {
color: black;
text-align: left;
}

.categories {
fill: none;
stroke: #fff;
stroke-linejoin: round;
}

.categories-choropleth {
fill: #ccc;
}

#tooltip-container {
position: absolute;
background-color: #fff;
color: #000;
padding: 10px;
border: 1px solid;
display: none;
}

#canvas svg {
border: 0px;
}

.tooltip_key {
font-weight: bold;
}

.tooltip_value {
margin-left: 20px;
float: right;
}

.x-axis {
fill: #000;
}

.chart {
background: #fff;
margin: 5px;
}

.chart .category-bar {
stroke: white;
fill: steelblue;
}

.chart text.name {
fill: #000;
}

.chart line {
stroke: #c1c1c1;
}

.chart .rule {
fill: #000;
}

.main-category-text {
fill: #FF4A4A;
}

.main-category-bar {
stroke: #FF4A4A;
stroke-width: 2px;
}

path {  stroke: #fff; }
path:hover {  opacity:0.9; }
rect:hover {  fill:steelblue; }
.axis {  font: 10px sans-serif; }
.legend tr{    border-bottom:1px solid grey; }
.legend tr:first-child{    border-top:1px solid grey; }

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {  display: none; }
.legend{
    margin-bottom:76px;
    display:inline-block;
    border-collapse: collapse;
    border-spacing: 0px;
}
.legend td{
    padding:4px 5px;
    vertical-align:bottom;
}
.legendFreq, .legendPerc{
    align:right;
    width:50px;
}

</style>
<body><h2 text="Healthcare Average Covered Charges (in thousands of dollars)" class="title"></h2></body>
<body id="dashboard"></body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">

d3.select("body")
            .append("h2")
            .text("Healthcare Average Covered Charges (in thousands of dollars)")
            .attr('class', 'title');


          function draw(data) {
        // "use strict";
        // console.log(data)

var WIDTH = 800, HEIGHT = 400;

var COLOR_COUNTS = 9;

var SCALE = 0.7;

var config = {
          "main_category": "Washington",
          "avg_category": "Nation Average",
          "color1": '#c3e2ff',
          "color2": '#08306B',
          "stateDataColumn": "provider_state",
          "valueDataColumn": "med_average_covered_charges"
        };

var MAIN_CATEGORY = config.mainCategory;
var AVG_CATEGORY = config.averageCategory;

function Interpolate(start, end, steps, count) {
    var s = start,
        e = end,
        final = s + (((e - s) / steps) * count);
    return Math.floor(final);
};

function Color(_r, _g, _b) {
    var r, g, b;
    var setColors = function(_r, _g, _b) {
        r = _r;
        g = _g;
        b = _b;
    };

    setColors(_r, _g, _b);
    this.getColors = function() {
        var colors = {
            r: r,
            g: g,
            b: b
        };
        return colors;
    };
};

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
};

var COLOR_FIRST = config.color1, COLOR_LAST = config.color2;

var rgb = hexToRgb(COLOR_FIRST);

var COLOR_START = new Color(rgb.r, rgb.g, rgb.b);

rgb = hexToRgb(COLOR_LAST);
var COLOR_END = new Color(rgb.r, rgb.g, rgb.b);

var MAP_CATEGORY = config.stateDataColumn;
var MAP_VALUE = config.valueDataColumn;

var width = WIDTH,
    height = HEIGHT;

var valueById = d3.map();

var startColors = COLOR_START.getColors(),
    endColors = COLOR_END.getColors();

var colors = [];

for (var i = 0; i < COLOR_COUNTS; i++) {
  var r = Interpolate(startColors.r, endColors.r, COLOR_COUNTS, i);
  var g = Interpolate(startColors.g, endColors.g, COLOR_COUNTS, i);
  var b = Interpolate(startColors.b, endColors.b, COLOR_COUNTS, i);
  colors.push(new Color(r, g, b));
};

var quantize = d3.scale.quantize()
    .domain([0, 1.0])
    .range(d3.range(COLOR_COUNTS).map(function(i) { return i }));

var path = d3.geo.path();

var svg = d3.select("#canvas-svg").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.tsv("https://s3-us-west-2.amazonaws.com/vida-public/geo/us-state-names.tsv", function(error, names) {
// console.log(names);

name_id_map = {};
id_name_map = {};

for (var i = 0; i < names.length; i++) {
  name_id_map[names[i].name] = names[i].id;
  id_name_map[names[i].id] = names[i].name;
};
console.log(name_id_map);
console.log(id_name_map);

data.forEach(function(d) {
  var id = name_id_map[d[MAP_CATEGORY]];
  valueById.set(id, +d[MAP_VALUE]);
});

quantize.domain([d3.min(data, function(d){ return +d[MAP_VALUE] }),
  d3.max(data, function(d){ return +d[MAP_VALUE] })]);


function makeMap(us) {
  svg.append("g")
      .attr("class", "categories-choropleth")
    .selectAll("path")
      .data(topojson.feature(us, us.objects.states).features)
    .enter().append("path")
      .attr("transform", "scale(" + SCALE + ")")
      .style("fill", function(d) {
        if (valueById.get(d.id)) {
          var i = quantize(valueById.get(d.id));
          var color = colors[i].getColors();
          return "rgb(" + color.r + "," + color.g +
              "," + color.b + ")";
        } else {
          return "";
        }
      })
      .attr("d", path)
      .on("mousemove", function(d) {
          console.log(d);
          var html = "";

          html += "<div class=\"tooltip_kv\">";
          html += "<span class=\"tooltip_key\">";
          html += id_name_map[d.id];
          html += "</span>";
          html += "<span class=\"tooltip_value\">";
          html += (valueById.get(d.id) ? (Math.round(+valueById.get(d.id) / 10.) / 100) : "");
          html += "";
          html += "</span>";
          html += "</div>";

          $("#tooltip-container").html(html);
          $(this).attr("fill-opacity", "0.8");
          $("#tooltip-container").show(); console.log(html);

          var coordinates = d3.mouse(this);

          var map_width = $('.categories-choropleth')[0].getBoundingClientRect().width;

          if (d3.event.layerX < map_width / 2) {
            d3.select("#tooltip-container")
              .style("top", (d3.event.layerY + 15) + "px")
              .style("left", (d3.event.layerX + 15) + "px");
          } else {
            var tooltip_width = $("#tooltip-container").width();
            d3.select("#tooltip-container")
              .style("top", (d3.event.layerY + 15) + "px")
              .style("left", (d3.event.layerX - tooltip_width - 30) + "px");
          }
      })
      .on("mouseout", function() {
              $(this).attr("fill-opacity", "1.0");
              $("#tooltip-container").hide();
          });

  svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "categories")
      .attr("transform", "scale(" + SCALE + ")")
      .attr("d", path);
};

d3.json("https://s3-us-west-2.amazonaws.com/vida-public/geo/us.json", function(error, us) {
  makeMap(us);
});

});

};

d3.csv("https://raw.githubusercontent.com/KirkHunter/KirkHunter.github.io/master/health.csv", draw);

</script>
<body>
<div id="tooltip-container"></div>
<div id="canvas-svg"></div>
</body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	h2.title {
	color: black;
	text-align: left;
	}

	.categories {
	fill: none;
	stroke: #fff;
	stroke-linejoin: round;
	}

	.categories-choropleth {
	fill: #ccc;
	}

	#tooltip-container {
	position: absolute;
	background-color: #fff;
	color: #000;
	padding: 10px;
	border: 1px solid;
	display: none;
	}

	#canvas svg {
	border: 0px;
	}

	.tooltip_key {
	font-weight: bold;
	}

	.tooltip_value {
	margin-left: 20px;
	float: right;
	}

	.x-axis {
	fill: #000;
	}

	.chart {
	background: #fff;
	margin: 5px;
	}

	.chart .category-bar {
	stroke: white;
	fill: steelblue;
	}

	.chart text.name {
	fill: #000;
	}

	.chart line {
	stroke: #c1c1c1;
	}

	.chart .rule {
	fill: #000;
	}

	.main-category-text {
	fill: #FF4A4A;
	}

	.main-category-bar {
	stroke: #FF4A4A;
	stroke-width: 2px;
	}

	path { stroke: #fff; }
	path:hover { opacity:0.9; }
	rect:hover { fill:steelblue; }
	.axis { font: 10px sans-serif; }
	.legend tr{ border-bottom:1px solid grey; }
	.legend tr:first-child{ border-top:1px solid grey; }

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.x.axis path { display: none; }
	.legend{
	margin-bottom:76px;
	display:inline-block;
	border-collapse: collapse;
	border-spacing: 0px;
	}
	.legend td{
	padding:4px 5px;
	vertical-align:bottom;
	}
	.legendFreq, .legendPerc{
	align:right;
	width:50px;
	}

	</style>
	<body><h2 text="Healthcare Average Covered Charges (in thousands of dollars)" class="title"></h2></body>
	<body id="dashboard"></body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">

	d3.select("body")
	.append("h2")
	.text("Healthcare Average Covered Charges (in thousands of dollars)")
	.attr('class', 'title');







	function draw(data) {
	// "use strict";
	// console.log(data)

	var WIDTH = 800, HEIGHT = 400;

	var COLOR_COUNTS = 9;

	var SCALE = 0.7;

	var config = {
	"main_category": "Washington",
	"avg_category": "Nation Average",
	"color1": '#c3e2ff',
	"color2": '#08306B',
	"stateDataColumn": "provider_state",
	"valueDataColumn": "med_average_covered_charges"
	};

	var MAIN_CATEGORY = config.mainCategory;
	var AVG_CATEGORY = config.averageCategory;

	function Interpolate(start, end, steps, count) {
	var s = start,
	e = end,
	final = s + (((e - s) / steps) * count);
	return Math.floor(final);
	};

	function Color(_r, _g, _b) {
	var r, g, b;
	var setColors = function(_r, _g, _b) {
	r = _r;
	g = _g;
	b = _b;
	};

	setColors(_r, _g, _b);
	this.getColors = function() {
	var colors = {
	r: r,
	g: g,
	b: b
	};
	return colors;
	};
	};

	function hexToRgb(hex) {
	var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
	return result ? {
	r: parseInt(result[1], 16),
	g: parseInt(result[2], 16),
	b: parseInt(result[3], 16)
	} : null;
	};

	var COLOR_FIRST = config.color1, COLOR_LAST = config.color2;

	var rgb = hexToRgb(COLOR_FIRST);

	var COLOR_START = new Color(rgb.r, rgb.g, rgb.b);

	rgb = hexToRgb(COLOR_LAST);
	var COLOR_END = new Color(rgb.r, rgb.g, rgb.b);

	var MAP_CATEGORY = config.stateDataColumn;
	var MAP_VALUE = config.valueDataColumn;

	var width = WIDTH,
	height = HEIGHT;

	var valueById = d3.map();

	var startColors = COLOR_START.getColors(),
	endColors = COLOR_END.getColors();

	var colors = [];

	for (var i = 0; i < COLOR_COUNTS; i++) {
	var r = Interpolate(startColors.r, endColors.r, COLOR_COUNTS, i);
	var g = Interpolate(startColors.g, endColors.g, COLOR_COUNTS, i);
	var b = Interpolate(startColors.b, endColors.b, COLOR_COUNTS, i);
	colors.push(new Color(r, g, b));
	};

	var quantize = d3.scale.quantize()
	.domain([0, 1.0])
	.range(d3.range(COLOR_COUNTS).map(function(i) { return i }));

	var path = d3.geo.path();

	var svg = d3.select("#canvas-svg").append("svg")
	.attr("width", width)
	.attr("height", height);

	d3.tsv("https://s3-us-west-2.amazonaws.com/vida-public/geo/us-state-names.tsv", function(error, names) {
	// console.log(names);

	name_id_map = {};
	id_name_map = {};

	for (var i = 0; i < names.length; i++) {
	name_id_map[names[i].name] = names[i].id;
	id_name_map[names[i].id] = names[i].name;
	};
	console.log(name_id_map);
	console.log(id_name_map);

	data.forEach(function(d) {
	var id = name_id_map[d[MAP_CATEGORY]];
	valueById.set(id, +d[MAP_VALUE]);
	});

	quantize.domain([d3.min(data, function(d){ return +d[MAP_VALUE] }),
	d3.max(data, function(d){ return +d[MAP_VALUE] })]);



	function makeMap(us) {
	svg.append("g")
	.attr("class", "categories-choropleth")
	.selectAll("path")
	.data(topojson.feature(us, us.objects.states).features)
	.enter().append("path")
	.attr("transform", "scale(" + SCALE + ")")
	.style("fill", function(d) {
	if (valueById.get(d.id)) {
	var i = quantize(valueById.get(d.id));
	var color = colors[i].getColors();
	return "rgb(" + color.r + "," + color.g +
	"," + color.b + ")";
	} else {
	return "";
	}
	})
	.attr("d", path)
	.on("mousemove", function(d) {
	console.log(d);
	var html = "";

	html += "<div class=\"tooltip_kv\">";
	html += "<span class=\"tooltip_key\">";
	html += id_name_map[d.id];
	html += "</span>";
	html += "<span class=\"tooltip_value\">";
	html += (valueById.get(d.id) ? (Math.round(+valueById.get(d.id) / 10.) / 100) : "");
	html += "";
	html += "</span>";
	html += "</div>";

	$("#tooltip-container").html(html);
	$(this).attr("fill-opacity", "0.8");
	$("#tooltip-container").show(); console.log(html);

	var coordinates = d3.mouse(this);

	var map_width = $('.categories-choropleth')[0].getBoundingClientRect().width;

	if (d3.event.layerX < map_width / 2) {
	d3.select("#tooltip-container")
	.style("top", (d3.event.layerY + 15) + "px")
	.style("left", (d3.event.layerX + 15) + "px");
	} else {
	var tooltip_width = $("#tooltip-container").width();
	d3.select("#tooltip-container")
	.style("top", (d3.event.layerY + 15) + "px")
	.style("left", (d3.event.layerX - tooltip_width - 30) + "px");
	}
	})
	.on("mouseout", function() {
	$(this).attr("fill-opacity", "1.0");
	$("#tooltip-container").hide();
	});

	svg.append("path")
	.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
	.attr("class", "categories")
	.attr("transform", "scale(" + SCALE + ")")
	.attr("d", path);
	};

	d3.json("https://s3-us-west-2.amazonaws.com/vida-public/geo/us.json", function(error, us) {
	makeMap(us);
	});

	});

	};

	d3.csv("https://raw.githubusercontent.com/KirkHunter/KirkHunter.github.io/master/health.csv", draw);

	</script>
	<body>
	<div id="tooltip-container"></div>
	<div id="canvas-svg"></div>
	</body>