Skip to content

Instantly share code, notes, and snippets.

@emilyinamillion

emilyinamillion/.block

Last active June 25, 2016 00:20
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 emilyinamillion/fc1593aea93089bab61b2c71ef2e9544 to your computer and use it in GitHub Desktop.
Save emilyinamillion/fc1593aea93089bab61b2c71ef2e9544 to your computer and use it in GitHub Desktop.
Download ZIP
Focus+Context via Brushing
Raw
.block
license: gpl-3.0
license: gpl-3.0
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.

forked from mbostock's block: Focus+Context via Brushing

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
}
.area {
fill: #B4B4B4;
opacity: .8;
clip-path: url(#clip);
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.brush .extent {
stroke: black;
fill: white;
fill-opacity: .6;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="//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("%Y").parse;
//%b
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.caseid); });
var area2 = d3.svg.area()
.interpolate("monotone")
.x(function(d) { return x2(d.date); })
.y0(height2)
.y1(function(d) { return y2(d.caseid); });
// var lineV = d3.svg.line()
// .interpolate("monotone")
// .x(function(d) { return x(d.date); })
// .y(function(d) { return yV(d.y)});
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("totaltopics.csv", type, function(error, data) {
console.log(data);
x.domain(d3.extent(data.map(function(d) { return d.date; })));
y.domain([0, d3.max(data.map(function(d) { return d.caseid; }))]);
x2.domain(x.domain());
y2.domain(y.domain());
focus.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);
///////
// 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.date = +d.date;
d.caseid = +d.caseId;
return d;
}
</script>
Raw
sp500.csv
date price
Jan 2000 1394.46
Feb 2000 1366.42
Mar 2000 1498.58
Apr 2000 1452.43
May 2000 1420.6
Jun 2000 1454.6
Jul 2000 1430.83
Aug 2000 1517.68
Sep 2000 1436.51
Oct 2000 1429.4
Nov 2000 1314.95
Dec 2000 1320.28
Jan 2001 1366.01
Feb 2001 1239.94
Mar 2001 1160.33
Apr 2001 1249.46
May 2001 1255.82
Jun 2001 1224.38
Jul 2001 1211.23
Aug 2001 1133.58
Sep 2001 1040.94
Oct 2001 1059.78
Nov 2001 1139.45
Dec 2001 1148.08
Jan 2002 1130.2
Feb 2002 1106.73
Mar 2002 1147.39
Apr 2002 1076.92
May 2002 1067.14
Jun 2002 989.82
Jul 2002 911.62
Aug 2002 916.07
Sep 2002 815.28
Oct 2002 885.76
Nov 2002 936.31
Dec 2002 879.82
Jan 2003 855.7
Feb 2003 841.15
Mar 2003 848.18
Apr 2003 916.92
May 2003 963.59
Jun 2003 974.5
Jul 2003 990.31
Aug 2003 1008.01
Sep 2003 995.97
Oct 2003 1050.71
Nov 2003 1058.2
Dec 2003 1111.92
Jan 2004 1131.13
Feb 2004 1144.94
Mar 2004 1126.21
Apr 2004 1107.3
May 2004 1120.68
Jun 2004 1140.84
Jul 2004 1101.72
Aug 2004 1104.24
Sep 2004 1114.58
Oct 2004 1130.2
Nov 2004 1173.82
Dec 2004 1211.92
Jan 2005 1181.27
Feb 2005 1203.6
Mar 2005 1180.59
Apr 2005 1156.85
May 2005 1191.5
Jun 2005 1191.33
Jul 2005 1234.18
Aug 2005 1220.33
Sep 2005 1228.81
Oct 2005 1207.01
Nov 2005 1249.48
Dec 2005 1248.29
Jan 2006 1280.08
Feb 2006 1280.66
Mar 2006 1294.87
Apr 2006 1310.61
May 2006 1270.09
Jun 2006 1270.2
Jul 2006 1276.66
Aug 2006 1303.82
Sep 2006 1335.85
Oct 2006 1377.94
Nov 2006 1400.63
Dec 2006 1418.3
Jan 2007 1438.24
Feb 2007 1406.82
Mar 2007 1420.86
Apr 2007 1482.37
May 2007 1530.62
Jun 2007 1503.35
Jul 2007 1455.27
Aug 2007 1473.99
Sep 2007 1526.75
Oct 2007 1549.38
Nov 2007 1481.14
Dec 2007 1468.36
Jan 2008 1378.55
Feb 2008 1330.63
Mar 2008 1322.7
Apr 2008 1385.59
May 2008 1400.38
Jun 2008 1280
Jul 2008 1267.38
Aug 2008 1282.83
Sep 2008 1166.36
Oct 2008 968.75
Nov 2008 896.24
Dec 2008 903.25
Jan 2009 825.88
Feb 2009 735.09
Mar 2009 797.87
Apr 2009 872.81
May 2009 919.14
Jun 2009 919.32
Jul 2009 987.48
Aug 2009 1020.62
Sep 2009 1057.08
Oct 2009 1036.19
Nov 2009 1095.63
Dec 2009 1115.1
Jan 2010 1073.87
Feb 2010 1104.49
Mar 2010 1140.45
Raw
totaltopics.csv
date caseId
1791 10
1792 24
1793 16
1794 12
1795 36
1796 93
1797 48
1798 36
1799 42
1800 49
1801 36
1803 114
1804 76
1805 138
1806 162
1807 259
1808 61
1809 322
1810 266
1812 280
1813 322
1814 329
1815 287
1816 294
1817 294
1818 266
1819 231
1820 189
1821 287
1822 224
1823 203
1824 287
1825 189
1826 198
1827 329
1828 385
1829 264
1830 399
1831 294
1832 392
1833 287
1834 446
1835 228
1836 255
1837 140
1838 378
1839 450
1840 387
1841 270
1842 396
1843 306
1844 312
1845 372
1846 376
1847 324
1848 324
1849 378
1850 1511
1851 882
1852 472
1853 729
1854 639
1855 837
1856 576
1857 647
1858 621
1859 1035
1860 544
1861 479
1862 378
1863 830
1864 590
1865 758
1866 1206
1867 928
1868 865
1869 1677
1870 1215
1871 1782
1872 1747
1873 1783
1874 1791
1875 1899
1876 2071
1877 2325
1878 2025
1879 2223
1880 2008
1881 2103
1882 2358
1883 2547
1884 2448
1885 2511
1886 2693
1887 2415
1888 2171
1889 2500
1890 2740
1891 2221
1892 2300
1893 2473
1894 2268
1895 2371
1896 2089
1897 1675
1898 1653
1899 1953
1900 1802
1901 1640
1902 1944
1903 1926
1904 1773
1905 1566
1906 1841
1907 1593
1908 1657
1909 1490
1910 1468
1911 2050
1912 2592
1913 2655
1914 2466
1915 2038
1916 1963
1917 1954
1918 2089
1919 1630
1920 1980
1921 1611
1922 2009
1923 1935
1924 2120
1925 1908
1926 1809
1927 1593
1928 1152
1929 1175
1930 1512
1931 1336
1932 1521
1933 1530
1934 1539
1935 1440
1936 1467
1937 1530
1938 1277
1939 1251
1940 1489
1941 1494
1942 1478
1943 1260
1944 1476
1945 1216
1946 2556
1947 2124
1948 2286
1949 1782
1950 1854
1951 1798
1952 2196
1953 1566
1954 1660
1955 1908
1956 2270
1957 2790
1958 2502
1959 2448
1960 2502
1961 2134
1962 2844
1963 3294
1964 2410
1965 2538
1966 2646
1967 3546
1968 2432
1969 2320
1970 2592
1971 3090
1972 3348
1973 3114
1974 2772
1975 3252
1976 3222
1977 2790
1978 2880
1979 2808
1980 2736
1981 3186
1982 2988
1983 3114
1984 2970
1985 2970
1986 2898
1987 2700
1988 2736
1989 2520
1990 2320
1991 2156
1992 2140
1993 1728
1994 1656
1995 1638
1996 1728
1997 1800
1998 1656
1999 1546
2000 1564
2001 1512
2002 1512
2003 1412
2004 1440
2005 1566
2006 1346
2007 1314
2008 1494
2009 1656
2010 1530
2011 1386
2012 1422
2013 1350
2014 1278
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment