Zoom + Pan

by superboggly

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<html>
  <body>
    <svg/>
  </body>
</html>

CSS

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #606043;
        color:#fefdf5;
    text-shadow: none;
}

::selection {
    background: #606043;
	color:#fefdf5;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body {
	background:#fefdf5;
	font-family:'Trade Gothic Next W01',sans-serif;
	color:#333;
}
.wrapper {
	width:960px;
	margin:30px auto;
}
	h1 {
		color:#606043;
		font-size:65px;
		margin:0;
		font-family:'TradeGothicNextW01-BdCm';
	}
	header p {
		margin:0 0 20px;
	}
	#select {
		height:50px;
		position:relative;
		z-index:2;
	}
	#navToggle {
		border-top:1px solid #d6d5c8;
		border-bottom:1px solid #d6d5c8;
		padding:4px...

JavaScript

var data = [{"OccupationTitle":"Postal Service Mail Sorters, Processors, and Processing Machine Operators","Category":"Office and Administrative Support Occupations","TotalEmployed2011":"139700","MedianSalary2011":"53080","ProjectedGrowth2020":"-48.5"},{"OccupationTitle":"Postal Service Clerks","Category":"Office and Administrative Support Occupations","TotalEmployed2011":"65040","MedianSalary2011":"53100","ProjectedGrowth2020":"-48.2"},{"OccupationTitle":"Postmasters and Mail Superintendents","Category":"Management Occupations","TotalEmployed2011":"24410","MedianSalary2011":"62920","ProjectedGrowth2020":"-27.8"},{"OccupationTitle":"Petroleum Pump System Operators, Refinery Operators, and Gaugers","Category":"Production Occupations","TotalEmployed2011":"41570","MedianSalary2011":"61260","ProjectedGrowth2020":"-14"},{"OccupationTitle":"Chemical Plant and System Operators","Category":"Production Occupations","TotalEmployed2011":"40580","MedianSalary2011":"55940","ProjectedGrowth2020":"-12.2"},{"OccupationTitle":"Postal Service Mail Carriers","Category":"Office and Administrative Support Occupations","TotalEmployed2011":"315330","MedianSalary2011":"55160","ProjectedGrowth2020":"-12"},{"OccupationTitle":"Insurance Appraisers, Auto Damage","Category":"Business and Financial Operations Occupations","TotalEmployed2011":"67550","MedianSalary2011":"51040","ProjectedGrowth2020":"45.7"},{"OccupationTitle":"Biomedical Engineers","Category":"Architecture and Engineering Occupations","TotalEmployed2011":"16590","MedianSalary2011":"84670","ProjectedGrowth2020":"61.7"}]

		var margin = {top: 30, right: 10, bottom: 20, left: 60},
			width = 960 - margin.left - margin.right,
			height = 500 - margin.top - margin.bottom;
		
		var xMax = d3.max(data, function(d) { return +d.TotalEmployed2011; }),
			xMin = 0,
			yMax = d3.max(data, function(d) { return +d.MedianSalary2011; }),
			yMin = 0;
		
		//Define scales
		var x = d3.scale.linear()
			.domain([xMin, xMax])
			.range([0,...