jebeck/index.html

## index.html
<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>