Last active
March 12, 2017 01:17
-
-
Save powersparks/b28097508b11f4b167130684beab5f8c to your computer and use it in GitHub Desktop.
Brush first, Zoom same element - Brushing and Zoom works, but not Pan.
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
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .area { fill: steelblue; /* clip-path: url("/~powersparks/bz.html#clip");*/ } | |
| .axis--grid .domain { fill: #ddd; stroke: none; } | |
| .axis--grid .tick--minor line { stroke-opacity: .5; } | |
| .axis--x .domain, .axis--grid .tick line { stroke: #333; } | |
| .axis--x, .axis--y, .tick, .domain, .axis--grid .tick { shape-rendering: crispEdges; border: thin; border-color:black; } | |
| .brush .brush-sensor { shape-rendering: crispEdges; border: thin; border-color:black; } | |
| .brush .handle{ shape-rendering: crispEdges; fill: steelblue; } | |
| .line{ border: solid 1px steelblue; margin: 4px; padding: 4px; background-color: #eeeeec; fill: none;} | |
| .timeline-container{ margin: 0px; padding: 0px ; border:1px solid blue ; } | |
| .zoom { cursor: move; fill: none; pointer-events: all; } | |
| rect.zoom{ cursor:ns-resize; } | |
| </style> | |
| <div id="timelineContainerDivId" width="100%" height="90px" class="timeline-container"> | |
| <svg id="timeFilterId" viewBox="0 0 800 80" preserveAspectRatio="xMidYMid"></svg> | |
| </div> | |
| <!--svg id="timeFilterId" viewBox="0 0 960 500" preserveAspectRatio="xMidYMid"></svg--> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var divWidth = document.getElementById('timelineContainerDivId').clientWidth-10; | |
| // 1) ESTABLISH LAYOUT SETTINGS | |
| var svg = d3.select("svg").attr("viewBox","0 0 " + divWidth +" 80"), | |
| h = 80, w = divWidth, | |
| rwidth = svg.attr("width") ? svg.attr("width") : w, | |
| rheight = svg.attr("height") ? svg.attr("height") : h, | |
| margin = {top: 11, right: 20, bottom: 30, left: 40}, | |
| margin2 = {top: 60, right: 20, bottom: 20, left: 40}, | |
| width = w - margin.left - margin.right - 10, | |
| height = h - margin.top - margin.bottom, | |
| height2 = (svg.attr("height") ? + svg.attr("height") : h) - margin2.top - margin2.bottom; | |
| //https://github.com/d3/d3-drag | |
| //https://github.com/d3/d3-zoom | |
| // 2) SCALE TIME RANGE on x and y | |
| var x = d3.scaleTime().range([0, width]), | |
| x2 = d3.scaleTime().range([0, width]), | |
| y = d3.scaleLinear().range([height, 0]), | |
| y2 = d3.scaleLinear().range([height2, 0]); | |
| // 3) AXIS ORIENTATION and TICKS | |
| var xAxis = d3.axisTop(x).tickSizeInner(height-5).tickSizeOuter( height).tickPadding(-height *0.2), | |
| yAxis = d3.axisRight(y).ticks(0).tickSize(width); | |
| // 4) INSTANTIATE d3 ZOOM | |
| var zoom = d3.zoom() | |
| .scaleExtent([1, Infinity]) | |
| .translateExtent([[0, 0], [width, height]]) | |
| .extent([[0, 0], [width, height]]) | |
| .on("zoom", zoomed); | |
| // 4.1) Setup Brush for time filter | |
| var brush_sensor = d3.brushX() | |
| .extent([[0, 0], [width, height]]) | |
| .on("brush end", focus_brush_feedback ); | |
| // 5) APPEND FOCUS g element as the TIMELINE | |
| var focus = svg.append("g") | |
| .attr("class", "focus") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| // 6) PARSE TIME FORMAT | |
| var parseDate = d3.timeParse("%b %Y"); | |
| // 7) SETUP DATA WITH CALLBACK AND FORMAT DATE TYPE | |
| d3.csv("sp500_2.csv", type, function(error, data) { | |
| if (error) throw error; | |
| // 7.1) append culling to be used for a clip area. | |
| svg.append("defs").append("clipPath") | |
| .attr("id", "clip") | |
| .append("rect") | |
| .attr("width", width) | |
| .attr("height", height); | |
| // 7.2) STARTING DOMAIN of x and y axis | |
| x.domain(d3.extent(data, function(d) { return d.date; })); | |
| y.domain([0, d3.max(data, function(d) { return d.price; })]); | |
| // 7.3) STARING DOMAIN FOR ALTERNATE axis | |
| x2.domain(x.domain()); | |
| y2.domain(y.domain()); | |
| // 7.4) APPEND x-axis | |
| focus.append("g") | |
| .attr("class", "axis axis--x") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| // 7.5) APPEND y-axis | |
| focus.append("g") | |
| .attr("class", "axis axis--y") | |
| .call(yAxis); | |
| // 7.6) Select all the circle's within the Chart | |
| focus.selectAll("circle") | |
| .data(data).enter().append("circle") | |
| .attr("clip-path", "url('#clip')") | |
| .attr("class","dot") | |
| .attr("r", 3.5) | |
| .attr("opacity", 0.7) | |
| .style("fill", "steelblue"); | |
| d3.xml("blog.svg").mimeType("image/svg+xml").get(function(error, xml) { | |
| if (error) throw error; | |
| document.body.appendChild(xml.documentElement); | |
| }); | |
| focus.selectAll("image") | |
| .data(data).enter().append("image") | |
| .attr('xlink:href','blog.svg') | |
| .attr('class', 'icon') | |
| .attr('height', '22') | |
| .attr('width', '22') | |
| .attr('y', '0') | |
| .attr('transform', "translate(" + -11+ "," + 22+ ")" ) | |
| .attr('x', function(d){return x(d.date); }) | |
| ; | |
| // 7.7) Select class dot and apply anyomous function | |
| focus.selectAll(".dot") | |
| .attr('cx', function(d) { return x(d.date); }) | |
| .attr('cy', height * 0.5); | |
| // 7.8) APPEND rect to use as a zoom interface | |
| focus.append("g") | |
| .attr("class", "zoom brush") | |
| .attr("width", width) | |
| .attr("height", height) | |
| //.attr("transform", "translate(" + 0 + "," + 0 + ")") | |
| // .call(drag) | |
| .call(brush_sensor) | |
| .call(brush_sensor.move, [width - Math.floor(width / 2) - ( width / 5), width - Math.floor( width / 2) + (width / 5)]) | |
| //.on("drag", function() { d3.event.stopImmediatePropagation(); }); | |
| .call(zoom); | |
| /*focus.select('.brush') | |
| .on('mousedown', function(){ | |
| brush_elm = svg.select(".selection").node(); | |
| new_click_event = new Event('mousedown'); | |
| new_click_event.pageX = d3.event.pageX; | |
| new_click_event.clientX = d3.event.clientX; | |
| new_click_event.pageY = d3.event.pageY; | |
| new_click_event.clientY = d3.event.clientY; | |
| brush_elm.dispatchEvent(new_click_event); | |
| }); | |
| */ | |
| //.on("brush", function() { d3.event.stopImmediatePropagation(); }); | |
| focus.selectAll('.tick line') | |
| .attr("y1", function(d){ | |
| return -height; | |
| }); | |
| }); //end of data call | |
| function focus_brush_feedback(){ | |
| if(!d3.event.select)return; | |
| console.info("slave_feedback"); | |
| console.info(d3.event.select); | |
| } | |
| // 8) Method for zooming | |
| function zoomed() { | |
| if(d3.event.select)return; | |
| // 8.1) confirm the right events are used | |
| if (d3.event.sourceEvent == null || d3.event.sourceEvent.type == null || d3.event.sourceEvent.type === '') return; | |
| if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; | |
| // 8.2) INSTANTIATE d3 transform event | |
| var t = d3.event.transform; | |
| // 8.3) RESET the X DOMAIN using the Transform, Rescale X based on the x2 domain | |
| x.domain(t.rescaleX(x2).domain()); | |
| // 8.4) Select the Chart's element to rescale. | |
| focus.selectAll(".dot") | |
| .attr('cx', function(d) { return x(d.date); }) | |
| .attr('cy', height * 0.5); | |
| focus.selectAll('.icon') | |
| .attr('x', function(d){return x(d.date); }); | |
| /* | |
| focus.selectAll(".icon") | |
| .attr("transform", function(d) { | |
| return "translate(" + 0 + "," + d.x + ")" | |
| }); | |
| */ | |
| // 8.5) Select the Chart's axis--x class, call xAxis to reset it(how?) | |
| focus.select(".axis--x").call(xAxis); | |
| focus.selectAll('.tick line') | |
| .attr("y1", function(d){ | |
| return -height; | |
| }); | |
| } | |
| function type(d) { | |
| d.date = parseDate(d.date); | |
| //d.price = +d.close; | |
| d.price = +d.price; | |
| return d; | |
| } | |
| </script> |
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
| date | price | |
|---|---|---|
| Jan 2000 | 1394.46 | |
| Jul 2009 | 1040.45 | |
| Feb 2010 | 1340.45 | |
| Apr 2016 | 1140.45 | |
| Mar 2017 | 1240.45 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment