D3 Examples - Hospital Margins

xxxxxxxxxx
 
<!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>
​
    