Skip to content

Instantly share code, notes, and snippets.

@lorenzopub

lorenzopub/.block

Created December 26, 2016 17:01
Show Gist options
  • Save lorenzopub/013c0c41f9ffab4d27f860127f79c5f5 to your computer and use it in GitHub Desktop.
Save lorenzopub/013c0c41f9ffab4d27f860127f79c5f5 to your computer and use it in GitHub Desktop.
Download ZIP
X-Value Mouseover with Pan & Zoom
Raw
.block
license: none
Raw
README.md

Built with blockbuilder.org

d3 V4 extension to X-Value mouseover found here.

Achieved by accessing zoom transform properties x, y and k in mousemove() and zoomed() function.

Happy to offer assistance in reproductions, tweet me at @LynchThomas

forked from twlynch's block: X-Value Mouseover with Pan & Zoom

Raw
data.csv
dt price
29/05/2016 00:00 529.5389047
29/05/2016 00:15 527.5588802
29/05/2016 00:30 524.778649
29/05/2016 00:45 523.2958823
29/05/2016 01:00 523.4245659
29/05/2016 01:15 524.4627037
29/05/2016 01:30 527.9041225
29/05/2016 01:45 529.4042726
29/05/2016 02:00 531.7883293
29/05/2016 02:15 528.9821571
29/05/2016 02:30 531.8800509
29/05/2016 02:45 530.8204334
29/05/2016 03:00 527.6374539
29/05/2016 03:15 528.0533021
29/05/2016 03:30 527.118013
29/05/2016 03:45 531.6117305
29/05/2016 04:00 534.3326951
29/05/2016 04:15 533.9387235
29/05/2016 04:30 531.4396142
29/05/2016 04:45 528.8642298
29/05/2016 05:00 531.722203
29/05/2016 05:15 529.9992645
29/05/2016 05:30 529.5556164
29/05/2016 05:45 530.8012955
29/05/2016 06:00 534.1582467
29/05/2016 06:15 531.5518665
29/05/2016 06:30 532.1871656
29/05/2016 06:45 532.3282584
29/05/2016 07:00 529.7790915
29/05/2016 07:15 526.8690928
29/05/2016 07:30 524.6285684
29/05/2016 07:45 522.983496
29/05/2016 08:00 523.4607828
29/05/2016 08:15 522.4288209
29/05/2016 08:30 522.228843
29/05/2016 08:45 524.6277197
29/05/2016 09:00 522.151199
29/05/2016 09:15 522.6803508
29/05/2016 09:30 525.2135589
29/05/2016 09:45 526.3242766
29/05/2016 10:00 521.6435571
29/05/2016 10:15 520.9708598
29/05/2016 10:30 520.2197563
29/05/2016 10:45 520.8286925
29/05/2016 11:00 519.1821379
29/05/2016 11:15 520.3896485
29/05/2016 11:30 522.819018
29/05/2016 11:45 521.1327638
29/05/2016 12:00 523.1243534
29/05/2016 12:15 526.3183889
29/05/2016 12:30 528.2727566
29/05/2016 12:45 528.6504385
29/05/2016 13:00 527.1448216
29/05/2016 13:15 526.975057
29/05/2016 13:30 524.9293366
29/05/2016 13:45 528.130332
29/05/2016 14:00 526.87321
29/05/2016 14:15 528.9517776
29/05/2016 14:30 528.7978342
29/05/2016 14:45 530.6942574
29/05/2016 15:00 532.4666049
29/05/2016 15:15 533.1065342
29/05/2016 15:30 533.4338
29/05/2016 15:45 534.5889181
29/05/2016 16:00 532.0885295
29/05/2016 16:15 530.738012
29/05/2016 16:30 528.4786901
29/05/2016 16:45 531.371595
29/05/2016 17:00 531.5801234
29/05/2016 17:15 533.4482674
29/05/2016 17:30 535.1864591
29/05/2016 17:45 532.0032708
29/05/2016 18:00 533.5419303
29/05/2016 18:15 536.1544703
29/05/2016 18:30 538.1812494
29/05/2016 18:45 542.6845332
29/05/2016 19:00 544.2645532
29/05/2016 19:15 541.8886483
29/05/2016 19:30 542.8574868
29/05/2016 19:45 547.2709411
29/05/2016 20:00 546.8532287
29/05/2016 20:15 547.5187238
29/05/2016 20:30 550.0686207
29/05/2016 20:45 549.5900027
29/05/2016 21:00 548.9099088
29/05/2016 21:15 549.201577
29/05/2016 21:30 550.9274143
29/05/2016 21:45 551.5686587
29/05/2016 22:00 549.6782338
29/05/2016 22:15 549.9946916
29/05/2016 22:30 547.961721
29/05/2016 22:45 548.68068
29/05/2016 23:00 551.0298729
29/05/2016 23:15 555.8607307
29/05/2016 23:30 556.7467247
29/05/2016 23:45 557.1482762
30/05/2016 00:00 555.1188481
30/05/2016 00:15 553.2834776
30/05/2016 00:30 551.7969474
30/05/2016 00:45 553.4107394
30/05/2016 01:00 552.9719455
30/05/2016 01:15 555.1907765
30/05/2016 01:30 552.9392159
30/05/2016 01:45 556.1415515
30/05/2016 02:00 551.3208113
30/05/2016 02:15 555.6778853
30/05/2016 02:30 558.9293734
30/05/2016 02:45 559.9938367
30/05/2016 03:00 559.0903515
30/05/2016 03:15 562.6599091
30/05/2016 03:30 564.284598
30/05/2016 03:45 560.8398195
30/05/2016 04:00 563.6686439
30/05/2016 04:15 561.4345947
30/05/2016 04:30 559.0118588
30/05/2016 04:45 561.4771546
30/05/2016 05:00 560.8053913
30/05/2016 05:15 556.7005345
30/05/2016 05:30 554.22468
30/05/2016 05:45 550.7212416
30/05/2016 06:00 553.774174
30/05/2016 06:15 555.7583899
30/05/2016 06:30 557.0187632
30/05/2016 06:45 554.6857896
30/05/2016 07:00 554.4765331
30/05/2016 07:15 552.5757717
30/05/2016 07:30 555.2563676
30/05/2016 07:45 553.5450762
30/05/2016 08:00 551.2569376
30/05/2016 08:15 551.7263233
30/05/2016 08:30 548.9351753
30/05/2016 08:45 546.1492609
30/05/2016 09:00 545.516713
30/05/2016 09:15 546.7990486
30/05/2016 09:30 544.7450563
30/05/2016 09:45 542.0217215
30/05/2016 10:00 542.0258711
30/05/2016 10:15 545.6676747
30/05/2016 10:30 548.9624457
30/05/2016 10:45 547.921157
30/05/2016 11:00 550.6783721
30/05/2016 11:15 552.0014279
30/05/2016 11:30 554.0288217
30/05/2016 11:45 552.1263134
30/05/2016 12:00 549.550576
30/05/2016 12:15 547.8079265
30/05/2016 12:30 551.3026201
30/05/2016 12:45 549.9550233
30/05/2016 13:00 553.4813578
30/05/2016 13:15 556.5084731
30/05/2016 13:30 554.0244103
30/05/2016 13:45 555.3126946
30/05/2016 14:00 558.133824
30/05/2016 14:15 557.6626154
30/05/2016 14:30 559.7515283
30/05/2016 14:45 560.4347443
30/05/2016 15:00 558.6436797
30/05/2016 15:15 555.00754
30/05/2016 15:30 553.4700457
30/05/2016 15:45 552.3512078
30/05/2016 16:00 554.7501108
30/05/2016 16:15 553.7217279
30/05/2016 16:30 551.8896247
30/05/2016 16:45 551.1123782
30/05/2016 17:00 551.7316701
30/05/2016 17:15 549.8934832
30/05/2016 17:30 552.0212273
30/05/2016 17:45 552.8600891
30/05/2016 18:00 549.8054227
30/05/2016 18:15 546.3426347
30/05/2016 18:30 547.60672
30/05/2016 18:45 550.5353637
30/05/2016 19:00 553.2863966
30/05/2016 19:15 553.1217521
30/05/2016 19:30 550.4687461
30/05/2016 19:45 547.0925256
30/05/2016 20:00 546.301695
30/05/2016 20:15 547.6573104
30/05/2016 20:30 544.5921177
30/05/2016 20:45 543.9434068
30/05/2016 21:00 541.0384972
30/05/2016 21:15 538.1421637
30/05/2016 21:30 536.9005986
30/05/2016 21:45 534.7886518
30/05/2016 22:00 535.0202763
30/05/2016 22:15 532.2809759
30/05/2016 22:30 528.0531663
30/05/2016 22:45 526.3701666
30/05/2016 23:00 526.5788652
30/05/2016 23:15 528.2669507
30/05/2016 23:30 527.1251248
30/05/2016 23:45 527.6744231
31/05/2016 00:00 529.9578297
31/05/2016 00:15 525.098693
31/05/2016 00:30 521.7736734
31/05/2016 00:45 524.4043804
31/05/2016 01:00 527.0927773
31/05/2016 01:15 528.8743209
31/05/2016 01:30 527.2106303
31/05/2016 01:45 525.8356119
31/05/2016 02:00 524.993027
31/05/2016 02:15 525.138921
31/05/2016 02:30 523.7436488
31/05/2016 02:45 525.8006303
31/05/2016 03:00 529.2518516
31/05/2016 03:15 528.4364819
31/05/2016 03:30 530.3766922
31/05/2016 03:45 531.4836497
31/05/2016 04:00 535.0405551
31/05/2016 04:15 532.422054
31/05/2016 04:30 535.5472296
31/05/2016 04:45 536.8424257
31/05/2016 05:00 535.6866766
31/05/2016 05:15 535.177933
31/05/2016 05:30 531.8587348
31/05/2016 05:45 534.5500416
31/05/2016 06:00 536.7487642
31/05/2016 06:15 534.5047597
31/05/2016 06:30 537.7434472
31/05/2016 06:45 536.2103297
31/05/2016 07:00 534.3003777
31/05/2016 07:15 537.2720731
31/05/2016 07:30 536.4135723
31/05/2016 07:45 533.7651508
31/05/2016 08:00 537.4191071
31/05/2016 08:15 537.808962
31/05/2016 08:30 535.7542768
31/05/2016 08:45 532.9270735
31/05/2016 09:00 536.4425885
31/05/2016 09:15 532.7507978
31/05/2016 09:30 532.5963515
31/05/2016 09:45 533.039164
31/05/2016 10:00 531.4206721
31/05/2016 10:15 531.5716131
31/05/2016 10:30 532.2914666
31/05/2016 10:45 530.9618008
31/05/2016 11:00 531.3485077
31/05/2016 11:15 530.9806809
31/05/2016 11:30 527.9485916
31/05/2016 11:45 527.6692165
31/05/2016 12:00 526.6906502
31/05/2016 12:15 524.344453
31/05/2016 12:30 526.2037258
31/05/2016 12:45 525.037854
31/05/2016 13:00 522.4634028
31/05/2016 13:15 521.0588879
31/05/2016 13:30 517.6757116
31/05/2016 13:45 516.6201641
31/05/2016 14:00 515.969519
31/05/2016 14:15 513.904086
31/05/2016 14:30 514.0692942
31/05/2016 14:45 512.5225675
31/05/2016 15:00 510.8977313
31/05/2016 15:15 512.2503649
31/05/2016 15:30 512.5022097
31/05/2016 15:45 514.5306554
31/05/2016 16:00 513.7919976
31/05/2016 16:15 513.0118415
31/05/2016 16:30 513.4901886
31/05/2016 16:45 511.3693831
31/05/2016 17:00 512.4725371
31/05/2016 17:15 507.8084046
31/05/2016 17:30 510.8952002
31/05/2016 17:45 510.7606956
31/05/2016 18:00 514.1781921
31/05/2016 18:15 512.9852145
31/05/2016 18:30 512.4264463
31/05/2016 18:45 512.0923973
31/05/2016 19:00 513.2666606
31/05/2016 19:15 510.9043901
31/05/2016 19:30 513.7661189
31/05/2016 19:45 510.3100905
31/05/2016 20:00 510.5742457
31/05/2016 20:15 512.5068497
31/05/2016 20:30 516.0893132
31/05/2016 20:45 513.4419914
31/05/2016 21:00 512.1981996
31/05/2016 21:15 511.6079079
31/05/2016 21:30 515.2135677
31/05/2016 21:45 513.0531418
31/05/2016 22:00 516.6751815
31/05/2016 22:15 517.6381912
31/05/2016 22:30 516.081836
31/05/2016 22:45 517.5857142
31/05/2016 23:00 516.7094712
31/05/2016 23:15 519.2442451
31/05/2016 23:30 519.5219463
31/05/2016 23:45 521.9278797
01/06/2016 00:00 523.6351892
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<div id="chart"></div>
<style>
body {
font: 10px Arial;
}
.view {
fill: rgba(255, 255, 255, 0.2);
}
.axis path {
display: none;
}
.axis line {
stroke-opacity: 0.3;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
button {
position: absolute;
top: 20px;
left: 80px;
}
</style>
<body>
<button>Reset</button>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 50, left: 50},
width = 1000 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseTime = d3.timeParse("%d/%m/%Y %H:%M");
bisectDate = d3.bisector(function(d) { return d.dt; }).left;
formatValue = d3.format(",.2f"),
formatCurrency = function(d) { return "£" + formatValue(d); };
var x = d3.scaleTime()
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var priceSeries = d3.line()
.defined(function(d) { return d.price != 0; })
.x(function(d) { return x(d.dt); })
.y(function(d) { return y(d.price); });
svg = d3.select('#chart')
.append("svg:svg")
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append("svg:g")
.attr("id","group")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var focus = svg.append("g")
.style("display", "none")
// Get the data
d3.csv("data.csv", function(error, data) {
if (error) throw error;
// format the data
data.forEach(function(d,i) {
d.dt = parseTime(d.dt);
d.price = +d.price;
});
// Scale the range of the data
console.log("Date range: ", d3.extent(data, function(d) { return d.dt; }));
console.log("Price range: ", d3.extent(data, function(d) { return +d.price; }));
x.domain(d3.extent(data, function(d) { return d.dt; }));
y.domain(d3.extent(data, function(d) { return d.price; }));
var zoom = d3.zoom()
.scaleExtent([0.75, 15000])
.translateExtent([[-100000, -100000], [100000, 100000]])
.on("zoom", zoomed);
var xAxis = d3.axisBottom(x)
.ticks((width + 2) / (height + 2) * 5)
.tickSize(-height)
.tickPadding(10);
var yAxis = d3.axisRight(y)
.ticks(5)
.tickSize(width)
.tickPadding(- 20 - width);
svg.append("text")
.attr("transform",
"translate(" + (width/2) + " ," + (height + margin.top + 20) + ")")
.style("font-size","12px")
.style("font-family", "sans-serif")
.style("text-anchor", "middle")
.text("Date/Time");
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left/1.2)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.style("font-size","12px")
.style("text-anchor", "middle")
.text("Price");
var view = svg.append("rect")
.attr("class", "view")
.attr("x", 0.5)
.attr("y", 0.5)
.attr("width", width - 1)
.attr("height", height - 1);
var gX = svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
var gY = svg.append("g")
.attr("class", "axis axis--y")
.call(yAxis);
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
var chartBody = svg.append("g")
.attr("clip-path", "url(#clip)");
focus.append("circle")
.attr("class", "y")
.style("fill", "none")
.style("stroke", "steelblue")
.attr("r", 4)
.attr("clip-path", "url(#clip)");
focus.append("text")
.attr("dy", ".35em")
.attr("clip-path", "url(#clip)");
chartBody.append("svg:path")
.data([data])
.attr("class", "line")
.attr("d", priceSeries);
svg.append("rect")
.attr("id","rect")
.attr("width", width)
.attr("height", height)
.style("fill", "none")
.style("pointer-events", "all")
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).ticks(0));
svg.append("g")
.call(d3.axisLeft(y).ticks(0));
d3.select("#rect").call(zoom);
d3.select("button").on("click", resetted);
function mouseDate(scale) {
var g = d3.select("#group")._groups[0][0]
var x0 = scale.invert(d3.mouse(g)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
return d;
}
function mousemove() {
var transform = d3.zoomTransform(this);
var xt = transform.rescaleX(x), yt = transform.rescaleY(y);
d = mouseDate(xt);
focus.select("circle.y")
.attr('cx', function() {
return transform.applyX(x(d.dt));
})
.attr('cy', function() {
return transform.applyY(y(d.price));
});
focus.select("text")
.text(formatCurrency(d.price))
.attr('x', function() {
return transform.applyX(x(d.dt))+10;
})
.attr('y', function() {
return transform.applyY(y(d.price));
});
}
function zoomed() {
gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
gY.call(yAxis.scale(d3.event.transform.rescaleY(y)));
var t = d3.event.transform, xt = t.rescaleX(x), yt = t.rescaleY(y)
svg.select(".line")
.attr("d",priceSeries.x(function(d) { return xt(d.dt);})
.y(function(d) { return yt(d.price);}));
//d = mouseDate(x);
focus.select("circle.y")
.classed("zoomed", true)
.attr("id","one")
.attr('cx', function() {return t.applyX(x(d.dt)); })
.attr('cy', function() {return t.applyY(y(d.price)); });
focus.select("text")
.text(formatCurrency(d.price))
.attr('x', function() { return t.applyX(x(d.dt))+10;})
.attr('y',function() {return t.applyY(y(d.price)); });
}
function resetted() {
d3.select("#rect").transition()
.duration(750)
.call(zoom.transform, d3.zoomIdentity);
}
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment