Built with blockbuilder.org
xxxxxxxxxx<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