timproDev/d3-style-spanchart.css

## d3-style-spanchart.css
* {
	box-sizing: border-box;
	padding:0;
	margin:0;
	/*font-family: 'Raleway', sans-serif;		*/
	font-family: 'Josefin Slab', sans-serif;
}
body {
	background-color:#ececec;
	padding:0 0 2rem 0;
}

.dv-wrap {
	width:90%;
	padding:3rem 10%;
	margin:0 auto;
}
h1 {
	text-align: center;
    padding: 10px;
    text-decoration: underline;
}

text {
	fill: #45555f;
	font-size: 1rem;
}
.x-axis text {
	text-anchor:end;
	font-size: .65rem;
}

/* ___ Axis and Ticks ___ */

.y-axis .tick text {
	text-anchor: start;
}
.y-axis .tick line {
	stroke-width:1;
	stroke-dasharray: 2;
	stroke: #45555f;
	stroke-opacity:.5;
}
.y-axis .tick.zilch line {
	stroke-width:1;
	stroke-dasharray: 0;
}
.x-axis .tick line {
	stroke-width:1;
	stroke: #45555f;
}
.domain {
	display:none;
}

/* ___ Chart Elements ___ */


.comp-rect {
	fill: salmon;
}

/* IE HACK CANVAS */
.cov-div {
    /*background-color: #ffffff;*/
    position: relative;
}
.cov-div canvas {
	display: block;
	height: 100%;
	visibility: hidden;
}
.cov-div svg {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.dv-wrap .title {
	text-align: center;
	padding:2rem 0 0 0;
}

.dv-wrap .header-section {
	text-align: center;
}
.dv-wrap .header-section .disclaimer {
	font-size: .75rem;
}

.g-chart-container-spanchart .y-axis .tick text {
	font-size: 1rem;
	text-anchor:end;
}

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Spanchart</title>
		<link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="d3-style-spanchart.css">
		<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
	</head>
	<body>
		<main>
			<section class="dv-wrap">
				<div class="header-section">
					<h1>Span Chart</h1>
					<span class="disclaimer">* This data is balderdash.</span>
					<div class="g-chart-container-spanchart"></div>
				</div>
			</section>
		</main>
  	</body>

  <script src="https://rawgit.com/timproDev/d3-first-timer/master/js/d3v4-473-jetpack.js"></script>
  <script type="text/javascript" src="nested-single-spanchart-block.js"></script>
</html>

## nested-single-spanchart-block.js
function spanChart(){
	// Nested Single Spancart
	var settings = {
		chartContainerClass: ".g-chart-container-spanchart",
		selectedCoverage : "Percentage of Income Spent on Miles Davis Albums"
	};

	var chartContainer = d3.select(settings.chartContainerClass);

	var margin = {
			top:80,
			left:40,
			right:40,
			bottom:120
		};

	var w = chartContainer.node().clientWidth - margin.left - margin.right,
			h = 600 - margin.top - margin.bottom;

	d3.queue()
		.defer(d3.csv, "spanchart-block-data.csv")
		.await(ready);

	function ready(error, data) {
		if (error) throw "error: not loading data, mon ami";

		// [+] Parse data
		data.forEach(function(d){
			d.value = parseFloat(d.value);
			d.qYear = d.quarter + " " + d.year;
		});

		// nest data
	  var nestByCoverage = d3.nest()
			.key(function(d) { return d.coverage; })
			.entries(data);

		nestByCoverage = nestByCoverage.filter(function(d){
			return d.key === settings.selectedCoverage;
		});

		// [+] generators and functions - scales, axis, lines, etc...
		var xscale = d3.scaleBand()
			.rangeRound([50,w-50])
			.domain(data.map(function(d) { return d.qYear; }))
			.paddingInner(0.25);

		var yscale = d3.scaleLinear()
			.domain(d3.extent(data, function(d){return d.value;}))
			.range([h,0]);

		var xaxis = d3.axisBottom(xscale);

		var yaxis = d3.axisRight()
			.scale(yscale)
			.ticks(5)
			.tickFormat(d3.format(""))
			.tickSize(w);

		// append divs and join data
		var divs = chartContainer.html("").selectAll(".cov-div")
			.data(nestByCoverage)
			.enter()
			.append("div.cov-div")
			.style("width", (w + margin.left + margin.right) + "px")
			.style("height", (h + margin.top + margin.bottom) + "px");

		// append title to div
		divs
			.append("h2.title")
			.text(function(d){
				return d.key;
			});

		//ie hack
		divs.insert("canvas");

		// append svg to each div
		var covSvg = divs
			.append("svg")
			.attr("width", w + margin.left + margin.right)
			.attr("height", h + margin.top + margin.bottom)
			.append("g.wrap")
			.translate([margin.left,margin.top]);

		// append axis
		covSvg.append("g.x-axis")
			.call(xaxis)
			.translate([0,h+50])
			.selectAll("text")
			.attr("transform", "rotate(-30)");

		// append axis
		covSvg.append("g.y-axis")
			.call(yaxis);

		d3.selectAll(".tick").each(function() {
			// IE innerText vs textContent
			if((+this.textContent || +this.innerText) == 0) {
			  	this.classList.add("zilch");
			  }
			});

		var gRects = covSvg.selectAll(".g-comp-rect")
			.data(function(d){
				return d.values;
			})
			.enter()
			.append("g.g-comp-rect");

		gRects
			.append("rect.comp-rect")
			.attr("x",function(d){
				return xscale(d.qYear);
			})
			.attr("y",function(d){
				var mathMax = yscale(Math.max(0, d.value));
				return mathMax;
			})
			.attr("width",xscale.bandwidth())
			.attr("height",function(d){
				var mathAbs = Math.abs(yscale(d.value) - yscale(0));
				return mathAbs;
			});

		gRects.append("text.bar-label")
			// centering the label
	    .attr("x", function(d) { return xscale(d.qYear) + xscale.bandwidth()/2; })
	    .attr("y", function(d) { return yscale(d.value); })
	    .attr("dy", function(d){
	    	if(d.value > 0) {
	    		return "-10px";
	    	} else {
	    		return "20px";
	    	}
	    })
	    .attr("text-anchor","middle")
	    .text(function(d) { return d.value; });
	}
}

$( window ).resize(fireAll);
function fireAll() {spanChart();}
;(function(){spanChart();})();

## spanchart-block-data.csv

          
            year
            quarter
            coverage
            value

            
              2015
              q3
              Percentage of Income Spent on Miles Davis Albums
              2.1%

            
              2015
              q4
              Percentage of Income Spent on Miles Davis Albums
              3.4%

            
              2016
              q1
              Percentage of Income Spent on Miles Davis Albums
              4.6%

            
              2016
              q2
              Percentage of Income Spent on Miles Davis Albums
              -3.4%

            
              2016
              q3
              Percentage of Income Spent on Miles Davis Albums
              2.1%

            
              2016
              q4
              Percentage of Income Spent on Miles Davis Albums
              2.85%

            
              2017
              q1
              Percentage of Income Spent on Miles Davis Albums
              1.1%
	* {
	box-sizing: border-box;
	padding:0;
	margin:0;
	/font-family: 'Raleway', sans-serif; /
	font-family: 'Josefin Slab', sans-serif;
	}
	body {
	background-color:#ececec;
	padding:0 0 2rem 0;
	}

	.dv-wrap {
	width:90%;
	padding:3rem 10%;
	margin:0 auto;
	}
	h1 {
	text-align: center;
	padding: 10px;
	text-decoration: underline;
	}

	text {
	fill: #45555f;
	font-size: 1rem;
	}
	.x-axis text {
	text-anchor:end;
	font-size: .65rem;
	}

	/* ___ Axis and Ticks ___ */

	.y-axis .tick text {
	text-anchor: start;
	}
	.y-axis .tick line {
	stroke-width:1;
	stroke-dasharray: 2;
	stroke: #45555f;
	stroke-opacity:.5;
	}
	.y-axis .tick.zilch line {
	stroke-width:1;
	stroke-dasharray: 0;
	}
	.x-axis .tick line {
	stroke-width:1;
	stroke: #45555f;
	}
	.domain {
	display:none;
	}

	/* ___ Chart Elements ___ */


	.comp-rect {
	fill: salmon;
	}

	/* IE HACK CANVAS */
	.cov-div {
	/background-color: #ffffff;/
	position: relative;
	}
	.cov-div canvas {
	display: block;
	height: 100%;
	visibility: hidden;
	}
	.cov-div svg {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	}

	.dv-wrap .title {
	text-align: center;
	padding:2rem 0 0 0;
	}

	.dv-wrap .header-section {
	text-align: center;
	}
	.dv-wrap .header-section .disclaimer {
	font-size: .75rem;
	}

	.g-chart-container-spanchart .y-axis .tick text {
	font-size: 1rem;
	text-anchor:end;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Spanchart</title>
	<link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="d3-style-spanchart.css">
	<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
	</head>
	<body>
	<main>
	<section class="dv-wrap">
	<div class="header-section">
	<h1>Span Chart</h1>
	<span class="disclaimer">* This data is balderdash.</span>
	<div class="g-chart-container-spanchart"></div>
	</div>
	</section>
	</main>
	</body>

	<script src="https://rawgit.com/timproDev/d3-first-timer/master/js/d3v4-473-jetpack.js"></script>
	<script type="text/javascript" src="nested-single-spanchart-block.js"></script>
	</html>
	function spanChart(){
	// Nested Single Spancart
	var settings = {
	chartContainerClass: ".g-chart-container-spanchart",
	selectedCoverage : "Percentage of Income Spent on Miles Davis Albums"
	};

	var chartContainer = d3.select(settings.chartContainerClass);

	var margin = {
	top:80,
	left:40,
	right:40,
	bottom:120
	};

	var w = chartContainer.node().clientWidth - margin.left - margin.right,
	h = 600 - margin.top - margin.bottom;

	d3.queue()
	.defer(d3.csv, "spanchart-block-data.csv")
	.await(ready);

	function ready(error, data) {
	if (error) throw "error: not loading data, mon ami";

	// [+] Parse data
	data.forEach(function(d){
	d.value = parseFloat(d.value);
	d.qYear = d.quarter + " " + d.year;
	});

	// nest data
	var nestByCoverage = d3.nest()
	.key(function(d) { return d.coverage; })
	.entries(data);

	nestByCoverage = nestByCoverage.filter(function(d){
	return d.key === settings.selectedCoverage;
	});

	// [+] generators and functions - scales, axis, lines, etc...
	var xscale = d3.scaleBand()
	.rangeRound([50,w-50])
	.domain(data.map(function(d) { return d.qYear; }))
	.paddingInner(0.25);

	var yscale = d3.scaleLinear()
	.domain(d3.extent(data, function(d){return d.value;}))
	.range([h,0]);

	var xaxis = d3.axisBottom(xscale);

	var yaxis = d3.axisRight()
	.scale(yscale)
	.ticks(5)
	.tickFormat(d3.format(""))
	.tickSize(w);

	// append divs and join data
	var divs = chartContainer.html("").selectAll(".cov-div")
	.data(nestByCoverage)
	.enter()
	.append("div.cov-div")
	.style("width", (w + margin.left + margin.right) + "px")
	.style("height", (h + margin.top + margin.bottom) + "px");

	// append title to div
	divs
	.append("h2.title")
	.text(function(d){
	return d.key;
	});

	//ie hack
	divs.insert("canvas");

	// append svg to each div
	var covSvg = divs
	.append("svg")
	.attr("width", w + margin.left + margin.right)
	.attr("height", h + margin.top + margin.bottom)
	.append("g.wrap")
	.translate([margin.left,margin.top]);

	// append axis
	covSvg.append("g.x-axis")
	.call(xaxis)
	.translate([0,h+50])
	.selectAll("text")
	.attr("transform", "rotate(-30)");

	// append axis
	covSvg.append("g.y-axis")
	.call(yaxis);

	d3.selectAll(".tick").each(function() {
	// IE innerText vs textContent
	if((+this.textContent \|\| +this.innerText) == 0) {
	this.classList.add("zilch");
	}
	});

	var gRects = covSvg.selectAll(".g-comp-rect")
	.data(function(d){
	return d.values;
	})
	.enter()
	.append("g.g-comp-rect");

	gRects
	.append("rect.comp-rect")
	.attr("x",function(d){
	return xscale(d.qYear);
	})
	.attr("y",function(d){
	var mathMax = yscale(Math.max(0, d.value));
	return mathMax;
	})
	.attr("width",xscale.bandwidth())
	.attr("height",function(d){
	var mathAbs = Math.abs(yscale(d.value) - yscale(0));
	return mathAbs;
	});

	gRects.append("text.bar-label")
	// centering the label
	.attr("x", function(d) { return xscale(d.qYear) + xscale.bandwidth()/2; })
	.attr("y", function(d) { return yscale(d.value); })
	.attr("dy", function(d){
	if(d.value > 0) {
	return "-10px";
	} else {
	return "20px";
	}
	})
	.attr("text-anchor","middle")
	.text(function(d) { return d.value; });
	}
	}

	$( window ).resize(fireAll);
	function fireAll() {spanChart();}
	;(function(){spanChart();})();
year	quarter	coverage	value
2015	q3	Percentage of Income Spent on Miles Davis Albums	2.1%
2015	q4	Percentage of Income Spent on Miles Davis Albums	3.4%
2016	q1	Percentage of Income Spent on Miles Davis Albums	4.6%
2016	q2	Percentage of Income Spent on Miles Davis Albums	-3.4%
2016	q3	Percentage of Income Spent on Miles Davis Albums	2.1%
2016	q4	Percentage of Income Spent on Miles Davis Albums	2.85%
2017	q1	Percentage of Income Spent on Miles Davis Albums	1.1%