A single d3.js V4 chart with 'small multiples' along single categorical x-axis

This is an example of producing a single area chart rendered using d3.js with mean lines positioned dynamically on the y-axis, and the x-axis customized to show categorical ranges, with svg g used to append category labels at top.

forked from Mbrownshoes's block: A single d3.js V4 chart with 'small multiples' along single categorical x-axis

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
<meta name="author" content="@carlvlewis">

<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Sales Trend by Month</title>

<style>

body {
	  font: 16px sans-serif;
	}

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

.area {
	  fill: #badcfe;
	}

.line {
	  fill: none;
	  stroke: #8ba5be;
	  stroke-width: 1.5px;
	}

.dot {
	  fill: white;
	  stroke: steelblue;
	  stroke-width: 1.5px;
	}
	div.tooltip {	
	    position: absolute;			
	    text-align: center;			
	    width: 45px;	
	    color: #fff;				
	    height: 20px;					
	    padding: 1px;				
	    font: 14px sans-serif;		
	    background: #272822;	
	    border: 0px;		
	    border-radius: 2px;			
	    pointer-events: none;			
	}
	g text {
		font-size: 12px;
	}
	.x.axis1 .tick:first-child text{
		display: none;
	}
	.x.axis2 .tick:nth-last-child() text{
		display: none;
	}
	</style>
</head>
<body>

function draw(){
			var margin = {top: 50, right: 50, bottom: 50, left: 50},
			    width = $(window).width() - margin.left - margin.right,
			    height = $(window).height() * scale - margin.top - margin.bottom;
			var averages = [];
			var data = getData(jsonData);
// PSA: What was previously called 'd3.scale.linear()' in V3 is now just 'd3.scaleLinear()' in V4; still used to create new linear scale.
			var x = d3.scaleLinear()
			    .range([0, width]);

var y = d3.scaleLinear()
			    .range([height, 0]);

var line = d3.line()
			    .defined(function(d) { return d; })
			    .x(function(d) { return x(d.x); })
			    .y(function(d) { return y(d.y); });

var area = d3.area()
			    .defined(line.defined())
			    .x(line.x())
			    .y1(line.y())
			    .y0(y(0));

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

var svg = d3.select("body").append("svg")
			    .datum(data)
			    .attr("width", width + margin.left + margin.right)
			    .attr("height", height + margin.top + margin.bottom)
			  .append("g")
			    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("path")
			    .attr("class", "area")
			    .attr("d", area);
// appending svg g, then apppending text element to that, then assigning the month labels to the text element to insert them essentially as annotated text into the d3 chart
// Wouldn't this have been oh-so-much easier to use d3.annnotations? If only I'd been so clever as Susie Lu.
			svg.append("g")
				.attr("transform", "translate("+width/12+",0)")
				.append("text")
				.text("Jan");
			svg.append("g")
				.attr("transform", "translate("+(width/12 + width/5)+",0)")
				.append("text")
				.text("Feb");
			svg.append("g")
				.attr("transform", "translate("+(width/12 + width*2/5)+",0)")
				.append("text")
				.text("March");
			svg.append("g")
				.attr("transform", "translate("+(width/12 + width*3/5)+",0)")
				.append("text")
				.text("April");
			svg.append("g")
				.attr("transform", "translate("+(width/12 + width*4/5)+",0)")
				.append("text")
				.text("May");

var xAxis = svg.append("g")
			    .attr("class", "x axis")
			    .attr("transform", "translate(0," + height + ")")
			    .call(d3.axisBottom(x));
// using selectAll to remove pre-populated linear data ticks on x-axis 
			xAxis.selectAll("text").remove();
			xAxis.selectAll("g").remove();

var yAxis = svg.append("g")
			    .attr("class", "y axis")
			    .call(d3.axisLeft(y));

yAxis.selectAll("text").remove();
			yAxis.selectAll("g").remove();

svg.append("path")
			    .attr("class", "line")
			    .attr("d", line)
			    .attr("stroke-width", 2)
			    .attr("stroke", "#ccc");
// Setting y-axis scale to be linear with an appropriate domain beginning, as is mandatory, with 0 set as baseline, then appending svg g onto the left yAxis with 6 tickmarks at equal intervals
			var yScale = d3.scaleLinear()
		        .domain([0, 600])
				.range([height, 0]);
			var yAxis = svg.append("g")
			    .attr("class", "y axis1")
			    .call(d3.axisLeft(yScale).ticks(6));
			    
// since the x-axis labels we want to display in this instance are not linear/ordinal, there is no need to set a domain. Because we have five buckets/date ranges to display, we;re simply adding the tick marks now

var xScale1 = d3.scaleLinear()
				.range([0, width]);
			var xAxis1 = svg.append("g")
			    .attr("class", "x axis2")
			    .attr("transform", "translate(0," + height + ")")
			    .call(d3.axisBottom(xScale1)
			    	.tickFormat("")
			    	.ticks(5));
//dynamically calculated mean/average per each month added as a line on y-axis - using svg g to append the lines to all five chart sections whose x-axis positioning is calculated by x1 and x2 based on width of chart overall; then dynamically calculating averages of data to define the position on y-axis

d3.select("g").append("line")
	            .attr("x1", 0)
	            .attr("x2", width/5)
	            .attr("y1", averages[0])
	            .attr("y2", averages[0])
	            .attr("stroke", "#979797")
	            .attr("stroke-width", 2);	              
	        d3.select("g").append("line")
	            .attr("x1", width/5)
	            .attr("x2", width*2/5)
	            .attr("y1", averages[1])
	            .attr("y2", averages[1])
	            .attr("stroke", "#979797")
	            .attr("stroke-width", 2);	
	        d3.select("g").append("line")
	            .attr("x1", width*2/5)
	            .attr("x2", width*3/5)
	            .attr("y1", averages[2])
	            .attr("y2", averages[2])
	            .attr("stroke", "#979797")
	            .attr("stroke-width", 2);	
	        d3.select("g").append("line")
	            .attr("x1", width*3/5)
	            .attr("x2", width*4/5)
	            .attr("y1", averages[3])
	            .attr("y2", averages[3])
	            .attr("stroke", "#979797")
	            .attr("stroke-width", 2);	
	        d3.select("g").append("line")
	            .attr("x1", width*4/5)
	            .attr("x2", width*5/5)
	            .attr("y1", averages[4])
	            .attr("y2", averages[4])
	            .attr("stroke", "#979797")
	            .attr("stroke-width", 2);
	            
// let's plot some circles based upon the data points for 'Sales' to give users a visual cue where they can hover or touch for details-on-demand

var circles = svg.selectAll("circle")
                   .data(data)
                   .enter()
                   .append("circle")

d3.select("g").append("line")
	            .attr("x1", width*2/5)
	            .attr("x2", width*2/5)
	            .attr("y1", 0)
	            .attr("y2", height)
	            .attr("stroke", "#ccc")
	            .attr("stroke-width", 2);

d3.select("g").append("line")
	            .attr("x1", width*3/5)
	            .attr("x2", width*3/5)
	            .attr("y1", 0)
	            .attr("y2", height)
	            .attr("stroke", "#ccc")
	            .attr("stroke-width", 2);

d3.select("g").append("line")
	            .attr("x1", width*4/5)
	            .attr("x2", width*4/5)
	            .attr("y1", 0)
	            .attr("y2", height)
	            .attr("stroke", "#ccc")
	            .attr("stroke-width", 2);

d3.select("g").append("line")
	            .attr("x1", width*5/5)
	            .attr("x2", width*5/5)
	            .attr("y1", 0)
	            .attr("y2", height)
	            .attr("stroke", "#ccc")
	            .attr("stroke-width", 2);

// Segmenting the dataset according the value for 'Month" field, then using `break;` to add padding between each segment.

draw();

// now let's take some considerations for screen-size and scaling to make it all responsive-like. A loop to

$(window).on("resize", function() {
			d3.select("svg").remove();
			if ($(window).width() < 768) {
				scale = 0.5;
				draw();
			} else {
				scale = 0.8;
				draw();
			}
		});

</script>
</body>
</html>

https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js

https://code.jquery.com/jquery-3.1.1.slim.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.js