Last active
August 29, 2015 14:13
-
-
Save skoslitz/9148889722cb4642f4a9 to your computer and use it in GitHub Desktop.
d3 brush
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| count | time_begin | |
|---|---|---|
| 1 | 1002-01-01 | |
| 3 | 1004-01-01 | |
| 2 | 1005-01-01 | |
| 1 | 1006-01-01 | |
| 1 | 1019-01-01 | |
| 1 | 1019-12-01 | |
| 1 | 1028-01-01 | |
| 1 | 1029-01-01 | |
| 1 | 1035-01-01 | |
| 2 | 1038-01-01 | |
| 1 | 1040-01-01 | |
| 2 | 1043-12-01 | |
| 4 | 1044-01-01 | |
| 2 | 1048-01-01 | |
| 1 | 1054-01-01 | |
| 4 | 1056-01-01 | |
| 1 | 1057-01-01 | |
| 1 | 1061-01-01 | |
| 2 | 1069-01-01 | |
| 1 | 1074-12-01 | |
| 1 | 1077-01-01 | |
| 1 | 1084-01-01 | |
| 2 | 1085-01-01 | |
| 1 | 1086-01-01 | |
| 1 | 1088-01-01 | |
| 2 | 1090-01-01 | |
| 1 | 1091-01-01 | |
| 1 | 1093-01-01 | |
| 1 | 1094-01-01 | |
| 6 | 1095-01-01 | |
| 2 | 1097-12-01 | |
| 2 | 1098-01-01 | |
| 1 | 1098-12-01 | |
| 1 | 1098-12-26 | |
| 2 | 1099-01-01 | |
| 9 | 1099-12-01 | |
| 1 | 1100-12-01 | |
| 1 | 1106-01-01 | |
| 5 | 1124-01-01 | |
| 1 | 1124-08-11 | |
| 1 | 1124-12-01 | |
| 6 | 1125-01-01 | |
| 3 | 1126-01-01 | |
| 1 | 1126-02-14 | |
| 1 | 1127-01-01 | |
| 1 | 1128-06-10 | |
| 1 | 1130-06-01 | |
| 1 | 1132-01-01 | |
| 1 | 1135-12-01 | |
| 1 | 1141-12-01 | |
| 1 | 1143-01-01 | |
| 4 | 1144-01-01 | |
| 8 | 1145-01-01 | |
| 5 | 1146-01-01 | |
| 2 | 1146-09-08 | |
| 2 | 1148-01-01 | |
| 1 | 1149-12-01 | |
| 1 | 1150-01-01 | |
| 10 | 1151-01-01 | |
| 1 | 1152-01-01 | |
| 1 | 1154-11-01 | |
| 1 | 1165-01-01 | |
| 1 | 1166-01-01 | |
| 1 | 1174-01-01 | |
| 2 | 1175-01-01 | |
| 1 | 1176-01-01 | |
| 1 | 1176-12-01 | |
| 1 | 1178-01-01 | |
| 1 | 1181-01-01 | |
| 1 | 1182-01-01 | |
| 2 | 1183-01-01 | |
| 1 | 1186-01-01 | |
| 2 | 1191-01-01 | |
| 1 | 1192-01-01 | |
| 1 | 1194-01-01 | |
| 8 | 1196-01-01 | |
| 1 | 1196-08-01 | |
| 5 | 1197-01-01 | |
| 4 | 1202-01-01 | |
| 1 | 1202-02-01 | |
| 1 | 1203-12-01 | |
| 1 | 1205-01-01 | |
| 1 | 1206-01-01 | |
| 4 | 1217-01-01 | |
| 1 | 1219-01-01 | |
| 1 | 1222-01-01 | |
| 2 | 1224-01-01 | |
| 1 | 1224-08-01 | |
| 1 | 1225-01-01 | |
| 3 | 1226-01-01 | |
| 1 | 1229-01-01 | |
| 1 | 1230-01-01 | |
| 3 | 1233-01-01 | |
| 1 | 1233-12-01 | |
| 2 | 1234-01-01 | |
| 1 | 1246-01-01 | |
| 1 | 1249-01-01 | |
| 1 | 1254-01-01 | |
| 2 | 1255-01-01 | |
| 2 | 1256-01-01 | |
| 3 | 1263-01-01 | |
| 2 | 1264-01-01 | |
| 9 | 1270-01-01 | |
| 3 | 1270-06-01 | |
| 3 | 1271-01-01 | |
| 3 | 1272-01-01 | |
| 1 | 1276-01-01 | |
| 2 | 1278-01-01 | |
| 2 | 1280-01-01 | |
| 6 | 1281-01-01 | |
| 1 | 1281-12-01 | |
| 9 | 1282-01-01 | |
| 1 | 1291-12-01 | |
| 1 | 1293-12-01 | |
| 1 | 1301-06-01 | |
| 1 | 1305-01-01 | |
| 1 | 1307-01-01 | |
| 1 | 1310-11-11 | |
| 7 | 1312-01-01 | |
| 1 | 1313-01-01 | |
| 3 | 1314-01-01 | |
| 11 | 1315-01-01 | |
| 1 | 1315-06-01 | |
| 1 | 1315-10-18 | |
| 6 | 1316-01-01 | |
| 4 | 1317-01-01 | |
| 1 | 1329-01-01 | |
| 3 | 1338-01-01 | |
| 1 | 1342-01-01 | |
| 2 | 1343-01-01 | |
| 1 | 1345-01-01 | |
| 1 | 1361-01-01 | |
| 2 | 1364-12-01 | |
| 1 | 1365-01-01 | |
| 1 | 1368-01-01 | |
| 1 | 1372-01-01 | |
| 1 | 1374-07-01 | |
| 1 | 1386-01-01 | |
| 1 | 1425-01-01 | |
| 1 | 1430-01-01 | |
| 3 | 1431-01-01 | |
| 1 | 1432-01-01 | |
| 1 | 1433-02-22 | |
| 1 | 1437-01-01 | |
| 5 | 1438-01-01 | |
| 1 | 1440-12-01 | |
| 2 | 1447-01-01 | |
| 1 | 1448-01-01 | |
| 6 | 1448-06-01 | |
| 1 | 1452-12-01 | |
| 1 | 1456-07-25 | |
| 1 | 1461-01-01 | |
| 1 | 1461-09-01 | |
| 2 | 1480-01-01 | |
| 1 | 1482-01-01 | |
| 10 | 1491-01-01 | |
| 1 | 1491-02-16 | |
| 1 | 1491-06-01 | |
| 1 | 1491-08-10 | |
| 2 | 1492-01-01 | |
| 2 | 1501-01-01 | |
| 1 | 1504-06-01 | |
| 1 | 1513-01-01 | |
| 1 | 1513-11-10 | |
| 1 | 1514-06-01 | |
| 1 | 1516-06-01 | |
| 1 | 1517-01-01 | |
| 1 | 1517-06-26 | |
| 1 | 1529-01-01 | |
| 2 | 1529-09-01 | |
| 1 | 1530-01-01 | |
| 2 | 1533-01-01 | |
| 3 | 1539-01-01 | |
| 1 | 1539-12-01 | |
| 1 | 1551-01-01 | |
| 1 | 1556-06-01 | |
| 1 | 1557-12-01 | |
| 1 | 1567-04-04 | |
| 1 | 1569-01-01 | |
| 1 | 1570-03-01 | |
| 1 | 1570-06-01 | |
| 1 | 1570-08-01 | |
| 12 | 1571-01-01 | |
| 4 | 1571-03-27 | |
| 1 | 1571-03-29 | |
| 3 | 1573-01-01 | |
| 1 | 1573-06-28 | |
| 1 | 1583-01-01 | |
| 1 | 1585-01-01 | |
| 1 | 1588-12-31 | |
| 1 | 1596-01-01 | |
| 1 | 1597-01-01 | |
| 2 | 1597-05-01 | |
| 1 | 1597-06-01 | |
| 2 | 1599-01-01 | |
| 1 | 1600-01-01 | |
| 5 | 1601-01-01 | |
| 1 | 1601-09-29 | |
| 1 | 1603-03-04 | |
| 1 | 1607-12-01 | |
| 2 | 1610-01-01 | |
| 1 | 1613-01-01 | |
| 2 | 1617-01-01 | |
| 1 | 1617-05-01 | |
| 1 | 1621-05-01 | |
| 1 | 1622-01-01 | |
| 1 | 1625-01-01 | |
| 1 | 1625-06-01 | |
| 8 | 1626-01-01 | |
| 1 | 1626-05-17 | |
| 1 | 1626-09-01 | |
| 1 | 1628-01-03 | |
| 3 | 1634-01-01 | |
| 5 | 1635-01-01 | |
| 1 | 1635-06-01 | |
| 1 | 1635-07-25 | |
| 3 | 1636-01-01 | |
| 1 | 1636-08-01 | |
| 7 | 1637-01-01 | |
| 2 | 1637-05-01 | |
| 5 | 1638-01-01 | |
| 1 | 1639-02-04 | |
| 1 | 1639-03-03 | |
| 1 | 1647-01-11 | |
| 1 | 1651-01-01 | |
| 1 | 1661-12-01 | |
| 1 | 1669-12-25 | |
| 1 | 1675-01-01 | |
| 1 | 1683-12-01 | |
| 3 | 1693-01-01 | |
| 1 | 1694-01-01 | |
| 1 | 1694-11-01 | |
| 2 | 1698-01-01 | |
| 1 | 1698-11-05 | |
| 2 | 1699-01-01 | |
| 1 | 1708-12-01 | |
| 5 | 1709-01-01 | |
| 1 | 1709-04-11 | |
| 1 | 1709-05-15 | |
| 1 | 1718-01-01 | |
| 1 | 1719-01-01 | |
| 1 | 1720-01-01 | |
| 1 | 1720-06-01 | |
| 1 | 1725-01-01 | |
| 1 | 1736-01-01 | |
| 2 | 1737-01-01 | |
| 1 | 1739-06-01 | |
| 1 | 1740-01-01 | |
| 1 | 1740-10-01 | |
| 1 | 1756-01-01 | |
| 3 | 1759-11-01 | |
| 1 | 1764-08-01 | |
| 1 | 1769-08-01 | |
| 9 | 1770-01-01 | |
| 2 | 1770-06-01 | |
| 13 | 1771-01-01 | |
| 4 | 1771-06-01 | |
| 3 | 1771-07-01 | |
| 1 | 1771-08-13 | |
| 4 | 1772-01-01 | |
| 1 | 1777-01-01 | |
| 1 | 1783-06-01 | |
| 1 | 1784-02-21 | |
| 1 | 1785-01-01 | |
| 1 | 1785-12-01 | |
| 1 | 1786-09-01 | |
| 1 | 1787-01-01 | |
| 1 | 1792-01-01 | |
| 2 | 1827-01-01 | |
| 1 | 1831-01-03 | |
| 1 | 1831-01-27 | |
| 1 | 1831-02-17 | |
| 2 | 1831-02-18 | |
| 2 | 1833-01-01 | |
| 1 | 1843-12-01 | |
| 1 | 1845-01-01 | |
| 1 | 1853-12-01 | |
| 1 | 1860-01-01 | |
| 1 | 1861-02-12 | |
| 1 | 1870-06-01 | |
| 1 | 1870-12-18 | |
| 2 | 1870-12-21 | |
| 1 | 1870-12-24 | |
| 1 | 1870-12-25 | |
| 2 | 1871-02-01 | |
| 1 | 1871-02-02 | |
| 1 | 1871-02-03 | |
| 1 | 1871-10-01 | |
| 1 | 1872-01-01 | |
| 1 | 1872-04-01 | |
| 1 | 1873-01-26 | |
| 2 | 1873-12-08 | |
| 1 | 1875-01-01 | |
| 3 | 1876-01-01 | |
| 2 | 1878-01-01 | |
| 2 | 1898-01-01 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>d3::brush</title> | |
| <meta charset=utf-8 /> | |
| </head> | |
| <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js'></script> | |
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| font: 14px monospace; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .x.axis path { | |
| display: none; | |
| } | |
| .line { | |
| fill: none; | |
| stroke: crimson; | |
| stroke-width: 1.5px; | |
| } | |
| .brush { | |
| fill: lightgray; | |
| fill-opacity: .75; | |
| shape-rendering: crispEdges; | |
| } | |
| </style> | |
| <body> | |
| <div class="container"> | |
| <h1>tambora on brush</h1> | |
| <hr> | |
| <div> | |
| <p><mark>Please open console for more information</mark></p> | |
| <h3>Reference:</h3> | |
| <ul> | |
| <li><a href="https://github.com/mbostock/d3/wiki/SVG-Controls">d3.brush API</a></li> | |
| <li><a href="https://github.com/mbostock/d3/wiki/Time-Formatting">d3.time Formatting</a></li> | |
| </ul> | |
| </div> | |
| <div id="timeline"></div> | |
| <hr> | |
| </div> | |
| <!-- researching d3s brush --> | |
| <script type="text/javascript"> | |
| var margin = {top: 20, right: 20, bottom: 30, left: 50}, | |
| width = 960 - margin.left - margin.right, | |
| height = 180 - margin.top - margin.bottom; | |
| var parseDate = d3.time.format("%Y-%m-%d").parse; | |
| var x = d3.time.scale() | |
| .range([0, width]); | |
| var y = d3.scale.linear() | |
| .range([height, 0]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left"); | |
| var line = d3.svg.line() | |
| .x(function(d) { return x(d.time_begin); }) | |
| .y(function(d) { return y(d.count); }) | |
| .interpolate("bundle"); | |
| var svg = d3.select("#timeline").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| d3.csv("events.csv", function(error, data) { | |
| data.forEach(function(d) { | |
| d.count = +d.count; | |
| d.time_begin = parseDate(d.time_begin); | |
| }); | |
| x.domain(d3.extent(data, function(d) { return d.time_begin; })); | |
| y.domain(d3.extent(data, function(d) { return d.count; })); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis) | |
| .append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 6) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "end") | |
| .text("n count"); | |
| svg.append("path") | |
| .datum(data) | |
| .attr("class", "line") | |
| .attr("d", line); | |
| // define brush control element and its events | |
| var brush = d3.svg.brush() | |
| .x(x) | |
| .on("brushstart", brushstart) | |
| .on("brush", brushmove) | |
| .on("brushend", brushend); | |
| // create svg group with class brush and call brush on it | |
| var brushg = svg.append("g") | |
| .attr("class", "brush") | |
| .call(brush); | |
| // set brush extent to rect and define objects height | |
| brushg.selectAll("rect") | |
| .attr("height", height); | |
| function brushstart() { | |
| // console.log('brushstart event is triggered'); | |
| } | |
| function brushmove() { | |
| // console.log('the brush event is currently triggered'); | |
| } | |
| function brushend() { | |
| // console.log('NOTE: brushend event is triggered'); | |
| // console.log('Is the brush empty: ' + brush.empty()); | |
| console.log('Extent of brush: ' + brush.extent() ); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
init