jQuery-Plugin with D3.js: Responsive Daterange Selector UI-Component

Minimal html configuration

<div id="graph"></div>

jQuery initialization and customization

This plugin requires jQuery (>= 1.8.x) and D3.js (>= v5.4.0).

Initialize and destroy:

Change dataset and update:

CSS:
#graph text { fill: #ccc; }

#graph tik { fill: #ccc; }

#graph .domain, #graph line { stroke: #ccc; }

#graph .bars .bar { fill: #bdb7b7; }

#graph .bars .bar.highlight { fill: #d81b60 !important; }

#graph .bars .axis--x path { display: none; }

#graph .bars .bar.selected { fill: #fff; }

#graph .handles .selector { fill: #fff; stroke: #777; stroke-width: 0.5px; }

#graph .handles .selector.active { fill: #ccc !important; }

#graph .handles .range { fill: #fff; stroke: none; }

#graph .handles .selector .handlehovertext { fill: #fff; stroke: none; font-size: 11px; font-family: Helvetica, Arial; }

#graph div.tooltip { position: absolute; text-align: center; width: 40px; height: 24px; padding-top: 5px; font: 12px sans-serif; background: #ccc; border: 0px; border-radius: 2px; pointer-events: none; color: #333; }

#graph div.tooltip:after { box-sizing: border-box; display: inline; width: 100%; line-height: 1; color: #ccc; content: "\25BC"; position: absolute; text-align: center; margin: -3px 0 0 0; top: 100%; left: 0; }



Script:
$("#graph").daterangeselect({
	data: [],
	height: 320,
	rangeBarOpacity: 0.4,
	handleScaleFactor: 1.6,
	dataLengthTrigger: 30,
	onRangeUpdate: function (obj) {	
		$('#range').html('Range: '+ obj[0] + ' – '+ obj[1]);
	},
	hoverText: function (obj) {
		return obj.key_as_string;
	}
});

Parameters

Parameter Type Default Description
data array [] data array: [{"key_as_string": "2003", doc_count: 123, "key": 1041375600000}]

object properties:
"key_as_string" (string): Year
"doc_count" (int): value
"key" (int): unix timestamp in milliseconds

container string #graph ID or class of HTML container element (div)
height int 320 total height of SVG container
rangeBarOpacity float 0.4 opacity of range bar indicator (> 0, <= 1)
handleScaleFactor float 1.6 scale factor of slider handles (>= 1, <= 1.7)
dataLengthTrigger int 30 show tick values on x-axis for each bar or every 10th element
data lengt =< value: show on each bar
data lengt > value: show on every 10th element

Events

Parameter Description
onRangeUpdate call back function for slider range selection event

returns Array
[
    0: from,
    1: to
]
[0: 1987, 1: 2002]

hoverText call back function for custom hoover text format
expects string as return value (can be in html format)

object keys:
"key_as_string" (string): Year
"doc_count" (int): value
"key" (int): unix timestamp in milliseconds

Methods

Parameter Description
update update graph
method name "update"
expects second parameter "data"
var data = []; $("#graph").daterangeselect("update", data);

Download

Plugin minified version
View project on Github: Github Repository