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
license: gpl-3.0 | |
license: gpl-3.0 |
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
<!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> |
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 |
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 |