Davo Galavotti davo

This example is a simple loupe using Polymaps. Drag the center of the loupe to move it around, or drag the thick border to resize it. Loupes are normally used to magnify, showing focus and context, but in this example we're using it to show two different tilesets. You can enable magnification (or minification) using the zoomDelta property.

See discussion on Hacker News. Built with D3 and TopoJSON.

[ Launch Inlet ]Gist #4505683 An inlet to tributary

Example

This diagram shows the distribution of age groups in the United States over the last 150 years. Use the arrow keys to observe the changing population. Data from the Minnesota Population Center. Use the arrow keys to change the displayed year. The blue bars are the male population for each five-year age bracket, while the pink bars are the female population; the bars are partially transparent so that you can see how they overlap, unlike the traditional side-by-side display which makes it difficult to compare the relative distribution of the sexes.

The Issue

I'm trying to build a map that can be zoomed using the mouse wheel and panned with drag. For that I'm using d3.behavior.zoom() and it works fine for the map. However, I also need to mark some points in the map (which are included in the same topojson used to draw the map). They get rendered just fine, but I'm having trouble handling the zoom behaviour with these points. If you try to zoom or pan, the points get translated abruptly and even seem to change their path!

Any ideas?

[ Launch: zoomable map ] 5099090 by davo[ Launch: zoomable map ] 5095947 by enjalot

	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Polar Clock</title>
	<style>

	#clock {
	position: relative;
	background: #222;
	width: 960px;
	height: 500px;

	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Mercator Projection</title>
	<style>

	path {
	fill: #ccc;
	stroke: #fff;
	}

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Easy earthquakes</title>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
	<style type="text/css">

	body{