hidden axis toggle

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8'>
        <title>
            UI Experiment: Hidden Axis Toggle
        </title>
        <script src='https://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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js