Bcohn · March 11, 2016 21:33
diff --git a/costs.csv b/costs.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">

 <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 <style>

 .yAxis text {
  font: 10px sans-serif;
 }
 .xAxis text {
  font: 10px sans-serif;
 }

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

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


 .d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
 }

 /* Creates a small triangle extender for the tooltip */
 .d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
 }

 /* Style northward tooltips differently */
 .d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
 }
 .dot{
 	opacity:.7;
 	fill: #1A2F4B;
 }

 text{
    font-family: 'Open Sans', sans-serif;
 }

 </style>

 <body>

 <div id="chart">
 </div>

 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

 <!-- Latest compiled and minified JavaScript -->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
 <script src="//d3js.org/d3.v3.min.js"></script>
 <script src="//d3js.org/topojson.v1.min.js"></script>
 <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
 <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

 <script>


 (function(){


 var pretty = d3.format(",")
 var margin = {top:40, bottom:40, left:100, right:100};
 var width = 800-margin.left - margin.right;
 var height = 600-margin.top-margin.bottom;



 var x = d3.scale.log()
 		  .domain([10,1100000])
 		  .range([0, width]);

 var y = d3.scale.log()
 		  .domain([100,4000000000])
 		  .range([height,0]);

 var yAxis = d3.svg.axis()
 			  .scale(y) 
 			  .ticks(4) 
 			  .tickFormat(function (d) {
 				return y.tickFormat(4,d3.format("$,f"))(d)
 				})			  
 			  .orient("left");

 var xAxis =  d3.svg.axis()
 			  .scale(x)  
 			  .ticks(4)
 			  .tickFormat(function (d) {
 				return x.tickFormat(4,d3.format(",d"))(d)
 				})			  
 			  .orient("bottom");
 			

 var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return d.icd_code + "<br>" + pretty(d.totalEncounters) +" encounters" +"<br>" + "$"+ pretty(d.totalCost);
  })


 var svg = d3.select("#chart")    
 	.attr("align","center")
 	.append("svg")
    .attr("class", "axis")
    .attr("width",width + margin.left+margin.right )
    .attr("height", height + margin.top+margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 svg.call(tip);

 svg.append('rect')
   .attr("width",width)
   .attr("height",height);

 var graphSVG = svg
    .append("svg:svg")
    .attr('width', 600)
    .attr('height', 520);


 var container = graphSVG.append('g');



 svg.append("g")
    .attr("class","yAxis")
    .call(yAxis);

 svg.append("g")
    .attr("transform", "translate(0,"+height+")")
 	.attr("class","xAxis")
    .call(xAxis);



 svg.append("text")
    .attr("class", "x label")
    .attr("text-anchor", "end")
    .attr("x", width)
    .attr("y", height - 6)
    .style("font-size","10px")
    .text("Encounters");


 svg.append("text")
    .attr("class", "y label")
    .attr("text-anchor", "end")
    .attr("y", 6)
    .attr("dy", ".75em")
    .attr("transform", "rotate(-90)")
    .style("font-size","10px")
    .text("Total spending");


 svg.append("text")
      .attr("class", "title")
      .attr("x", width/2)
      .attr("y", 0 - (margin.top / 2))
      .attr("text-anchor", "middle")
 	  .style("font-size","18px")
 	  .style("font-weight",800)
      .text("Medicare spending: 2012");
   


    // Draw transparent rectangle and zoom on mouseup
 var brush = d3.svg.brush()
      .x(x)
      .y(y)
      .clamp([false,false])
      .on("brushend", brushZoom);



 container.append("g")
      .attr('class', 'brush')
      .call(brush)
      .selectAll("rect")
      .style('fill-opacity', 0.5)
      .style('fill', 'gray');

    
 d3.csv("costs.csv", function(error, dataInput) {
  if (error) throw error;
 //  dataInput=dataInput.slice(1,100)
  dataInput.forEach(function(d) {
  	d.totalCost = dollarConvert(d.totalCost);
  	if(d.totalCost===0){d.totalCost=1;}
 	d.totalEncounters =+d.totalEncounters;
 	    });
 	

    container.selectAll(".dot")
      .data(dataInput)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", function(d) { return x(d.totalEncounters); })
      .attr("cy", function(d) { return y(d.totalCost); })
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)
      .on('mousedown', function(){
 		  brush_elm = svg.select(".brush").node();
 		  new_click_event = new Event('mousedown');
 		  new_click_event.pageX = d3.event.pageX;
 		  new_click_event.clientX = d3.event.clientX;
 		  new_click_event.pageY = d3.event.pageY;
 		  new_click_event.clientY = d3.event.clientY;
 		  brush_elm.dispatchEvent(new_click_event);
 		  });

   });

 function dollarConvert(n){
 	return +(n.replace("$", ''))
 }

 function brushZoom(){
        var extent = brush.extent();
        var brushx = Math.abs(x(extent[0][0])-x(extent[1][0]));
        var brushy = Math.abs(y(extent[0][1])-y(extent[1][1]));
       if(brushx+brushy>10){ 
       	brushZoomIn(extent)
 	    }
 	    else {
 	    	brushZoomOut()
 	    }
 	           

 	        brush.clear();
 	        svg.select('.brush').call(brush);
 }

 function brushZoomIn(extent){
 	        y.domain([extent[0][1], extent[1][1]]);
 	        x.domain([extent[0][0], extent[1][0]]);

 	       yAxis.scale(y); 
 	       xAxis.scale(x); 

 	        container.selectAll('.dot')
 	           .attr("cx", function(d) { return x(d.totalEncounters); })
 	           .attr("cy", function(d) { return y(d.totalCost); });

 	        svg.select(".xAxis")
 	           .call(xAxis);


 	        svg.select(".yAxis")
 	           .call(yAxis);
 }

 function brushZoomOut(){
 		 y.domain([100,4000000000]);
 	     x.domain([10,1100000]);

 	     yAxis.scale(y); 
 	     xAxis.scale(x); 

 	     container.selectAll('.dot')
 	    	 .attr("cx", function(d) { return x(d.totalEncounters); })
 	         .attr("cy", function(d) { return y(d.totalCost); });

 	     svg.select(".xAxis")
 	          .call(xAxis);


 	     svg.select(".yAxis")
 	          .call(yAxis);
 }





 })();


 </script>
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">

	<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
	<style>

	.yAxis text {
	font: 10px sans-serif;
	}
	.xAxis text {
	font: 10px sans-serif;
	}

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

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


	.d3-tip {
	line-height: 1;
	font-weight: bold;
	padding: 12px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	border-radius: 2px;
	}

	/* Creates a small triangle extender for the tooltip */
	.d3-tip:after {
	box-sizing: border-box;
	display: inline;
	font-size: 10px;
	width: 100%;
	line-height: 1;
	color: rgba(0, 0, 0, 0.8);
	content: "\25BC";
	position: absolute;
	text-align: center;
	}

	/* Style northward tooltips differently */
	.d3-tip.n:after {
	margin: -1px 0 0 0;
	top: 100%;
	left: 0;
	}
	.dot{
	opacity:.7;
	fill: #1A2F4B;
	}

	text{
	font-family: 'Open Sans', sans-serif;
	}

	</style>

	<body>

	<div id="chart">
	</div>

	<script src="//code.jquery.com/jquery-1.10.2.js"></script>
	<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
	<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

	<script>


	(function(){


	var pretty = d3.format(",")
	var margin = {top:40, bottom:40, left:100, right:100};
	var width = 800-margin.left - margin.right;
	var height = 600-margin.top-margin.bottom;



	var x = d3.scale.log()
	.domain([10,1100000])
	.range([0, width]);

	var y = d3.scale.log()
	.domain([100,4000000000])
	.range([height,0]);

	var yAxis = d3.svg.axis()
	.scale(y)
	.ticks(4)
	.tickFormat(function (d) {
	return y.tickFormat(4,d3.format("$,f"))(d)
	})
	.orient("left");

	var xAxis = d3.svg.axis()
	.scale(x)
	.ticks(4)
	.tickFormat(function (d) {
	return x.tickFormat(4,d3.format(",d"))(d)
	})
	.orient("bottom");


	var tip = d3.tip()
	.attr('class', 'd3-tip')
	.offset([-10, 0])
	.html(function(d) {
	return d.icd_code + "<br>" + pretty(d.totalEncounters) +" encounters" +"<br>" + "$"+ pretty(d.totalCost);
	})


	var svg = d3.select("#chart")
	.attr("align","center")
	.append("svg")
	.attr("class", "axis")
	.attr("width",width + margin.left+margin.right )
	.attr("height", height + margin.top+margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	svg.call(tip);

	svg.append('rect')
	.attr("width",width)
	.attr("height",height);

	var graphSVG = svg
	.append("svg:svg")
	.attr('width', 600)
	.attr('height', 520);


	var container = graphSVG.append('g');



	svg.append("g")
	.attr("class","yAxis")
	.call(yAxis);

	svg.append("g")
	.attr("transform", "translate(0,"+height+")")
	.attr("class","xAxis")
	.call(xAxis);



	svg.append("text")
	.attr("class", "x label")
	.attr("text-anchor", "end")
	.attr("x", width)
	.attr("y", height - 6)
	.style("font-size","10px")
	.text("Encounters");


	svg.append("text")
	.attr("class", "y label")
	.attr("text-anchor", "end")
	.attr("y", 6)
	.attr("dy", ".75em")
	.attr("transform", "rotate(-90)")
	.style("font-size","10px")
	.text("Total spending");


	svg.append("text")
	.attr("class", "title")
	.attr("x", width/2)
	.attr("y", 0 - (margin.top / 2))
	.attr("text-anchor", "middle")
	.style("font-size","18px")
	.style("font-weight",800)
	.text("Medicare spending: 2012");



	// Draw transparent rectangle and zoom on mouseup
	var brush = d3.svg.brush()
	.x(x)
	.y(y)
	.clamp([false,false])
	.on("brushend", brushZoom);



	container.append("g")
	.attr('class', 'brush')
	.call(brush)
	.selectAll("rect")
	.style('fill-opacity', 0.5)
	.style('fill', 'gray');


	d3.csv("costs.csv", function(error, dataInput) {
	if (error) throw error;
	// dataInput=dataInput.slice(1,100)
	dataInput.forEach(function(d) {
	d.totalCost = dollarConvert(d.totalCost);
	if(d.totalCost===0){d.totalCost=1;}
	d.totalEncounters =+d.totalEncounters;
	});


	container.selectAll(".dot")
	.data(dataInput)
	.enter().append("circle")
	.attr("class", "dot")
	.attr("r", 3.5)
	.attr("cx", function(d) { return x(d.totalEncounters); })
	.attr("cy", function(d) { return y(d.totalCost); })
	.on('mouseover', tip.show)
	.on('mouseout', tip.hide)
	.on('mousedown', function(){
	brush_elm = svg.select(".brush").node();
	new_click_event = new Event('mousedown');
	new_click_event.pageX = d3.event.pageX;
	new_click_event.clientX = d3.event.clientX;
	new_click_event.pageY = d3.event.pageY;
	new_click_event.clientY = d3.event.clientY;
	brush_elm.dispatchEvent(new_click_event);
	});

	});

	function dollarConvert(n){
	return +(n.replace("$", ''))
	}

	function brushZoom(){
	var extent = brush.extent();
	var brushx = Math.abs(x(extent[0][0])-x(extent[1][0]));
	var brushy = Math.abs(y(extent[0][1])-y(extent[1][1]));
	if(brushx+brushy>10){
	brushZoomIn(extent)
	}
	else {
	brushZoomOut()
	}


	brush.clear();
	svg.select('.brush').call(brush);
	}

	function brushZoomIn(extent){
	y.domain([extent[0][1], extent[1][1]]);
	x.domain([extent[0][0], extent[1][0]]);

	yAxis.scale(y);
	xAxis.scale(x);

	container.selectAll('.dot')
	.attr("cx", function(d) { return x(d.totalEncounters); })
	.attr("cy", function(d) { return y(d.totalCost); });

	svg.select(".xAxis")
	.call(xAxis);


	svg.select(".yAxis")
	.call(yAxis);
	}

	function brushZoomOut(){
	y.domain([100,4000000000]);
	x.domain([10,1100000]);

	yAxis.scale(y);
	xAxis.scale(x);

	container.selectAll('.dot')
	.attr("cx", function(d) { return x(d.totalEncounters); })
	.attr("cy", function(d) { return y(d.totalCost); });

	svg.select(".xAxis")
	.call(xAxis);


	svg.select(".yAxis")
	.call(yAxis);
	}





	})();


	</script>
No results found