Hospital Margins

forked from anonymous's block: fresh block

forked from mforando's block: Hospital Margins

<!DOCTYPE html>       
<head>    
  <meta charset="utf-8"> 
  <script src="https://d3js.org/d3.v4.min.js"></script> 
  <style> 
    body {    
      			margin:0;
      			position:fixed; 
      			top:0;  
      			right:0;
      			bottom:0;
      			left:0; }         
    .axis1 {    
      			stroke: rgb(0,0,0);       
      			opacity:.2;}      
    circle {
      			opacity: .75; 
    				stroke: black;
    				stroke-width: .5px;}
    circle:hover {
      			opacity: 1;
      			stroke-width: 3px;
      			stroke:black}
    div.tooltip {    
            position: absolute;           
            text-align: center;           
            width: 60px;                  
            height: 28px;                 
            padding: 2px;             
            font: 12px sans-serif;        
            background: lightsteelblue;   
            border: 0px;      
            border-radius: 8px;           
            pointer-events: none;         
          }    
  </style>    
</head>        
<body>  
  
  <div id="option">
    <input name="updateButton" 
           type="button" 
           value="Update" 
           onclick="updateData()" />
  </div>
  
  <script>  
       
    	var width = 900;
    	var height = 225; 
    	var margin = {top: 20, right: 10, bottom: 20, left: 10};
    	var offset = 50;
    
        var svg = d3.select("body").append("svg")
          .attr("width", width)  
          .attr("height", height);

d3.csv("BillData2.csv", function(err, data) { 
      
          var x = d3.scaleLinear().rangeRound([0+offset, width-offset]);
            x.domain([-.5,.5]);

var r = d3.scaleLinear().rangeRound([1, 20]);
              r.domain(d3.extent(data, function(d,i) { return Number(data[i].Value2015); }));

var xAxis = d3.axisBottom(x).tickSize(0);;
          var axisElements = d3.select('svg').append('g')
          	.attr('class','axis1')
            .attr('transform', 'translate(0,'+height/2+')')
            .call(xAxis);

axisElements.selectAll("text").remove();
          axisElements.selectAll("tick").remove()

var xAxis2 = d3.axisBottom(x);
          var axisElements2 = d3.select('svg').append('g')
          	.attr('class','axis2')
            .call(xAxis2);
          
          axisElements2.selectAll("path").remove();

var simulation = d3.forceSimulation(data)
              .force("x", d3.forceX(function(d,i) { return x(Number(data[i].Value2015)); }).strength(1))
              .force("y", d3.forceY(height / 2))
              .force("collide", d3.forceCollide(5.1))
              .stop();

//console.log(data)
          for (var i = 0; i < 500; ++i) simulation.tick();

var color = d3.scaleOrdinal(d3.schemeCategory10);

svg.selectAll("body").append("g").data(data).enter()
              .append("circle")
							.attr("r", 2)
              .attr("cx", function(d,i) { return data[i].x; })
              .attr("cy", function(d,i) { return height/2; })
            	.style("fill", function(d,i) {return color(data[i].Color2015)})  
	            .transition()
            	.duration(750)
          		.delay(500)
          		.ease(d3.easeCubic)
							.attr("r",  function(d,i) { return 5; })
              .attr("cx", function(d,i) { return data[i].x; })
              .attr("cy", function(d,i) { return data[i].y; })
            .on("mouseover", mouseover)

})
        
function updateData() {

// Get the data again
    d3.csv("BillData2.csv", function(error, data) {
       	data.forEach(function(d) {
	    	d.date = parseDate(d.date);
	    	d.close = +d.close;
	    });

// Scale the range of the data again 
    	x.domain(d3.extent(data, function(d) { return d.date; }));
	    y.domain([0, d3.max(data, function(d) { return d.close; })]);

// Select the section we want to apply our changes to
    var svg = d3.select("body").transition();

// Make the changes
        svg.select(".line")   // change the line
            .duration(750)
            .attr("d", valueline(data));
        svg.select(".x.axis") // change the x axis
            .duration(750)
            .call(xAxis);
        svg.select(".y.axis") // change the y axis
            .duration(750)
            .call(yAxis);

});
}       
    
      function mouseover(d, i, nodes) {
        console.log(d)
      }
        
  </script>
</body>

https://d3js.org/d3.v4.min.js