Capped brush w/crossfilter

Built with blockbuilder.org

forked from twlynch's block: Capped brush w/crossfilter

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.zoom {
  cursor: move;
  fill: none;
  pointer-events: all;
}

.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
	clip-path: url(#clip);
}

.overlay{
	fill: steelblue;
}
</style>

var parseDate = d3.timeParse("%Y-%m-%d %H:%M:%S");
var dateScale = d3.scaleLinear().domain([1420070400000, 1480550400000]).range([0, 67200]);

function ready(error, data) {
	if (error) {
		console.log("ERROR!");
		throw error;
  }

var ndx = crossfilter(data);

var dateDim = ndx.dimension(function (d) {return new Date(d.date);});

var svg = d3.select("svg"),
	margin = {
		top: 30,
		right: 20,
		bottom: 110,
		left: 40
	},
	margin2 = {
		top: 390,
		right: 20,
		bottom: 30,
		left: 40
	},
	width = +svg.attr("width") - margin.left - margin.right,
	height = +svg.attr("height") - margin.top - margin.bottom,
	height2 = +svg.attr("height") - margin2.top - margin2.bottom;

var x = d3.scaleTime()
		.domain(d3.extent(data, function (d) {return d.date;}))
		.range([0, width]),
	x2 = d3.scaleTime()
		.domain(x.domain())
		.range([0, width]),
	y = d3.scaleLinear()
		.domain(d3.extent(data, function (d) {return d.price;}))
		.range([height, 0]),
	y2 = d3.scaleLinear()
		.domain(y.domain())
		.range([height2, 0]);

var oneYear = x2(new Date(2016, 0, 1))
		var oneMonth = x2(new Date(2015, 1, 1))
		var oneDay = x2(new Date(2015, 0, 2))
		var oneMonthZoom = 22.580645161290324

var xAxis = d3.axisBottom(x),
	xAxis2 = d3.axisBottom(x2),
	yAxis = d3.axisLeft(y);

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

var line2 = d3.line()
		.x(function (d) {return x2(d.date);})
		.y(function (d) {return y2(d.price);});

svg.append("defs").append("clipPath")
	.attr("id", "clip")
	.append("rect")
	.attr("width", width)
	.attr("height", height);

var focus = svg.append("g")
		.attr("class", "focus")
		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var context = svg.append("g")
		 <!--.attr("class", "context")-- >
		.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");

var currentExtent = [0, 0]

var brush = d3.brushX()
		.extent([[0, 0], [width, height2]])
		.on("brush start", updateCurrentExtent)
		.on("brush end", brushed);

var zoom = d3.zoom()
		.scaleExtent([oneMonthZoom, Infinity])
		.translateExtent([[0, 0], [width, height]])
		.extent([[0, 0], [oneDay, height]])
		.on("zoom", zoomed);

focus.append("path")
	.datum(dateDim.top(Infinity))
	.attr("class", "line")
	.attr("d", line);

var gX = focus.append("g")
	.attr("class", "axis axis--x")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

var gY = focus.append("g")
	.attr("class", "axis axis--y")
	.call(yAxis);

context.append("path")
	.datum(data)
	.attr("class", "line")
	.attr("d", line2);

context.append("g")
	.attr("class", "axis axis--x")
	.attr("transform", "translate(0," + height2 + ")")
	.call(xAxis2);

svg.append("rect")
	.attr("class", "zoom")
	.attr("width", width)
	.attr("height", height)
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
	.call(zoom);

context.append("g")
	.attr("class", "brush")
	.on("click", brushed)
	.call(brush)
	.call(brush.move, [new Date(2015, 0, 1), new Date(2015, 1, 1)].map(x));

function updateCurrentExtent() {
		currentExtent = d3.brushSelection(this);
	}

function brushed() {
		if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom")
			return; // ignore brush-by-zoom
		var s = d3.event.selection;

var p = currentExtent,
		xYear = oneMonth,
		left,
		right;

if (d3.event.selection && s[1] - s[0] >= xYear) {
			if (p[0] == s[0] && p[1] < s[1]) { // case where right handle is extended
				if (s[1] >= width) {
					left = width - xYear
						right = width
						s = [left, right];
				} else {
					left = s[1] - xYear / 2
						right = s[1] + xYear / 2
						s = [left, right];
				}
			} else if (p[1] == s[1] && p[0] > s[0]) { // case where left handle is extended
				if (s[0] <= 0) {
					s = [0, xYear];
				} else {
					s = [s[0] - xYear / 2, s[0] + xYear / 2]
				}
			}
		}

if (!d3.event.selection) { // if no selection took place and the brush was just clicked
			var mouse = d3.mouse(this)[0];
			if (mouse < xYear / 2) {
				s = [0, xYear];
			} else if (mouse + xYear / 2 > width) {
				s = [width - xYear, width];
			} else {
				s = [d3.mouse(this)[0] - xYear / 2, d3.mouse(this)[0] + xYear / 2];
			}
		}

var filter = dateDim.filterRange(s.map(x2.invert));

if (d3.event.sourceEvent && d3.event.sourceEvent.type == 'mouseup') {
			y.domain([d3.min(return_filter(filter), function (d) {
						return d.price;
					}) - 1,
					d3.max(return_filter(filter), function (d) {
						return d.price;
					}) + 1]);
		}

focus.select(".line").attr("d", line);
		focus.select(".axis--x").call(xAxis);
		focus.select(".axis--y").call(yAxis);
		svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
			.scale(width / (s[1] - s[0]))
			.translate(-s[0], 0));
	}

function zoomed() {
		if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush")
			return; // ignore zoom-by-brush
		var t = d3.event.transform
		x.domain(t.rescaleX(x2).domain());
		gY.call(yAxis.scale(d3.event.transform.rescaleY(y)));
		//y.domain(t.rescaleY(y2).domain());
		focus.select(".line").attr("d", line);
		focus.select(".axis--x").call(xAxis);
		focus.select(".axis--y").call(yAxis);
		context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
	}

}

function type(d) {
		d.date = new Date(dateScale.invert(d.date));
		d.price = +d.price;
		return d;
	}
</script>

Modified http://d3js.org/queue.v1.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js to a secure url

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

https://d3js.org/queue.v1.min.js

https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js