Area Hospitals See High Surpluses

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=News+Cycle" rel="stylesheet">
  <style>
    body {  }
    .main {
      /* if you want newspaper background colors! */
      /*background-color:#D4D4D4; */
      /*background-color:#F8ECC2; */
      opacity:0.9;
    }
    
    .xAxis line{
      stroke:#000;
      fill:none;
    }

text{
      font-family: 'News Cycle', sans-serif;
      font-size:20px;
    }
    
    .lineHealth{
      opacity:0.78;
      stroke-width:5;
    }
  </style>
</head>

<body>
  <script>
    
    var outerHeight = 500;
    var outerWidth = 960;
    var margin = {"left":54,"right":40,"top":22,"bottom":26};
    var innerHeight = outerHeight -margin.top - margin.bottom;
    var innerWidth = outerWidth - margin.left - margin.right;
    var title = "Area Hospitals See High Surpluses";
    var colors = ["steelblue","red","green","purple","orange"];
    var extraheight = 80;
    
    
    var svg = d3.select("body").append("svg")
    	.attr("class","main")
      .attr("width", outerWidth)
      .attr("height", outerHeight+extraheight);

var g = svg.append("g")
    .attr("transform","translate("+margin.left+","+margin.top+")")
    ;
    
	var xScale;
  var yScale;
    
    xScale =  d3.scaleLinear()
      .range([0,innerWidth])
      ;
      yScale = d3.scaleLinear()
      .range([innerHeight,0])
      ;

var legend = svg.append("g")
      .selectAll("g")
      .data(colors)
      .enter()
      .append('g')
      	.attr('class', 'legend')
      .attr("transform","translate(350,348)")
      ;
    
    
    legend.append('rect')
      .attr('width', 500)
      .attr('height', 130)
      .style('fill', "none")
      .style('stroke', "none");

legend.append('circle')
    	.attr('cx', 10)
      .attr('cy', 15)
      .style('r', 6)
      .style('fill', "steelblue");
    legend.append('text')
        .attr('x', 20)
        .attr('y', 20)
        .text("HEART OF LANCASTER REGIONAL MEDICAL CENTER*");
    
    legend.append('circle')
    	.attr('cx', 10)
      .attr('cy', 35)
      .style('r', 6)
      .style('fill', "red");
    legend.append('text')
        .attr('x', 20)
        .attr('y', 40)
        .text("LANCASTER GENERAL HOSPITAL");
    
    legend.append('circle')
    	.attr('cx', 10)
      .attr('cy', 55)
      .style('r', 6)
      .style('fill', "green");
    legend.append('text')
        .attr('x', 20)
        .attr('y', 60)
        .text("LANCASTER REGIONAL MEDICAL CENTER");
    
    legend.append('circle')
    	.attr('cx', 10)
      .attr('cy', 75)
      .style('r', 6)
      .style('fill', "purple");
    legend.append('text')
        .attr('x', 20)
        .attr('y', 80)
        .text("PENN STATE HEALTH MILTON S. HERSHEY MEDICAL CENTER");
    
    legend.append('circle')
    	.attr('cx', 10)
      .attr('cy', 95)
      .style('r', 6)
      .style('fill', "orange");
    legend.append('text')
        .attr('x', 20)
        .attr('y', 100)
        .text("WELLSPAN EPHRATA COMMUNITY CENTER");
    
    
    var astLegend = svg.append("text")
    	.attr("transform","translate(0,525)")
    .text("* For profit and subject to federal income taxes until July 1, 2017; now part of nonprofit UPMC Pinnacle");
    
    var stabLegend = svg.append("text")
    	.attr("transform","translate(60,150)")
    .text("5%");
    var stabLegend1 = svg.append("text")
    	.attr("transform","translate(60,170)")
    .text("Needed");
    var stabLegend2 = svg.append("text")
    	.attr("transform","translate(60,190)")
    .text("to maintain");
    var stabLegend3 = svg.append("text")
    	.attr("transform","translate(60,210)")
    .text("financial");
    var stabLegend4 = svg.append("text")
    	.attr("transform","translate(60,230)")
    .text("stability");
      
    var lineHOL = d3.line()
      	.x(function(d){return xScale(d.Years);})
      	.y(function(d){return yScale(d.Heart_of_Lancaster_Regional_Medical);});
    var lineLGH = d3.line()
      	.x(function(d){return xScale(d.Years);})
      	.y(function(d){return yScale(d.Lancaster_General_Hospital);});
    var lineLRMC = d3.line()
      	.x(function(d){return xScale(d.Years);})
      	.y(function(d){return yScale(d.Lancaster_Regional_Medical_Center);});
    var linePS = d3.line()
      	.x(function(d){return xScale(d.Years);})
      	.y(function(d){return yScale(d.Penn_State_Health_Milton_S_Hershey_Medical_Center);});
    var lineWECH = d3.line()
      	.x(function(d){return xScale(d.Years);})
      	.y(function(d){return yScale(d.Wellspan_Ephrata_Community_Hospital);});
    
    var data = d3.csv("AreaHospitalsHighSurpluses.csv").then(function(data){
			console.log("data:",data);
      
      xScale.domain([2007,2017]);
      yScale.domain([-0.12,0.25]);
     
      
      var xAxis = d3.axisBottom(xScale).tickFormat(d3.format("d"));
      var yAxis = d3.axisLeft(yScale).tickFormat(d3.format(".0%")).tickSize(-innerWidth, 0);

var xAxisG = g.append("g").attr("class","xAxis").call(xAxis).attr("transform","translate(0,"+innerHeight+")")
      var yAxisG = g.append("g").attr("class","yAxis").call(yAxis).selectAll(".tick line").attr("stroke", "#777").attr("stroke-dasharray", "2,2");;
      
      var finStab = g.append("rect")
      	.attr("x",0)
      	.attr("y",yScale(0.065))
      	.attr("width",innerWidth)
      	.attr("height",36)
      	.attr("fill","gray")
      	.attr("opacity",0.5);
      
		
      
     /* for(var i=0;i<data.length;i++)
        {
          data[i].Years = +data[i].Years;
        data[i]["Heart_of_Lancaster_Regional_Medical"]=+data[i]["Heart_of_Lancaster_Regional_Medical"];
        data[i]["Lancaster_General_Hospital"]=+data[i]["Lancaster_General_Hospital"];
        data[i]["Lancaster_Regional_Medical_Center"]=+data[i]["Lancaster_Regional_Medical_Center"];
        data[i]["Penn_State_Health_Milton_S_Hershey_Medical_Center"]=+data[i]["Penn_State_Health_Milton_S_Hershey_Medical_Center"];
        data[i]["Wellspan_Ephrata_Community_Hospital"]=+data[i]["Wellspan_Ephrata_Community_Hospital"];
        
          
        }
        */

g.append("path").datum(data)
      	.attr("class","lineHealth")
      	.attr("fill","none")
      	.attr("stroke","steelblue")
      	.attr("stroke-width",1.5)
      	.attr("d",lineHOL)
      g.append("path").datum(data)
      	.attr("class","lineHealth")
      	.attr("fill","none")
      	.attr("stroke","red")
      	.attr("stroke-width",1.5)
      	.attr("d",lineLGH)
      g.append("path").datum(data)
      	.attr("class","lineHealth")
      	.attr("fill","none")
      	.attr("stroke","green")
      	.attr("stroke-width",1.5)
      	.attr("d",lineLRMC)
      g.append("path").datum(data)
      	.attr("class","lineHealth")
      	.attr("fill","none")
      	.attr("stroke","purple")
      	.attr("stroke-width",1.5)
      	.attr("d",linePS)
      g.append("path").datum(data)
      	.attr("class","lineHealth")
      	.attr("fill","none")
      	.attr("stroke","orange")
      	.attr("stroke-width",1.5)
      	.attr("d",lineWECH);
    	
      
    });

</script>
</body>

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