Skip to content

Instantly share code, notes, and snippets.

@otfrom

otfrom/README.md

Forked from mbostock/.block
Last active August 29, 2015 14:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save otfrom/f6dfa33350e46ff9f676 to your computer and use it in GitHub Desktop.
Save otfrom/f6dfa33350e46ff9f676 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

This examples demonstrates how to use D3's brush component to implement focus + context zooming. Click and drag in the small chart below to pan or zoom.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
}
.area {
fill: steelblue;
clip-path: url(#clip);
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.brush .extent {
stroke: #fff;
fill-opacity: .125;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 10, right: 10, bottom: 100, left: 40},
margin2 = {top: 430, right: 10, bottom: 20, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
height2 = 500 - margin2.top - margin2.bottom;
var parseDate = d3.time.format("%d/%m/%Y").parse;
var x = d3.time.scale().range([0, width]),
x2 = d3.time.scale().range([0, width]),
y = d3.scale.linear().range([height, 0]),
y2 = d3.scale.linear().range([height2, 0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom"),
xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
yAxis = d3.svg.axis().scale(y).orient("left");
var brush = d3.svg.brush()
.x(x2)
.on("brush", brushed);
var area = d3.svg.area()
.interpolate("monotone")
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y(d.attendances); });
var area2 = d3.svg.area()
.interpolate("monotone")
.x(function(d) { return x2(d.date); })
.y0(height2)
.y1(function(d) { return y2(d.attendances); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
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 + ")");
d3.csv("sp500.csv", type, function(error, data) {
x.domain(d3.extent(data.map(function(d) { return d.date; })));
y.domain([0, d3.max(data.map(function(d) { return d.attendances; }))]);
x2.domain(x.domain());
y2.domain(y.domain());
focus.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);
focus.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
focus.append("g")
.attr("class", "y axis")
.call(yAxis);
context.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area2);
context.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2);
context.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", -6)
.attr("height", height2 + 7);
});
function brushed() {
x.domain(brush.empty() ? x2.domain() : brush.extent());
focus.select(".area").attr("d", area);
focus.select(".x.axis").call(xAxis);
}
function type(d) {
d.date = parseDate(d.date);
d.attendances = +d.attendances;
return d;
}
</script>
Raw
sp500.csv
date attendances
07/11/2010 267142
14/11/2010 256893
21/11/2010 260958
28/11/2010 256061
05/12/2010 245842
12/12/2010 273068
19/12/2010 266059
26/12/2010 244799
02/01/2011 279547
09/01/2011 260138
16/01/2011 253937
23/01/2011 250833
30/01/2011 251079
06/02/2011 266161
13/02/2011 274118
20/02/2011 261795
27/02/2011 252456
06/03/2011 260401
13/03/2011 275567
20/03/2011 278671
27/03/2011 284182
03/04/2011 286302
10/04/2011 283175
17/04/2011 268128
24/04/2011 279872
01/05/2011 283893
08/05/2011 280121
15/05/2011 276368
22/05/2011 275401
29/05/2011 271297
05/06/2011 272805
12/06/2011 267281
19/06/2011 270572
26/06/2011 273469
03/07/2011 283999
10/07/2011 279033
17/07/2011 274093
24/07/2011 267032
31/07/2011 269194
07/08/2011 267399
14/08/2011 253458
21/08/2011 253074
28/08/2011 250090
04/09/2011 260821
11/09/2011 260414
18/09/2011 270874
25/09/2011 275735
02/10/2011 288511
09/10/2011 281814
16/10/2011 275382
23/10/2011 263261
30/10/2011 259704
06/11/2011 266806
13/11/2011 262969
20/11/2011 264091
27/11/2011 267207
04/12/2011 261337
11/12/2011 262788
18/12/2011 261516
25/12/2011 241551
01/01/2012 264152
08/01/2012 257709
15/01/2012 250227
22/01/2012 254178
29/01/2012 265663
05/02/2012 253409
12/02/2012 264100
19/02/2012 270624
26/02/2012 283709
04/03/2012 282295
11/03/2012 280480
18/03/2012 282198
25/03/2012 289792
01/04/2012 290851
08/04/2012 270552
15/04/2012 269266
22/04/2012 266261
29/04/2012 263122
06/05/2012 272178
13/05/2012 280641
20/05/2012 276373
27/05/2012 291878
03/06/2012 296147
10/06/2012 282338
17/06/2012 275902
24/06/2012 283851
01/07/2012 295252
08/07/2012 284468
15/07/2012 282532
22/07/2012 279634
29/07/2012 283929
05/08/2012 266740
12/08/2012 268090
19/08/2012 276793
26/08/2012 271968
02/09/2012 266006
09/09/2012 273520
16/09/2012 278694
23/09/2012 273897
30/09/2012 276248
07/10/2012 278923
14/10/2012 276317
21/10/2012 278680
28/10/2012 269012
04/11/2012 260170
11/11/2012 273634
18/11/2012 277766
25/11/2012 275413
02/12/2012 269397
09/12/2012 272796
16/12/2012 275421
23/12/2012 275155
30/12/2012 263037
06/01/2013 270905
13/01/2013 255060
20/01/2013 242443
27/01/2013 260047
03/02/2013 280145
10/02/2013 272377
17/02/2013 270103
24/02/2013 262922
03/03/2013 279770
10/03/2013 284553
17/03/2013 277827
24/03/2013 272813
31/03/2013 271102
07/04/2013 276618
14/04/2013 274440
21/04/2013 285142
28/04/2013 281612
05/05/2013 284470
12/05/2013 287840
19/05/2013 274144
26/05/2013 273477
02/06/2013 267531
09/06/2013 274663
16/06/2013 275041
23/06/2013 284197
30/06/2013 281014
07/07/2013 287360
14/07/2013 296500
21/07/2013 295791
28/07/2013 285360
04/08/2013 272274
11/08/2013 266980
18/08/2013 261580
25/08/2013 268756
01/09/2013 276232
08/09/2013 267587
15/09/2013 258761
22/09/2013 269769
29/09/2013 281500
06/10/2013 276433
13/10/2013 271969
20/10/2013 269023
27/10/2013 275296
03/11/2013 255549
10/11/2013 264517
17/11/2013 266406
24/11/2013 265953
01/12/2013 271501
08/12/2013 273931
15/12/2013 273068
22/12/2013 265814
29/12/2013 247020
05/01/2014 256873
12/01/2014 250926
19/01/2014 256739
26/01/2014 260565
02/02/2014 266802
09/02/2014 273428
16/02/2014 267564
23/02/2014 267749
02/03/2014 279683
09/03/2014 285649
16/03/2014 289532
23/03/2014 291120
30/03/2014 281399
06/04/2014 292788
13/04/2014 277633
20/04/2014 276717
27/04/2014 284932
04/05/2014 286601
11/05/2014 292000
18/05/2014 294596
25/05/2014 296667
01/06/2014 280353
08/06/2014 290528
15/06/2014 297525
22/06/2014 299030
29/06/2014 296048
06/07/2014 295386
13/07/2014 297232
20/07/2014 297478
27/07/2014 293481
03/08/2014 279941
10/08/2014 274674
17/08/2014 262321
24/08/2014 259930
31/08/2014 271404
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment