D3 Examples - Spendink!

xxxxxxxxxx
 
<!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="https://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>
    