michaelcolenso · December 12, 2015 12:38
diff --git a/dod_sites.json b/dod_sites.json
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Military Installations, Ranges, and Training Areas in the US</title>
        <meta name="description" content="a visual representation of military installations in in the US. built using D3.js">
    
        <style>
       
          rect {
            fill: none;
            pointer-events: all;
          }
          path {
            fill:red;
            stroke: black;
            stroke-width: .33px;
            stroke-linejoin: round;
          }
          #map {
            position: absolute;
            right: 30%;
            top: 10%;
          }
          .active {
            stroke: blue;
            fill: green;
          }
          .mesh {
            stroke-linejoin: round;
          }
          .page-header {
            margin: -20px 0 0 30px;
          }
      </style>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script src="http://d3js.org/queue.v1.min.js"></script>
        <script src="http://d3js.org/topojson.v0.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
        <![endif]-->

        
          <div class="span4">
            <div class="base-list"></div>
          </div>

          <div id="map" class="span8">
            <div class="page-header"><h1>Military Installations, Ranges, and Training Areas in the US</h1></div>
          </div>
     


        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="scripts/vendor/jquery.min.js"><\/script>')</script>
        <script src="scripts/vendor/chosen.jquery.min.js"></script>

         <!--Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            var _gaq=[['_setAccount','UA-38249760-1'],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>
    
    <!-- build:js scripts/amd-app.js -->
    <script data-main="scripts/main" src="scripts/vendor/require.js"></script>
    <!-- endbuild -->

    <script>
        var width = 960,
            height = 500,
            active;

        var projection = d3.geo.albersUsa();

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

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

        svg.append("rect")
            .attr("width", width)
            .attr("height", height)
            .on("click", reset);

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


        d3.json("/d/4090846/us.json", function(error, us) {
          svg.append("path")
              .datum(topojson.object(us, us.objects.land))
              .attr("class", "land")
              .attr("d", path);
            })

        var base = d3.json("/d/4773152/dod_sites.json", function(error, army) {
            g.selectAll("path")
                .data(topojson.object(army, army.objects.fortress).geometries)
              .enter().append("path")
                .attr("d", path)
                .attr("class", "fortress")
                .attr("id", function (d){ return d.id; })
                .append("text", function(d){ return d.id });

        var baselist = d3.select(".base-list");

          baselist.selectAll("div")
            .data(topojson.object(army, army.objects.fortress).geometries)
            .enter().append("h4").text(function(d){ return d.id })
            .html( function(d){ return d.id; })
            .on("click", click)

            });


          function hover(d) {

            <!--if (active === d) return reset();-->

            var center = path.centroid(d);
            g.transition().duration(250)
            .attr("transform", function(d) {

                var centroid = path.centroid(d),
                  x = centroid[0],
                  y = centroid[1];
                  return "translate(" + x + "," + y + ")"
                  + "scale(" +  2  + ")"
                  + "translate(" + -x + "," + -y + ")";
                })
            }

        function click(d) {

          if (active === d) return reset();

          g.selectAll(".active").classed("active", false);
          d3.select(this).classed("active", active = d);

          var b = path.bounds(d);
          g.transition().duration(750).attr("transform",
              "translate(" + projection.translate() + ")"
              + "scale(" + .1 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height) + ")"
              + "translate(" + -(b[1][0] + b[0][0]) / 2 + "," + -(b[1][1] + b[0][1]) / 2 + ")");
        }

        function reset() {
          g.selectAll(".active").classed("active", active = false);
          g.transition().duration(750).attr("transform", "");
        }
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
	<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
	<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Military Installations, Ranges, and Training Areas in the US</title>
	<meta name="description" content="a visual representation of military installations in in the US. built using D3.js">

	<style>

	rect {
	fill: none;
	pointer-events: all;
	}
	path {
	fill:red;
	stroke: black;
	stroke-width: .33px;
	stroke-linejoin: round;
	}
	#map {
	position: absolute;
	right: 30%;
	top: 10%;
	}
	.active {
	stroke: blue;
	fill: green;
	}
	.mesh {
	stroke-linejoin: round;
	}
	.page-header {
	margin: -20px 0 0 30px;
	}
	</style>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/queue.v1.min.js"></script>
	<script src="http://d3js.org/topojson.v0.min.js"></script>
	</head>
	<body>
	<!--[if lt IE 7]>
	<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
	<![endif]-->


	<div class="span4">
	<div class="base-list"></div>
	</div>

	<div id="map" class="span8">
	<div class="page-header"><h1>Military Installations, Ranges, and Training Areas in the US</h1></div>
	</div>



	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<script>window.jQuery \|\| document.write('<script src="scripts/vendor/jquery.min.js"><\/script>')</script>
	<script src="scripts/vendor/chosen.jquery.min.js"></script>

	<!--Google Analytics: change UA-XXXXX-X to be your site's ID. -->
	<script>
	var _gaq=[['_setAccount','UA-38249760-1'],['_trackPageview']];
	(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
	g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
	s.parentNode.insertBefore(g,s)}(document,'script'));
	</script>

	<!-- build:js scripts/amd-app.js -->
	<script data-main="scripts/main" src="scripts/vendor/require.js"></script>
	<!-- endbuild -->

	<script>
	var width = 960,
	height = 500,
	active;

	var projection = d3.geo.albersUsa();

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

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

	svg.append("rect")
	.attr("width", width)
	.attr("height", height)
	.on("click", reset);

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


	d3.json("/d/4090846/us.json", function(error, us) {
	svg.append("path")
	.datum(topojson.object(us, us.objects.land))
	.attr("class", "land")
	.attr("d", path);
	})

	var base = d3.json("/d/4773152/dod_sites.json", function(error, army) {
	g.selectAll("path")
	.data(topojson.object(army, army.objects.fortress).geometries)
	.enter().append("path")
	.attr("d", path)
	.attr("class", "fortress")
	.attr("id", function (d){ return d.id; })
	.append("text", function(d){ return d.id });

	var baselist = d3.select(".base-list");

	baselist.selectAll("div")
	.data(topojson.object(army, army.objects.fortress).geometries)
	.enter().append("h4").text(function(d){ return d.id })
	.html( function(d){ return d.id; })
	.on("click", click)

	});


	function hover(d) {

	<!--if (active === d) return reset();-->

	var center = path.centroid(d);
	g.transition().duration(250)
	.attr("transform", function(d) {

	var centroid = path.centroid(d),
	x = centroid[0],
	y = centroid[1];
	return "translate(" + x + "," + y + ")"
	+ "scale(" + 2 + ")"
	+ "translate(" + -x + "," + -y + ")";
	})
	}

	function click(d) {

	if (active === d) return reset();

	g.selectAll(".active").classed("active", false);
	d3.select(this).classed("active", active = d);

	var b = path.bounds(d);
	g.transition().duration(750).attr("transform",
	"translate(" + projection.translate() + ")"
	+ "scale(" + .1 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height) + ")"
	+ "translate(" + -(b[1][0] + b[0][0]) / 2 + "," + -(b[1][1] + b[0][1]) / 2 + ")");
	}

	function reset() {
	g.selectAll(".active").classed("active", active = false);
	g.transition().duration(750).attr("transform", "");
	}
	</script>
	</body>
	</html>
No results found