wboykinm/README.md

## README.md

      
    Raw
  

              README.md
            
          
    An attempt to show Vermont at the center of the projected map, but with maximum visibility and minimal distortion on other landforms. Note that this was only accomplished by clipping Australia out of the periphery, since it's hella-area-distorted in this arrangement. Based on the fine projection work of Mike Bostock and Jason Davies

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

body {
  background: #fcfcfa;
}

.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}

.fill {
  fill: #6DB4D2;
}

.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}

.land {
  fill: #259056;
}

.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}

div.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  padding: 3px;
  font: 12px sans-serif;
  background: #333;
  color:#e2e3e3;
  border: 1px solid #97EEBF;
  border-radius: 0px;
  pointer-events: none;
}

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

var width = 960,
    height = 960;

var projection = d3.geo.azimuthalEquidistant()
    .scale(190)
    .translate([width / 2, height / 2])
    .clipAngle(135 - 1e-3)
    .precision(.1)
    .rotate([74 + 45 / 60, -52 - 50 / 60]);

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

var graticule = d3.geo.graticule();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("defs").append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);

svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");

svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");

svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

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

var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

d3.xhr("https://api.github.com/repos/wboykinm/geosprocket-geodata/contents/world-50m.json", "application/vnd.github.v3.raw+json", function(error, data) {
  world = JSON.parse(data.response);

  // load and display the cities
  d3.csv("vt.csv", function(error, data) {


    g.selectAll("circle")
       .data(data)
       .enter()
       .append("circle")
       .attr("cx", function(d) {
               return projection([d.lon, d.lat])[0];
       })
       .attr("cy", function(d) {
               return projection([d.lon, d.lat])[1];
       })
       .attr("r", 10)
       .attr('opacity', 0.7)
       .attr('stroke', '#ffffff')
       .attr('stroke-width', 1)
       .style("fill", "#97eebf")
       .on("mouseover", function(d) {
            div.transition()
                .duration(200)
                .style("opacity", 1);
            div .html(d.city)
                .style("left", (d3.event.pageX) + "px")
                .style("top", (d3.event.pageY - 28) + "px");
            g   .style('opacity', 1);
            })
        .on("mouseout", function(d) {
            div.transition()
                .duration(500)
                .style("opacity", 0);
            g   .style('opacity', 0.7);
        });
  });

  svg.insert("path", ".graticule")
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path);

  svg.insert("path", ".graticule")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("d", path);
});

d3.select(self.frameElement).style("height", height + "px");

</script>

## vt.csv

          
            code
            city
            country
            lat
            lon

            
              vt
              vermont
              usa
              44
              -72.5
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	background: #fcfcfa;
	}

	.stroke {
	fill: none;
	stroke: #000;
	stroke-width: 3px;
	}

	.fill {
	fill: #6DB4D2;
	}

	.graticule {
	fill: none;
	stroke: #777;
	stroke-width: .5px;
	stroke-opacity: .5;
	}

	.land {
	fill: #259056;
	}

	.boundary {
	fill: none;
	stroke: #fff;
	stroke-width: .5px;
	}

	div.tooltip {
	position: absolute;
	text-align: center;
	width: 60px;
	padding: 3px;
	font: 12px sans-serif;
	background: #333;
	color:#e2e3e3;
	border: 1px solid #97EEBF;
	border-radius: 0px;
	pointer-events: none;
	}

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

	var width = 960,
	height = 960;

	var projection = d3.geo.azimuthalEquidistant()
	.scale(190)
	.translate([width / 2, height / 2])
	.clipAngle(135 - 1e-3)
	.precision(.1)
	.rotate([74 + 45 / 60, -52 - 50 / 60]);

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

	var graticule = d3.geo.graticule();

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	svg.append("defs").append("path")
	.datum({type: "Sphere"})
	.attr("id", "sphere")
	.attr("d", path);

	svg.append("use")
	.attr("class", "stroke")
	.attr("xlink:href", "#sphere");

	svg.append("use")
	.attr("class", "fill")
	.attr("xlink:href", "#sphere");

	svg.append("path")
	.datum(graticule)
	.attr("class", "graticule")
	.attr("d", path);

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

	var div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	d3.xhr("https://api.github.com/repos/wboykinm/geosprocket-geodata/contents/world-50m.json", "application/vnd.github.v3.raw+json", function(error, data) {
	world = JSON.parse(data.response);

	// load and display the cities
	d3.csv("vt.csv", function(error, data) {


	g.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.attr("cx", function(d) {
	return projection([d.lon, d.lat])[0];
	})
	.attr("cy", function(d) {
	return projection([d.lon, d.lat])[1];
	})
	.attr("r", 10)
	.attr('opacity', 0.7)
	.attr('stroke', '#ffffff')
	.attr('stroke-width', 1)
	.style("fill", "#97eebf")
	.on("mouseover", function(d) {
	div.transition()
	.duration(200)
	.style("opacity", 1);
	div .html(d.city)
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY - 28) + "px");
	g .style('opacity', 1);
	})
	.on("mouseout", function(d) {
	div.transition()
	.duration(500)
	.style("opacity", 0);
	g .style('opacity', 0.7);
	});
	});

	svg.insert("path", ".graticule")
	.datum(topojson.feature(world, world.objects.land))
	.attr("class", "land")
	.attr("d", path);

	svg.insert("path", ".graticule")
	.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
	.attr("class", "boundary")
	.attr("d", path);
	});

	d3.select(self.frameElement).style("height", height + "px");

	</script>