chris-creditdesign · August 16, 2017 09:42
diff --git a/README.md b/README.md
diff --git a/birthCost_styles.css b/birthCost_styles.css
 @font-face {
    font-family: Brunel;
    src: url('fonts/Brunel Deck-Semibold.otf') format("opentype");
 }

 /* Mobile Layout: Max 480px. */

 @media only screen and (max-width: 480px){

 			#desktop {
 				display: none;
 			}
 			#mobile {
 				display: block;
 				background-color: #f4f4f4;
 				height: 835px;
 				width: 260px;
 			}

 			body {
 				background-color: white;
 			}
 			.headline{
 				background-color: #e5e5e5;
 				padding-top: 5px;
 				padding-bottom: 5px;
 				padding-left: 15px;
 				padding-right: 15px;
 				width: 230px;
 				line-height: 1em;
 			}
 			h1 {
 				font-family: Brunel, serif;
 				font-size: 18px;
 				font-weight: lighter;
 				text-align: center;
 			}
 			h2 { 
 				font-family: Arial, sans-serif;
 				font-size: 12px;
 				/*padding-top: 5px;*/
 				font-weight: lighter;
 				text-align: left;
 				background-color: #e5e5e5;
 				line-height: 1.5em;
 			}
 			#container1m {
 				position: absolute;
 				margin-top: 15px;
 				margin-left: 15px;
 				font-family: Arial, sans-serif;
 				font-size: 10px;
 			}
 			.axis text {
  				font: 10px sans-serif;
 			}
 			.menu{
 				font-size: 10px;
 			}

 			.axisLabel text{
 				font-weight: bold;
 			}

 			.labels{
  			position: absolute;
  			width: 260px;
  			margin-top: 16px;
 			}

 			.axis line,
 			.axis path {
 			fill: none;
  			stroke: #000;
  			shape-rendering: crispEdges;
 			}
 			div.tooltip {	
 			    position: absolute;			
 			    text-align: center;							
 			    padding: 5px;				
 			    font: 10px sans-serif;		
 			    background: white;	
 			    border: 0px;		
 			    /*border-radius: 6px;*/			
 			    pointer-events: none;
 			}

 		}

 /* Desktop Layout: 481px and up. */

 @media only screen and (min-width: 481px){

 			#desktop {
 				display: block;
 				background-color: #f4f4f4;
 				height: 760px;
 				width: 570px;
 			}
 			#mobile {
 				display: none;
 			}	

 			body {
 				background-color: white;
 			}
 			.headline{
 				background-color: #e5e5e5;
 				padding-top: 10px;
 				padding-bottom: 10px;
 				padding-left: 20px;
 				padding-right: 20px;
 				width: 530px;
 				line-height: 1em;
 			}
 			h1 {
 				font-family: Brunel, serif;
 				font-size: 24px;
 				font-weight: lighter;
 				text-align: center;
 			}
 			h2 { 
 				font-family: Arial, sans-serif;
 				font-size: 14px;
 				font-weight: lighter;
 				text-align: left;
 				background-color: #e5e5e5;
 				line-height: 1.5em;
 			}

 			#container1 {
 				width: 570px;
 				position: absolute;
 				margin-top: 20px;
 				margin-left: 20px;
 				font-family: Arial, sans-serif;
 				font-size: 12px;
 			}	

 			.axis text {
  				font: 12px sans-serif;
 			}

 			.axisLabel text{
 				font-weight: bold;
 			}

 			.labels{
  			position: absolute;
  			width: 570px;
  			height: 420px;
  			margin-top: 23px;
 			}

 			.axis line,
 			.axis path {
 			fill: none;
  			stroke: #000;
  			shape-rendering: crispEdges;
 			}

 		}
diff --git a/birthCostsByState.csv b/birthCostsByState.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Birth Costs in the US</title>
 		<link href="birthCost_styles.css" rel="stylesheet" type="text/css">
 		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
 	</head>

 <body style = "margin:0px" !important;>

 <!-- MOBILE -->	

 <div id = "mobile">

 <div class="headline">
 		<h1><strong>Birth Costs Head TK</strong></h1>
 		<svg class="dottedLine" width="325" height="5">
 			<line x1="85" x2="135" y1="1" y2="1" stroke="black" stroke-width="2" stroke-dasharray="2, 2" />
 		</svg>
 		<h2>Intro text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at porta orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ante nec nisi eleifend venenatis. Maecenas tempus feugiat facilisis. Sed ultrices, eros vel pulvinar fermentum, elit magna tristique magna, id accumsan massa nisl in ante. Sed condimentum orci eget massa vestibulum, non vulputate justo auctor.</h2>
 	</div>

 	<div class = "labels"><img src="yAxis+legend_mobile.svg"></div>

 	<div id = "container1m">	

 <span style = "font-family: Arial, sans-serif; font-size: 10px">Choose your state:</span>	

 	<script type="text/javascript">

 	var dispatch2 = d3.dispatch("load", "statechange");

 	var groups2 = [
 	  "Metro775charge",
 	  "Metro775cost",
 	  "Metro774charge",
 	  "Metro774cost",
 	  "Metro766charge",
 	  "Metro766cost",
 	  "Metro765charge",
 	  "Metro765cost",
 	  "NonMetro775charge",
 	  "NonMetro775cost",
 	  "NonMetro774charge",
 	  "NonMetro774cost",
 	  "NonMetro766charge",
 	  "NonMetro766cost",
 	  "NonMetro765charge",
 	  "NonMetro765cost"
 	];

 	var positions2 = [5, 25, 55, 75, 105, 125, 155, 175, 215, 235, 265, 285, 315, 335, 365, 385];

 	d3.csv("birthCostsByState.csv", function(error, states) {
 	  if (error) throw error;
 	  var stateById2 = d3.map();
 	  states.forEach(function(d) { stateById2.set(d.id, d); });
 	  dispatch2.load(stateById2);
 	  dispatch2.statechange(stateById2.get("New York"));
 	});

 	// A drop-down menu for selecting a state; uses the "menu" namespace.
 	dispatch2.on("load.menu", function(stateById2) {
 	  var select2 = d3.select("#container1m")
 	      .append("div")
 	      .append("select")
 	      .on("change", function() { dispatch2.statechange(stateById2.get(this.value)); });

 	  select2.selectAll("option")
 	      .data(stateById2.values())
 	      .enter().append("option")
 	      .attr("value", function(d) { return d.id; })
 	      .text(function(d) { return d.id; });

 	  dispatch2.on("statechange.menu", function(state) {
 	    select2.property("value", state.id);
 	  });
 	});


 	// A bar chart to show costs by state; uses the "bar" namespace.
 	dispatch2.on("load.bar", function(stateById2) {

 	  var w2 = 240;
 	  var h2 = 500;
 	  var padding2 = [ 20, 20, 20, 50 ];  //Top, right, bottom, left

 	  var widthScale2 = d3.scale.linear()
 	                .range([ 0, w2 - padding2[1] - padding2[3] ]);

 	  widthScale2.domain([0, 40000]);              
 	      
 	  var heightScale2 = d3.scale.ordinal()
 	                .rangeRoundBands([ padding2[0], h2 - padding2[2] ], 0.5);

 	  var svg2 = d3.select("#container1m")
 	            .append("svg")
 	            .attr("width", w2)
 	            .attr("height", h2)
 	            .append("g")
 	            .attr("class", "bar")
 	            .attr("transform", "translate(" + 0 + "," + 80 + ")");


 	  var color = d3.scale.ordinal()
 	      .domain(groups)
 	      .range(["#046faf", "#73a8ce", "#5d3b98", "#b1aad1", "#c41a7c", "#e8a2c8", "#e24932", "#fcba83", "#046faf", "#73a8ce", "#5d3b98", "#b1aad1", "#c41a7c", "#e8a2c8", "#e24932", "#fcba83"]);

 	  var x2 = d3.scale.linear()
 	      .domain([0, 40000])
 	      .range ([ 0, w2 - padding2[1] - padding2[3] ])
 	      .nice();   

 	  var xAxis2 = d3.svg.axis()
 	              .scale(x2)
 	              .orient("top")
 	              .ticks(5);

 	  var yAxis2 = d3.svg.axis()
 	              .scale(heightScale2)
 	              .orient("left");   

 	  var div2 = d3.select("#mobile").append("div")
 				.attr("class", "tooltip")
 				.style("opacity", 0);                           
 	        
 	  var rects2 = svg2.selectAll("rect")
 	      .data(positions2)
 	      .enter().append("rect")
 	      .style("fill", color)
 	      .attr("height", 18)
 	      .attr("width", 0)
 	      .attr("x", padding2[3])
 	      .attr("y", function(d){
 	        return d;
 	      });


 	  dispatch2.on("statechange.bar", function(d){
 	    rects2.data(groups).transition()
 	    .attr("width", function(g){
 	      return widthScale2(d[g]); 
 	    })
 	  });

 	  svg2.append("g")
 	          .attr("class", "x axis")
 	          // .attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
 	          .attr("transform", "translate(" + padding2[3] + "," + 0 + ")")
 	          .call(xAxis2)
 	          .append("text")
 			      .attr("x", 0)
 			      .attr("y", -25)
 			      // .attr("dy", ".71em")
 			      .style("text-anchor", "left")
 			      .text("Dollars");

 	});

 	</script>

 </div>
 <!-- end container1m -->	

 </div>
 <!-- end mobile -->


 <!-- DESKTOP -->	

 	<div id = "desktop">

 	<div class="headline">	
 		<h1><strong>Birth Costs Head TK</strong></h1>
 			<svg class="dottedLine" width="325" height="4">
 				<line x1="230" x2="300" y1="1" y2="1" stroke="black" stroke-width="2" stroke-dasharray="2, 2" />
 			</svg>
 			<p>
 			<h2>Intro text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at porta orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ante nec nisi eleifend venenatis. Maecenas tempus feugiat facilisis. Sed ultrices, eros vel pulvinar fermentum, elit magna tristique magna, id accumsan massa nisl in ante. Sed condimentum orci eget massa vestibulum, non vulputate justo auctor.</h2>
 		</div>	

 		<div class = "labels"><img src="yAxis+legend.svg"></div>

 <div id = "container1">	

 <span style = "font-family: Arial, sans-serif; font-size: 12px">Choose your state:</span>	

 	<script type="text/javascript">

 	var dispatch = d3.dispatch("load", "statechange");

 	var groups = [
 	  "Metro775charge",
 	  "Metro775cost",
 	  "Metro774charge",
 	  "Metro774cost",
 	  "Metro766charge",
 	  "Metro766cost",
 	  "Metro765charge",
 	  "Metro765cost",
 	  "NonMetro775charge",
 	  "NonMetro775cost",
 	  "NonMetro774charge",
 	  "NonMetro774cost",
 	  "NonMetro766charge",
 	  "NonMetro766cost",
 	  "NonMetro765charge",
 	  "NonMetro765cost"
 	];

 	var positions = [5, 25, 55, 75, 105, 125, 155, 175, 215, 235, 265, 285, 315, 335, 365, 385];

 	d3.csv("birthCostsByState.csv", function(error, states) {
 	  if (error) throw error;
 	  var stateById = d3.map();
 	  states.forEach(function(d) { stateById.set(d.id, d); });
 	  dispatch.load(stateById);
 	  dispatch.statechange(stateById.get("New York"));
 	});

 	// A drop-down menu for selecting a state; uses the "menu" namespace.
 	dispatch.on("load.menu", function(stateById) {
 	  var select = d3.select("#container1")
 	      .append("div")
 	      .append("select")
 	      .on("change", function() { dispatch.statechange(stateById.get(this.value)); });

 	  select.selectAll("option")
 	      .data(stateById.values())
 	      .enter().append("option")
 	      .attr("value", function(d) { return d.id; })
 	      .text(function(d) { return d.id; });

 	  dispatch.on("statechange.menu", function(state) {
 	    select.property("value", state.id);
 	  });
 	});


 	// A bar chart to show costs by state; uses the "bar" namespace.
 	dispatch.on("load.bar", function(stateById) {

 	  var w = 530;
 	  var h = 500;
 	  var padding = [ 20, 20, 20, 125 ];  //Top, right, bottom, left

 	  var widthScale = d3.scale.linear()
 	                .range([ 0, w - padding[1] - padding[3] ]);

 	  widthScale.domain([0, 40000]);              
 	      
 	  var heightScale = d3.scale.ordinal()
 	                .rangeRoundBands([ padding[0], h - padding[2] ], 0.5);

 	  var svg = d3.select("#container1")
 	            .append("svg")
 	            .attr("width", w)
 	            .attr("height", h)
 	            .append("g")
 	            .attr("class", "bar")
 	            .attr("transform", "translate(" + 0 + "," + 65 + ")");


 	  var color = d3.scale.ordinal()
 	      .domain(groups)
 	      .range(["#046faf", "#73a8ce", "#5d3b98", "#b1aad1", "#c41a7c", "#e8a2c8", "#e24932", "#fcba83", "#046faf", "#73a8ce", "#5d3b98", "#b1aad1", "#c41a7c", "#e8a2c8", "#e24932", "#fcba83"]);

 	  var x = d3.scale.linear()
 	      .domain([0, 40000])
 	      .range ([ 0, w - padding[1] - padding[3] ])
 	      .nice();   

 	  var xAxis = d3.svg.axis()
 	              .scale(x)
 	              .orient("top");

 	  var yAxis = d3.svg.axis()
 	              .scale(heightScale)
 	              .orient("left");   

 	  var div = d3.select("#desktop").append("div")
 				.attr("class", "tooltip")
 				.style("opacity", 0);                           
 	        
 	  var rects = svg.selectAll("rect")
 	      .data(positions)
 	      .enter().append("rect")
 	      .style("fill", color)
 	      .attr("height", 18)
 	      .attr("width", 0)
 	      .attr("x", padding[3])
 	      .attr("y", function(d){
 	        return d;
 	      });
 	      
 // TOOLTIPS???	      
 		
 		rects.on("mouseover", function(d){
 			div.transition()
 	  			.duration(200)
 	  			.style("opacity", 1)
 	  		div.html("<strong>" + d + "</strong>")
 	  		})	
 	 	 .on("mouseout", function(d){
 	  		div.transition()
 	  			.duration(500)
 	  			.style("opacity", 0);

 	  		});

 // END TOOLTIPS	 	 

 	  dispatch.on("statechange.bar", function(d){
 	    rects.data(groups).transition()
 	    .attr("width", function(g){
 	      return widthScale(d[g]); 
 	    })
 	  });


 	  svg.append("g")
 	          .attr("class", "x axis")
 	          // .attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
 	          .attr("transform", "translate(" + padding[3] + "," + 0 + ")")
 	          .call(xAxis)
 	          .append("text")
 			      .attr("x", 192)
 			      .attr("y", -25)
 			      // .attr("dy", ".71em")
 			      .style("text-anchor", "middle")
 			      .text("Dollars");

 	});

 	</script>

 </div>
 <!-- end container1 -->

 </div>
 <!-- end desktop -->

 </body>
diff --git a/yAxis+legend.svg b/yAxis+legend.svg
diff --git a/yAxis+legend_mobile.svg b/yAxis+legend_mobile.svg
	@font-face {
	font-family: Brunel;
	src: url('fonts/Brunel Deck-Semibold.otf') format("opentype");
	}

	/* Mobile Layout: Max 480px. */

	@media only screen and (max-width: 480px){

	#desktop {
	display: none;
	}
	#mobile {
	display: block;
	background-color: #f4f4f4;
	height: 835px;
	width: 260px;
	}

	body {
	background-color: white;
	}
	.headline{
	background-color: #e5e5e5;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 15px;
	padding-right: 15px;
	width: 230px;
	line-height: 1em;
	}
	h1 {
	font-family: Brunel, serif;
	font-size: 18px;
	font-weight: lighter;
	text-align: center;
	}
	h2 {
	font-family: Arial, sans-serif;
	font-size: 12px;
	/padding-top: 5px;/
	font-weight: lighter;
	text-align: left;
	background-color: #e5e5e5;
	line-height: 1.5em;
	}
	#container1m {
	position: absolute;
	margin-top: 15px;
	margin-left: 15px;
	font-family: Arial, sans-serif;
	font-size: 10px;
	}
	.axis text {
	font: 10px sans-serif;
	}
	.menu{
	font-size: 10px;
	}

	.axisLabel text{
	font-weight: bold;
	}

	.labels{
	position: absolute;
	width: 260px;
	margin-top: 16px;
	}

	.axis line,
	.axis path {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	div.tooltip {
	position: absolute;
	text-align: center;
	padding: 5px;
	font: 10px sans-serif;
	background: white;
	border: 0px;
	/border-radius: 6px;/
	pointer-events: none;
	}

	}

	/* Desktop Layout: 481px and up. */

	@media only screen and (min-width: 481px){

	#desktop {
	display: block;
	background-color: #f4f4f4;
	height: 760px;
	width: 570px;
	}
	#mobile {
	display: none;
	}

	body {
	background-color: white;
	}
	.headline{
	background-color: #e5e5e5;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 20px;
	width: 530px;
	line-height: 1em;
	}
	h1 {
	font-family: Brunel, serif;
	font-size: 24px;
	font-weight: lighter;
	text-align: center;
	}
	h2 {
	font-family: Arial, sans-serif;
	font-size: 14px;
	font-weight: lighter;
	text-align: left;
	background-color: #e5e5e5;
	line-height: 1.5em;
	}

	#container1 {
	width: 570px;
	position: absolute;
	margin-top: 20px;
	margin-left: 20px;
	font-family: Arial, sans-serif;
	font-size: 12px;
	}

	.axis text {
	font: 12px sans-serif;
	}

	.axisLabel text{
	font-weight: bold;
	}

	.labels{
	position: absolute;
	width: 570px;
	height: 420px;
	margin-top: 23px;
	}

	.axis line,
	.axis path {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	}
id	year	Metro775charge	Metro775cost	Metro774charge	Metro774cost	Metro766charge	Metro766cost	Metro765charge	Metro765cost	NonMetro775charge	NonMetro775cost	NonMetro774charge	NonMetro774cost	NonMetro766charge	NonMetro766cost	NonMetro765charge	NonMetro765cost
Arizona	2013	11277	2767	13530	3367	19758	4736	23904	5746	8908	3369	10627	4048	18686	6617	19734	7351
Arkansas	2013	9837	2555	10696	2969	15229	3782	16582	4416	7800	2599	9112	3050	12671	4660	15032	5491
California	2013	16789	3689	14826	5141	28950	6136	35803	7863	11949	4079	14826	5141	27998	9941	31991	11293
Colorado	2013	11844	2783	14123	3374	20418	4675	25221	5739	8649	4055	10341	4876	17092	8526	19964	9314
Florida	2013	12801	2547	10887	2471	22878	4599	27041	5617	9895	2205	10887	2471	17494	4429	17693	4863
Hawaii	2013	9517	0	11874	0	17860	0	21710	0	8906	0	11308	0	11339	0	13209	0
Illinois	2013	11534	0	14411	0	18888	0	22754	0	7775	0	9334	0	15615	0	17185	0
Indiana	2013	10314	0	12507	0	18046	0	21045	0	7545	0	8751	0	14616	0	16406	0
Iowa	2013	8255	2537	10025	3253	14893	4574	17784	5515	5694	3419	6582	3985	12342	7227	13714	8114
Kansas	2013	12710	0	14826	0	19635	0	22773	0	6987	0	7763	0	11763	0	13028	0
Kentucky	2013	8176	2493	9804	2871	12842	4083	15709	4705	7256	2475	7503	2557	11823	4059	12641	4172
Maine	2012	6570	0	8043		12844	0	15465	0	5338	0	6123	0	13867	0	14609	0
Maryland	2013	6026	4624	6845	5203	6712	5110	8242	6223	5969	4435	6074	4626	7308	5427	8583	6276
Massachusetts	2013	8897	4628	10720	5506	11971	6432	15815	8005	7093	10057	8484	12030	24224	34347	18795	26649
Michigan	2013	8863	0	10507	0	13439	0	15602	0	6551	0	7968	0	11460	0	12700	0
Minnesota	2013	9436	0	11497	0	17653	0	20357	0	7520	0	8857	0	13480	0	15109	0
Missouri	2013	9923	0	12205	0	13964	0	17538	0	8827	0	10167	0	16116	0	19685	0
Nebraska	2013	7154	0	8762	0	16270	0	19831	0	5822	0	7172	0	10533	0	12618	0
Nevada	2013	13786	2210	14879	2503	24448	3756	28601	4401	10982	3564	11197	3611	16545	5541	18770	6500
New Hampshire	2009	6140	0	7212	0	10371	0	11645	0	6930	0	8514	0	10351	0	12818	0
New Jersey	2013	20848	3591	23353	4082	31008	5366	35580	6171	20848	3591	23353	4082	31008	5366	35580	6171
New Mexico	2013	16032	0	19429	0	31054	0	35561	0	17242	0	18809	0	30582	0	32775	0
New York	2013	12161	3759	13660	4307	18391	5809	22103	6761	5368	2947	6126	3442	9024	5192	9910	5766
North Carolina	2013	8470	2924	10288	3535	14967	5173	18238	6327	7316	2739	8470	3180	13598	5198	15277	5823
North Dakota	2013	5538	0	6466	0	10219	0	11583	0	5469	0	6295	0	10601	0	12112	0
Oklahoma	2013	8797	0	11470	0	14554	0	17290	0	7568	0	8905	0	12690	0	14440	0
Oregon	2013	9036	4149	10611	4922	17206	7725	20435	9220	7896	3978	9899	4503	16297	8411	18375	8995
Rhode Island	2013	14729	6318	17361	7438	19055	8293	22399	9860	14729	6318	17361	7438	19055	8293	22399	9860
South Carolina	2013	10567	0	12522	0	18947	0	21627	0	9587	0	11695	0	19466	0	21230	0
Tennessee	2013	9317	0	10894	0	14671	0	17463	0	6510	0	7289	0	11687	0	11373	0
Texas	2013	11164	0	13243	0	17659	0	20682	0	9594	0	12472	0	15978	0	18425	0
Utah	2013	7128	2675	8520	3336	11238	4275	13306	5119	5403	3044	6415	3537	11418	5368	13690	6461
Vermont	2013	7328	4018	8670	4712	11788	6718	14522	7881	7741	4827	8533	5230	14642	9315	15819	9781
Washington	2013	10679	3377	13121	4157	18936	6054	23056	7611	8167	4110	9109	4882	15617	7992	19677	9783
West Virginia	2013	8372	3272	9645	3701	10409	3952	12734	4941	5297	2262	6526	2634	11261	4954	12459	5251
Wisconsin	2013	8031	3131	9949	3897	15004	5875	17937	7065	6348	3558	7323	4325	14273	8001	15511	8803
Wyoming	2013	5714	0	6987	0	11990	0	13167	0	7580	0	9596	0	15209	0	16300	0
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Birth Costs in the US</title>
	<link href="birthCost_styles.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	</head>

	<body style = "margin:0px" !important;>

	<!-- MOBILE -->

	<div id = "mobile">

	<div class="headline">
	<h1><strong>Birth Costs Head TK</strong></h1>
	<svg class="dottedLine" width="325" height="5">
	<line x1="85" x2="135" y1="1" y2="1" stroke="black" stroke-width="2" stroke-dasharray="2, 2" />
	</svg>
	<h2>Intro text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at porta orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ante nec nisi eleifend venenatis. Maecenas tempus feugiat facilisis. Sed ultrices, eros vel pulvinar fermentum, elit magna tristique magna, id accumsan massa nisl in ante. Sed condimentum orci eget massa vestibulum, non vulputate justo auctor.</h2>
	</div>

	<div class = "labels"><img src="yAxis+legend_mobile.svg"></div>

	<div id = "container1m">

	<span style = "font-family: Arial, sans-serif; font-size: 10px">Choose your state:</span>

	<script type="text/javascript">

	var dispatch2 = d3.dispatch("load", "statechange");

	var groups2 = [
	"Metro775charge",
	"Metro775cost",
	"Metro774charge",
	"Metro774cost",
	"Metro766charge",
	"Metro766cost",
	"Metro765charge",
	"Metro765cost",
	"NonMetro775charge",
	"NonMetro775cost",
	"NonMetro774charge",
	"NonMetro774cost",
	"NonMetro766charge",
	"NonMetro766cost",
	"NonMetro765charge",
	"NonMetro765cost"
	];

	var positions2 = [5, 25, 55, 75, 105, 125, 155, 175, 215, 235, 265, 285, 315, 335, 365, 385];

	d3.csv("birthCostsByState.csv", function(error, states) {
	if (error) throw error;
	var stateById2 = d3.map();
	states.forEach(function(d) { stateById2.set(d.id, d); });
	dispatch2.load(stateById2);
	dispatch2.statechange(stateById2.get("New York"));
	});

	// A drop-down menu for selecting a state; uses the "menu" namespace.
	dispatch2.on("load.menu", function(stateById2) {
	var select2 = d3.select("#container1m")
	.append("div")
	.append("select")
	.on("change", function() { dispatch2.statechange(stateById2.get(this.value)); });

	select2.selectAll("option")
	.data(stateById2.values())
	.enter().append("option")
	.attr("value", function(d) { return d.id; })
	.text(function(d) { return d.id; });

	dispatch2.on("statechange.menu", function(state) {
	select2.property("value", state.id);
	});
	});


	// A bar chart to show costs by state; uses the "bar" namespace.
	dispatch2.on("load.bar", function(stateById2) {

	var w2 = 240;
	var h2 = 500;
	var padding2 = [ 20, 20, 20, 50 ]; //Top, right, bottom, left

	var widthScale2 = d3.scale.linear()
	.range([ 0, w2 - padding2[1] - padding2[3] ]);

	widthScale2.domain([0, 40000]);

	var heightScale2 = d3.scale.ordinal()
	.rangeRoundBands([ padding2[0], h2 - padding2[2] ], 0.5);

	var svg2 = d3.select("#container1m")
	.append("svg")
	.attr("width", w2)
	.attr("height", h2)
	.append("g")
	.attr("class", "bar")
	.attr("transform", "translate(" + 0 + "," + 80 + ")");


	var color = d3.scale.ordinal()
	.domain(groups)
	.range(["#046faf", "#73a8ce", "#5d3b98", "#b1aad1", "#c41a7c", "#e8a2c8", "#e24932", "#fcba83", "#046faf", "#73a8ce", "#5d3b98", "#b1aad1", "#c41a7c", "#e8a2c8", "#e24932", "#fcba83"]);

	var x2 = d3.scale.linear()
	.domain([0, 40000])
	.range ([ 0, w2 - padding2[1] - padding2[3] ])
	.nice();

	var xAxis2 = d3.svg.axis()
	.scale(x2)
	.orient("top")
	.ticks(5);

	var yAxis2 = d3.svg.axis()
	.scale(heightScale2)
	.orient("left");

	var div2 = d3.select("#mobile").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	var rects2 = svg2.selectAll("rect")
	.data(positions2)
	.enter().append("rect")
	.style("fill", color)
	.attr("height", 18)
	.attr("width", 0)
	.attr("x", padding2[3])
	.attr("y", function(d){
	return d;
	});


	dispatch2.on("statechange.bar", function(d){
	rects2.data(groups).transition()
	.attr("width", function(g){
	return widthScale2(d[g]);
	})
	});

	svg2.append("g")
	.attr("class", "x axis")
	// .attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
	.attr("transform", "translate(" + padding2[3] + "," + 0 + ")")
	.call(xAxis2)
	.append("text")
	.attr("x", 0)
	.attr("y", -25)
	// .attr("dy", ".71em")
	.style("text-anchor", "left")
	.text("Dollars");

	});

	</script>

	</div>
	<!-- end container1m -->

	</div>
	<!-- end mobile -->


	<!-- DESKTOP -->

	<div id = "desktop">

	<div class="headline">
	<h1><strong>Birth Costs Head TK</strong></h1>
	<svg class="dottedLine" width="325" height="4">
	<line x1="230" x2="300" y1="1" y2="1" stroke="black" stroke-width="2" stroke-dasharray="2, 2" />
	</svg>
	<p>
	<h2>Intro text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at porta orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ante nec nisi eleifend venenatis. Maecenas tempus feugiat facilisis. Sed ultrices, eros vel pulvinar fermentum, elit magna tristique magna, id accumsan massa nisl in ante. Sed condimentum orci eget massa vestibulum, non vulputate justo auctor.</h2>
	</div>

	<div class = "labels"><img src="yAxis+legend.svg"></div>

	<div id = "container1">

	<span style = "font-family: Arial, sans-serif; font-size: 12px">Choose your state:</span>

	<script type="text/javascript">

	var dispatch = d3.dispatch("load", "statechange");

	var groups = [
	"Metro775charge",
	"Metro775cost",
	"Metro774charge",
	"Metro774cost",
	"Metro766charge",
	"Metro766cost",
	"Metro765charge",
	"Metro765cost",
	"NonMetro775charge",
	"NonMetro775cost",
	"NonMetro774charge",
	"NonMetro774cost",
	"NonMetro766charge",
	"NonMetro766cost",
	"NonMetro765charge",
	"NonMetro765cost"
	];

	var positions = [5, 25, 55, 75, 105, 125, 155, 175, 215, 235, 265, 285, 315, 335, 365, 385];

	d3.csv("birthCostsByState.csv", function(error, states) {
	if (error) throw error;
	var stateById = d3.map();
	states.forEach(function(d) { stateById.set(d.id, d); });
	dispatch.load(stateById);
	dispatch.statechange(stateById.get("New York"));
	});

	// A drop-down menu for selecting a state; uses the "menu" namespace.
	dispatch.on("load.menu", function(stateById) {
	var select = d3.select("#container1")
	.append("div")
	.append("select")
	.on("change", function() { dispatch.statechange(stateById.get(this.value)); });

	select.selectAll("option")
	.data(stateById.values())
	.enter().append("option")
	.attr("value", function(d) { return d.id; })
	.text(function(d) { return d.id; });

	dispatch.on("statechange.menu", function(state) {
	select.property("value", state.id);
	});
	});


	// A bar chart to show costs by state; uses the "bar" namespace.
	dispatch.on("load.bar", function(stateById) {

	var w = 530;
	var h = 500;
	var padding = [ 20, 20, 20, 125 ]; //Top, right, bottom, left

	var widthScale = d3.scale.linear()
	.range([ 0, w - padding[1] - padding[3] ]);

	widthScale.domain([0, 40000]);

	var heightScale = d3.scale.ordinal()
	.rangeRoundBands([ padding[0], h - padding[2] ], 0.5);

	var svg = d3.select("#container1")
	.append("svg")
	.attr("width", w)
	.attr("height", h)
	.append("g")
	.attr("class", "bar")
	.attr("transform", "translate(" + 0 + "," + 65 + ")");


	var color = d3.scale.ordinal()
	.domain(groups)
	.range(["#046faf", "#73a8ce", "#5d3b98", "#b1aad1", "#c41a7c", "#e8a2c8", "#e24932", "#fcba83", "#046faf", "#73a8ce", "#5d3b98", "#b1aad1", "#c41a7c", "#e8a2c8", "#e24932", "#fcba83"]);

	var x = d3.scale.linear()
	.domain([0, 40000])
	.range ([ 0, w - padding[1] - padding[3] ])
	.nice();

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("top");

	var yAxis = d3.svg.axis()
	.scale(heightScale)
	.orient("left");

	var div = d3.select("#desktop").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	var rects = svg.selectAll("rect")
	.data(positions)
	.enter().append("rect")
	.style("fill", color)
	.attr("height", 18)
	.attr("width", 0)
	.attr("x", padding[3])
	.attr("y", function(d){
	return d;
	});

	// TOOLTIPS???

	rects.on("mouseover", function(d){
	div.transition()
	.duration(200)
	.style("opacity", 1)
	div.html("<strong>" + d + "</strong>")
	})
	.on("mouseout", function(d){
	div.transition()
	.duration(500)
	.style("opacity", 0);

	});

	// END TOOLTIPS

	dispatch.on("statechange.bar", function(d){
	rects.data(groups).transition()
	.attr("width", function(g){
	return widthScale(d[g]);
	})
	});


	svg.append("g")
	.attr("class", "x axis")
	// .attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
	.attr("transform", "translate(" + padding[3] + "," + 0 + ")")
	.call(xAxis)
	.append("text")
	.attr("x", 192)
	.attr("y", -25)
	// .attr("dy", ".71em")
	.style("text-anchor", "middle")
	.text("Dollars");

	});

	</script>

	</div>
	<!-- end container1 -->

	</div>
	<!-- end desktop -->

	</body>