score:1

I will describe few basic features you must understand before approaching visualization. As per the fiddle, you have two sets of data that must be plotted across X & Y axis.(Ex: data, dots). Domain for this data sets are different though you need to understand the concept of Domain and range.

# d3.scaleLinear() <>

Constructs a new continuous scale with the unit domain [0, 1], the unit range [0, 1], the default interpolator and clamping disabled. Linear scales are a good default choice for continuous quantitative data because they preserve proportional differences. Each range value y can be expressed as a function of the domain value x: y = mx + b.

# d3.scaleTime() <>

Constructs a new time scale with the domain [2000-01-01, 2000-01-02], the unit range [0, 1], the default interpolator and clamping disabled.

• Domain and Range mapping for individual data series
• Brush and zoom and its invert mapping to the scales
• Redraw the plots based on new scales.

** Below code snippet is just to explain the brush implementation with out considering the scale for dots. Try it your self to map the logic by reading the documentation Brush Event Example

``````var data = [{
"date": "2017-04-22T11:45:00.000Z",
"total": 731.6047915220261,
"min": 1.8769680261611938,
"key_field": "1492861500000",
"max": 2.7165653705596924,
"price": 1.8769680261611938,
"total_count": 315,
"mean": 2.3225548937207177,
"count": 315
},
{
"date": "2017-04-01T05:30:00.000Z",
"total": 708.6527144908905,
"min": 1.779407262802124,
"key_field": "1491024600000",
"max": 2.6382412910461426,
"price": 1.779407262802124,
"total_count": 315,
"mean": 2.249691157113938,
"count": 315
},
{
"date": "2017-03-31T02:45:00.000Z",
"total": 700.1026722192764,
"min": 1.8156663179397583,
"key_field": "1490928300000",
"max": 2.587003469467163,
"price": 1.8156663179397583,
"total_count": 315,
"mean": 2.2225481657754806,
"count": 315
},
{
"date": "2017-03-31T02:30:00.000Z",
"total": 699.6637561321259,
"min": 1.8294581174850464,
"key_field": "1490927400000",
"max": 2.57082200050354,
"price": 1.8294581174850464,
"total_count": 315,
"mean": 2.221154781371828,
"count": 315
},
{
"date": "2017-03-31T02:15:00.000Z",
"total": 702.4780179262161,
"min": 1.8524492979049683,
"key_field": "1490926500000",
"max": 2.628413677215576,
"price": 1.8524492979049683,
"total_count": 315,
"mean": 2.2300889457975117,
"count": 315
},
{
"date": "2017-03-31T02:00:00.000Z",
"total": 705.038315653801,
"min": 1.8353750705718994,
"key_field": "1490925600000",
"max": 2.604921340942383,
"price": 1.8353750705718994,
"total_count": 315,
"mean": 2.2382168750914317,
"count": 315
},
{
"date": "2017-03-31T01:45:00.000Z",
"total": 701.7422981262207,
"min": 1.8062856197357178,
"key_field": "1490924700000",
"max": 2.5804450511932373,
"price": 1.8062856197357178,
"total_count": 315,
"mean": 2.2277533273848276,
"count": 315
},
{
"date": "2017-03-31T01:30:00.000Z",
"total": 706.3951338529587,
"min": 1.8176854848861694,
"key_field": "1490923800000",
"max": 2.584993600845337,
"price": 1.8176854848861694,
"total_count": 315,
"mean": 2.242524234453837,
"count": 315
},
{
"date": "2017-03-31T01:15:00.000Z",
"total": 704.2638461589813,
"min": 1.7730687856674194,
"key_field": "1490922900000",
"max": 2.6350574493408203,
"price": 1.7730687856674194,
"total_count": 315,
"mean": 2.235758241774544,
"count": 315
},
{
"date": "2017-03-31T01:00:00.000Z",
"total": 703.4522807598114,
"min": 1.8147484064102173,
"key_field": "1490922000000",
"max": 2.5720791816711426,
"price": 1.8147484064102173,
"total_count": 315,
"mean": 2.233181843681941,
"count": 315
},
{
"date": "2017-03-31T00:45:00.000Z",
"total": 706.2918384075165,
"min": 1.7760894298553467,
"key_field": "1490921100000",
"max": 2.596073627471924,
"price": 1.7760894298553467,
"total_count": 315,
"mean": 2.2421963124048143,
"count": 315
},
{
"date": "2017-03-31T00:30:00.000Z",
"total": 707.0961575508118,
"min": 1.7756011486053467,
"key_field": "1490920200000",
"max": 2.6146974563598633,
"price": 1.7756011486053467,
"total_count": 315,
"mean": 2.2447497065105138,
"count": 315
},
{
"date": "2017-03-31T00:15:00.000Z",
"total": 706.1140650510788,
"min": 1.7976468801498413,
"key_field": "1490919300000",
"max": 2.6084225177764893,
"price": 1.7976468801498413,
"total_count": 315,
"mean": 2.2416319525431074,
"count": 315
},
{
"date": "2017-03-31T00:00:00.000Z",
"total": 707.5575115680695,
"min": 1.8497636318206787,
"key_field": "1490918400000",
"max": 2.5975091457366943,
"price": 1.8497636318206787,
"total_count": 315,
"mean": 2.2462143224383158,
"count": 315
},
{
"date": "2017-03-30T23:45:00.000Z",
"total": 707.9171552658081,
"min": 1.8517450094223022,
"key_field": "1490917500000",
"max": 2.5352094173431396,
"price": 1.8517450094223022,
"total_count": 315,
"mean": 2.247356048462883,
"count": 315
},
{
"date": "2017-03-30T23:30:00.000Z",
"total": 707.09266269207,
"min": 1.8389506340026855,
"key_field": "1490916600000",
"max": 2.593708038330078,
"price": 1.8389506340026855,
"total_count": 315,
"mean": 2.244738611720857,
"count": 315
},
{
"date": "2017-03-30T23:15:00.000Z",
"total": 708.3666490316391,
"min": 1.861556053161621,
"key_field": "1490915700000",
"max": 2.6234216690063477,
"price": 1.861556053161621,
"total_count": 315,
"mean": 2.2487830127988544,
"count": 315
}
]
var dots  =
[
{
"date": "2017-04-22T11:45:00.000Z",
"total": 731.6047915220261,
"min": 1.8769680261611938,
"key_field": "1492861500000",
"max": 2.7165653705596924,
"price": 1.8769680261611938,
"total_count": 315,
"mean": 2.3225548937207177,
"count": 315
},

{
"date": "2017-03-31T01:45:00.000Z",
"total": 701.7422981262207,
"min": 1.8062856197357178,
"key_field": "1490924700000",
"max": 2.5804450511932373,
"price": 1.7062856197357178,
"total_count": 315,
"mean": 2.2277533273848276,
"count": 315
},
{
"date": "2017-03-31T01:30:00.000Z",
"total": 706.3951338529587,
"min": 1.8176854848861694,
"key_field": "1490923800000",
"max": 2.584993600845337,
"price": 1.8176854848861694,
"total_count": 315,
"mean": 2.242524234453837,
"count": 315
},

{
"date": "2017-03-28T18:00:00.000Z",
"total": 728.67049741745,
"min": 1.2837289810180664,
"key_field": "1490724000000",
"max": 2.706052541732788,
"price": 1.3837289810180664,
"total_count": 315,
"mean": 2.3132396743411108,
"count": 315
},
{
"date": "2017-03-26T20:00:00.000Z",
"total": 721.6712145805359,
"min": 1.8257900476455688,
"key_field": "1490558400000",
"max": 2.762291669845581,
"price": 1.4257900476455688,
"total_count": 315,
"mean": 2.291019728827098,
"count": 315
},
{
"date": "2017-03-28T17:45:00.000Z",
"total": 726.2018908262253,
"min": 1.8992395401000977,
"key_field": "1490723100000",
"max": 2.7374281883239746,
"price": 1.8992395401000977,
"total_count": 315,
"mean": 2.305402828019763,
"count": 315
},
{
"date": "2017-03-28T17:30:00.000Z",
"total": 730.83118724823,
"min": 1.8232735395431519,
"key_field": "1490722200000",
"max": 2.696560859680176,
"price": 1.3232735395431519,
"total_count": 315,
"mean": 2.320099007137238,
"count": 315
},
{
"date": "2017-03-28T17:15:00.000Z",
"total": 728.1204907894135,
"min": 1.8851990699768066,
"key_field": "1490721300000",
"max": 2.654668092727661,
"price": 1.8851990699768066,
"total_count": 315,
"mean": 2.3114936215536934,
"count": 315
},

{
"date": "2017-03-27T02:45:00.000Z",
"total": 702.2468013763428,
"min": 1.7651863098144531,
"key_field": "1490582700000",
"max": 2.6390604972839355,
"price": 1.373651863098144531,
"total_count": 315,
"mean": 2.229354925004263,
"count": 315
},
{
"date": "2017-03-27T02:30:00.000Z",
"total": 700.9137979745865,
"min": 1.8334004878997803,
"key_field": "1490581800000",
"max": 2.620957136154175,
"price": 1.8334004878997803,
"total_count": 315,
"mean": 2.2251231681732904,
"count": 315
},
{
"date": "2017-03-27T02:15:00.000Z",
"total": 700.9274371862411,
"min": 1.8098258972167969,
"key_field": "1490580900000",
"max": 2.6065454483032227,
"price": 1.8098258972167969,
"total_count": 315,
"mean": 2.2251664672579086,
"count": 315
},
{
"date": "2017-03-27T02:00:00.000Z",
"total": 703.2963272333145,
"min": 1.7948274354934692,
"key_field": "1490580000000",
"max": 2.549198865890503,
"price": 1.7968274354934692,
"total_count": 315,
"mean": 2.2326867531216332,
"count": 315
},
{
"date": "2017-03-27T01:45:00.000Z",
"total": 700.4703311920166,
"min": 1.8429771661758423,
"key_field": "1490579100000",
"max": 2.518679141998291,
"price": 1.348429771661758423,
"total_count": 315,
"mean": 2.223715337117513,
"count": 315
},
{
"date": "2017-03-27T01:30:00.000Z",
"total": 701.4555011987686,
"min": 1.7773451805114746,
"key_field": "1490578200000",
"max": 2.635554790496826,
"price": 1.27773451805114746,
"total_count": 315,
"mean": 2.2268428609484716,
"count": 315
},

{
"date": "2017-03-26T20:00:00.000Z",
"total": 721.6712145805359,
"min": 1.8257900476455688,
"key_field": "1490558400000",
"max": 2.762291669845581,
"price": 1.48257900476455688,
"total_count": 315,
"mean": 2.291019728827098,
"count": 315
},
{
"date": "2017-03-26T19:45:00.000Z",
"total": 724.9882735013962,
"min": 1.80784010887146,
"key_field": "1490557500000",
"max": 2.6430490016937256,
"price": 0.40784010887146,
"total_count": 315,
"mean": 2.301550074607607,
"count": 315
},

]

var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 110, left: 40},
margin2 = {top: 430, 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 parseDate = d3.timeParse("%m/%d/%Y %H:%M");
var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleTime().range([0, width]),
x2 = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
y2 = d3.scaleLinear().range([height2, 0]),
dotXScale = d3.scaleTime().range([0, width]),
dotYScale = d3.scaleLinear().range([height, 0]);

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

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

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

var line = d3.line()
.x(function (d) { return x(new Date(d.date)); })
.y(function (d) { return y(d.price); });

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

var clip = svg.append("defs").append("svg:clipPath")
.attr("id", "clip")
.append("svg:rect")
.attr("width", width)
.attr("height", height)
.attr("x", 0)
.attr("y", 0);

var Line_chart = svg.append("g")
.attr("class", "focus")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.attr("clip-path", "url(#clip)");

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 + ")");

x.domain(d3.extent(data, function(d) { return new Date(d.date); }));
dotXScale.domain(d3.extent(dots, function(d) { return new Date(d.date); }));
y.domain([0, d3.max(data, function (d) { return d.price; })]);
dotYScale.domain([0, d3.max(dots, function (d) { return d.price; })]);
x2.domain(x.domain());
y2.domain(y.domain());

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

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

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

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);

context.append("g")
.attr("class", "brush")
.call(brush)
.call(brush.move, x.range());

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

var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.text("a simple tooltip");

g.selectAll(".dot")
.data(dots)
.enter()
.append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function(d) {
//console.log('---',x(new Date(d.date)))
return dotXScale(new Date(d.date));
})
.attr("cy", function(d) {
//console.log(y(d.price));
return dotYScale(d.price);
})
.on("mouseover", function(d){
console.log(d);
return tooltip.style("visibility", "visible").html("Expected value is: "+d.expected_value + "<br/>"  + "value : "+d.close +"<br/>"  + "deviation is: "+d.deviation_expected)
})

function brushed() {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
var s = d3.event.selection || x2.range();
x.domain(s.map(x2.invert, x2));
dotXScale.domain(s.map(x2.invert), x2);
Line_chart.select(".line").attr("d", line);
focus.select(".axis--x").call(xAxis);
svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
.scale(width / (s[1] - s[0]))
.translate(-s[0], 0));

g.selectAll(".dot").transition(1000)
.attr("cx", function (d) {
return  dotXScale(new Date(d.date)) })
.attr("cy", function (d) {
//console.log(y(d.price));
return  dotYScale(d.price) });
}

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());
Line_chart.select(".line").attr("d", line);
focus.select(".axis--x").call(xAxis);
context.select(".brush").call(brush.move, x.range().map(t.invertX, t));
}

function type(d) {
d.date = new Date(d.date);
d.price = +d.price;
return d;
}``````
``````.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}

}

.buttonWidth {
height: 34px;
width: 50px;
}

.actiontable {
width: 36rem;
}

.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
.zoom {
cursor: move;
fill: none;
pointer-events: all;
}

.area {
fill: none;
stroke: #a2dced;
stroke-width: 2;
clip-path: url(#clip);
}

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

rect.selection
{
fill:green;
}``````
``````<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="500"></svg>``````