| <!DOCTYPE html> | |
| <html lang='en'> | |
| <head> | |
| <meta charset='utf-8'> | |
| <title> | |
| UI Experiment: Hidden Axis Toggle | |
| </title> | |
| <script src='http://d3js.org/d3.v3.min.js' charset='utf-8'></script> | |
| <style type='text/css'> | |
| svg { | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| .axis path, .axis line { | |
| fill: none; | |
| stroke: #575757; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis text { | |
| fill: #575757; | |
| } | |
| text { | |
| font-family: sans-serif; | |
| font-size: 14px; | |
| } | |
| #hoverHelp { | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type='text/javascript'> | |
| var margin = {top: 20, right: 10, bottom: 20, left: 100}; | |
| var width = 800 - margin.left - margin.right; | |
| var height = 480 - margin.top - margin.bottom; | |
| var svg = d3.select('body') | |
| .append('svg') | |
| .attr({ | |
| 'width': width + margin.left + margin.right, | |
| 'height': height + margin.top + margin.bottom | |
| }) | |
| .append('g') | |
| .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); | |
| var data = [1, 10, 100, 1000, 10000, 100000, 1000000, 10000000, 100000000, 1000000000]; | |
| var xScale = d3.scale.linear().domain([1, data.length]).range([0, width]); | |
| var yScale = d3.scale.linear().domain(d3.extent(data, function(d) { return d; })).range([height, 0]); | |
| var logScale = d3.scale.log().domain(d3.extent(data, function(d) { return d; })).range([height, 0]); | |
| var xAxis = d3.svg.axis().scale(xScale).orient('bottom'); | |
| var yAxis = d3.svg.axis().scale(yScale).orient('left'); | |
| var logAxis = d3.svg.axis().scale(logScale).orient('left').tickValues(data).tickFormat(d3.format('g')); | |
| var log = false; | |
| var transitionDuration = 500; | |
| svg.append('g').attr({ | |
| 'class': 'x axis', | |
| 'transform': 'translate(0,' + height + ')' | |
| }) | |
| .call(xAxis); | |
| svg.append('g').attr({ | |
| 'class': 'y axis' | |
| }) | |
| .call(yAxis); | |
| svg.selectAll('circle') | |
| .data(data) | |
| .enter() | |
| .append('circle') | |
| .attr({ | |
| 'r': 5, | |
| 'fill': '#7E007F', | |
| 'cx': function(d, i) { | |
| return xScale(i + 1); | |
| }, | |
| 'cy': function(d) { | |
| return yScale(d); | |
| } | |
| }); | |
| invisibleRect = svg.append('rect') | |
| .attr({ | |
| 'x': -margin.left, | |
| 'y': 0, | |
| 'height': height, | |
| 'width': margin.left, | |
| 'fill': '#FFFFFF', | |
| 'opacity': 0.0, | |
| 'id': 'invisibleRect' | |
| }); | |
| invisibleRect.on('click', function() { | |
| try { | |
| hoverHelp.remove(); | |
| } | |
| catch (ReferenceError) { | |
| console.log("There's no hoverHelp right now."); | |
| } | |
| if (!log) { | |
| svg.select('.y.axis') | |
| .transition() | |
| .duration(transitionDuration) | |
| .call(logAxis); | |
| svg.selectAll('circle') | |
| .transition() | |
| .duration(transitionDuration) | |
| .attr({ | |
| 'cy': function(d) { | |
| return logScale(d); | |
| } | |
| }); | |
| log = true; | |
| } | |
| else { | |
| svg.select('.y.axis') | |
| .transition() | |
| .duration(transitionDuration) | |
| .call(yAxis); | |
| svg.selectAll('circle') | |
| .transition() | |
| .duration(transitionDuration) | |
| .attr({ | |
| 'cy': function(d) { | |
| return yScale(d); | |
| } | |
| }); | |
| log = false; | |
| } | |
| }); | |
| invisibleRect.on('mouseover', function() { | |
| var coords = d3.mouse(invisibleRect.node()); | |
| var hoverHelp = svg.append('g').attr('id', 'hoverHelp'); | |
| var x = coords[0]; | |
| var y = coords[1]; | |
| var triangleSize = 25; | |
| var rectWidth = 200; | |
| var rectHeight = 50; | |
| hoverHelp.append('polygon') | |
| .attr({ | |
| 'fill': '#3F0040', | |
| 'opacity': 0.5, | |
| 'points': x + ',' + y + ' ' + (x + triangleSize) + ',' + (y - triangleSize) + ' ' + (x + triangleSize + rectWidth) + ',' + (y - triangleSize) + ' ' + (x + triangleSize + rectWidth) + ',' + (y - triangleSize + rectHeight) + ' ' + (x + triangleSize) + ',' + (y - triangleSize + rectHeight) + ' ' + (x + triangleSize) + ',' + (y + triangleSize), | |
| 'stroke-width': 3, | |
| 'stroke': '#FD00FF', | |
| 'stroke-linecap': 'round' | |
| }); | |
| hoverHelp.append('text') | |
| .attr({ | |
| 'x': x + triangleSize + rectWidth/2, | |
| 'y': y - triangleSize + rectHeight/2, | |
| 'text-anchor': 'middle', | |
| 'dominant-baseline': 'central', | |
| 'fill': '#FFFFFF', | |
| 'text-weight': 'bold' | |
| }) | |
| .text('Click to toggle axis.'); | |
| }); | |
| invisibleRect.on('mouseout', function() { | |
| try { | |
| hoverHelp.remove(); | |
| } | |
| catch (ReferenceError) { | |
| console.log("There's no hoverHelp right now."); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment