VisDockHub/README.md

## README.md

      
    Raw
  

              README.md
            
          
    The VisDock toolkit has been integrated into this Raster & Vector Zoom example built with D3.js (found here) by Mike Bostock. Selection tools do not provide much functionality in this example. Annotations, Pan & Zoom tools and VisDock lenses can be used for exploration of the map. Especially, the BirdEye provides the overview of the map from a higher perspective. For more information about VisDock, cick on the link.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  margin: 0;
}

path {
  fill: none;
  stroke: red;
  stroke-linejoin: round;
  stroke-width: 1.5px;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.tile.v0.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>

<link href="http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.css" rel="stylesheet" type="text/css"/>
<script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.js"></script>
<script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/2D.js"></script>
<script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/IntersectionUtilities.js"></script>
<script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.utils.js"></script>
<script>

var width = 1200;
    height = 700;

VisDock.init("body", {width: 1200, height: 700});
var viewport = VisDock.getViewport();

var tile = d3.geo.tile()
    .size([width, height]);

var projection = d3.geo.mercator()
    .scale((1 << 12) / 2 / Math.PI)
    .translate([width / 2, height / 2]);

var center = projection([-100, 40]);

var path = d3.geo.path()
    .projection(projection);

var zoom = d3.behavior.zoom()
    .scale(projection.scale() * 2 * Math.PI)
    .scaleExtent([1 << 11, 1 << 14])
    .translate([width - center[0], height - center[1]])
    .on("zoom", zoomed);

var svg = viewport;

var raster = svg.append("g");

var vector = svg.append("path");

d3.csv("us-state-capitals.csv", type, function(error, capitals) {
  svg.call(zoom);
  vector.datum({type: "FeatureCollection", features: capitals});
  zoomed();
});

function type(d) {
  return {
    type: "Feature",
    properties: {
      name: d.description,
      state: d.name
    },
    geometry: {
      type: "Point",
      coordinates: [+d.longitude, +d.latitude]
    }
  };
}

function zoomed() {
  var tiles = tile
      .scale(zoom.scale())
      .translate(zoom.translate())
      ();

  projection
      .scale(zoom.scale() / 2 / Math.PI)
      .translate(zoom.translate());

  vector
      .attr("d", path);

  var image = raster
      .attr("transform", "scale(" + tiles.scale + ")translate(" + tiles.translate + ")")
    .selectAll("image")
      .data(tiles, function(d) { return d; });

  image.exit()
      .remove();

  image.enter().append("image")
      .attr("xlink:href", function(d) { return "http://" + ["a", "b", "c", "d"][Math.random() * 4 | 0] + ".tiles.mapbox.com/v3/examples.map-vyofok3q/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })
      .attr("width", 1)
      .attr("height", 1)
      .attr("x", function(d) { return d[0]; })
      .attr("y", function(d) { return d[1]; });

}
BirdView.init(viewport, 1200, 700)
d3.select(self.frameElement).style("width", "1200px");
d3.select(self.frameElement).style("height", "700px");
</script>

## us-state-capitals.csv

          
            name
            description
            latitude
            longitude

            
              Alabama
              Montgomery
              32.377716
              -86.300568

            
              Alaska
              Juneau
              58.301598
              -134.420212

            
              Arizona
              Phoenix
              33.448143
              -112.096962

            
              Arkansas
              Little Rock
              34.746613
              -92.288986

            
              California
              Sacramento
              38.576668
              -121.493629

            
              Colorado
              Denver
              39.739227
              -104.984856

            
              Connecticut
              Hartford<br>
              41.764046
              -72.682198

            
              Delaware
              Dover
              39.157307
              -75.519722

            
              Hawaii
              Honolulu
              21.307442
              -157.857376

            
              Florida
              Tallahassee
              30.438118
              -84.281296

            
              Georgia
              Atlanta<br>
              33.749027
              -84.388229

            
              Idaho
              Boise
              43.617775
              -116.199722

            
              Illinois
              Springfield
              39.798363
              -89.654961

            
              Indiana
              Indianapolis
              39.768623
              -86.162643

            
              Iowa
              Des Moines
              41.591087
              -93.603729

            
              Kansas
              Topeka
              39.048191
              -95.677956

            
              Kentucky
              Frankfort
              38.186722
              -84.875374

            
              Louisiana
              Baton Rouge
              30.457069
              -91.187393

            
              Maine
              Augusta
              44.307167
              -69.781693

            
              Maryland
              Annapolis
              38.978764
              -76.490936

            
              Massachusetts
              Boston
              42.358162
              -71.063698

            
              Michigan
              Lansing
              42.733635
              -84.555328

            
              Minnesota
              St. Paul
              44.955097
              -93.102211

            
              Mississippi
              Jackson
              32.303848
              -90.182106

            
              Missouri
              Jefferson City
              38.579201
              -92.172935

            
              Montana
              Helena
              46.585709
              -112.018417

            
              Nebraska
              Lincoln
              40.808075
              -96.699654

            
              Nevada
              Carson City
              39.163914
              -119.766121

            
              New Hampshire
              Concord
              43.206898
              -71.537994

            
              New Jersey
              Trenton
              40.220596
              -74.769913

            
              New Mexico
              Santa Fe
              35.68224
              -105.939728

            
              North Carolina
              Raleigh
              35.78043
              -78.639099

            
              North Dakota
              Bismarck
              46.82085
              -100.783318

            
              New York
              Albany
              42.652843
              -73.757874

            
              Ohio
              Columbus
              39.961346
              -82.999069

            
              Oklahoma
              Oklahoma City
              35.492207
              -97.503342

            
              Oregon
              Salem
              44.938461
              -123.030403

            
              Pennsylvania
              Harrisburg
              40.264378
              -76.883598

            
              Rhode Island
              Providence
              41.830914
              -71.414963

            
              South Carolina
              Columbia
              34.000343
              -81.033211

            
              South Dakota
              Pierre
              44.367031
              -100.346405

            
              Tennessee
              Nashville
              36.16581
              -86.784241

            
              Texas
              Austin
              30.27467
              -97.740349

            
              Utah
              Salt Lake City
              40.777477
              -111.888237

            
              Vermont
              Montpelier
              44.262436
              -72.580536

            
              Virginia
              Richmond
              37.538857
              -77.43364

            
              Washington
              Olympia
              47.035805
              -122.905014

            
              West Virginia
              Charleston
              38.336246
              -81.612328

            
              Wisconsin
              Madison
              43.074684
              -89.384445

            
              Wyoming
              Cheyenne
              41.140259
              -104.820236
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	margin: 0;
	}

	path {
	fill: none;
	stroke: red;
	stroke-linejoin: round;
	stroke-width: 1.5px;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/d3.geo.tile.v0.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>

	<link href="http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.css" rel="stylesheet" type="text/css"/>
	<script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.js"></script>
	<script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/2D.js"></script>
	<script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/IntersectionUtilities.js"></script>
	<script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.utils.js"></script>
	<script>

	var width = 1200;
	height = 700;

	VisDock.init("body", {width: 1200, height: 700});
	var viewport = VisDock.getViewport();

	var tile = d3.geo.tile()
	.size([width, height]);

	var projection = d3.geo.mercator()
	.scale((1 << 12) / 2 / Math.PI)
	.translate([width / 2, height / 2]);

	var center = projection([-100, 40]);

	var path = d3.geo.path()
	.projection(projection);

	var zoom = d3.behavior.zoom()
	.scale(projection.scale() * 2 * Math.PI)
	.scaleExtent([1 << 11, 1 << 14])
	.translate([width - center[0], height - center[1]])
	.on("zoom", zoomed);

	var svg = viewport;

	var raster = svg.append("g");

	var vector = svg.append("path");

	d3.csv("us-state-capitals.csv", type, function(error, capitals) {
	svg.call(zoom);
	vector.datum({type: "FeatureCollection", features: capitals});
	zoomed();
	});

	function type(d) {
	return {
	type: "Feature",
	properties: {
	name: d.description,
	state: d.name
	},
	geometry: {
	type: "Point",
	coordinates: [+d.longitude, +d.latitude]
	}
	};
	}

	function zoomed() {
	var tiles = tile
	.scale(zoom.scale())
	.translate(zoom.translate())
	();

	projection
	.scale(zoom.scale() / 2 / Math.PI)
	.translate(zoom.translate());

	vector
	.attr("d", path);

	var image = raster
	.attr("transform", "scale(" + tiles.scale + ")translate(" + tiles.translate + ")")
	.selectAll("image")
	.data(tiles, function(d) { return d; });

	image.exit()
	.remove();

	image.enter().append("image")
	.attr("xlink:href", function(d) { return "http://" + ["a", "b", "c", "d"][Math.random() * 4 \| 0] + ".tiles.mapbox.com/v3/examples.map-vyofok3q/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })
	.attr("width", 1)
	.attr("height", 1)
	.attr("x", function(d) { return d[0]; })
	.attr("y", function(d) { return d[1]; });

	}
	BirdView.init(viewport, 1200, 700)
	d3.select(self.frameElement).style("width", "1200px");
	d3.select(self.frameElement).style("height", "700px");
	</script>
name	description	latitude	longitude
Alabama	Montgomery	32.377716	-86.300568
Alaska	Juneau	58.301598	-134.420212
Arizona	Phoenix	33.448143	-112.096962
Arkansas	Little Rock	34.746613	-92.288986
California	Sacramento	38.576668	-121.493629
Colorado	Denver	39.739227	-104.984856
Connecticut	Hartford<br>	41.764046	-72.682198
Delaware	Dover	39.157307	-75.519722
Hawaii	Honolulu	21.307442	-157.857376
Florida	Tallahassee	30.438118	-84.281296
Georgia	Atlanta<br>	33.749027	-84.388229
Idaho	Boise	43.617775	-116.199722
Illinois	Springfield	39.798363	-89.654961
Indiana	Indianapolis	39.768623	-86.162643
Iowa	Des Moines	41.591087	-93.603729
Kansas	Topeka	39.048191	-95.677956
Kentucky	Frankfort	38.186722	-84.875374
Louisiana	Baton Rouge	30.457069	-91.187393
Maine	Augusta	44.307167	-69.781693
Maryland	Annapolis	38.978764	-76.490936
Massachusetts	Boston	42.358162	-71.063698
Michigan	Lansing	42.733635	-84.555328
Minnesota	St. Paul	44.955097	-93.102211
Mississippi	Jackson	32.303848	-90.182106
Missouri	Jefferson City	38.579201	-92.172935
Montana	Helena	46.585709	-112.018417
Nebraska	Lincoln	40.808075	-96.699654
Nevada	Carson City	39.163914	-119.766121
New Hampshire	Concord	43.206898	-71.537994
New Jersey	Trenton	40.220596	-74.769913
New Mexico	Santa Fe	35.68224	-105.939728
North Carolina	Raleigh	35.78043	-78.639099
North Dakota	Bismarck	46.82085	-100.783318
New York	Albany	42.652843	-73.757874
Ohio	Columbus	39.961346	-82.999069
Oklahoma	Oklahoma City	35.492207	-97.503342
Oregon	Salem	44.938461	-123.030403
Pennsylvania	Harrisburg	40.264378	-76.883598
Rhode Island	Providence	41.830914	-71.414963
South Carolina	Columbia	34.000343	-81.033211
South Dakota	Pierre	44.367031	-100.346405
Tennessee	Nashville	36.16581	-86.784241
Texas	Austin	30.27467	-97.740349
Utah	Salt Lake City	40.777477	-111.888237
Vermont	Montpelier	44.262436	-72.580536
Virginia	Richmond	37.538857	-77.43364
Washington	Olympia	47.035805	-122.905014
West Virginia	Charleston	38.336246	-81.612328
Wisconsin	Madison	43.074684	-89.384445
Wyoming	Cheyenne	41.140259	-104.820236