cpopolo/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Mercator projection</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<style type="text/css">


			body {
				background-color: gray;
			}
            h1 {
                font-family: "Droid Sans";
                font-size: 32px;
                text-align: center;
            }
            p {
                font-family: "Droid Sans";
                font-size: 14px;
                text-align: center;
            }

			svg {
				background-color: white;
			}

            .orange {
                fill: orange;
            }

            path {
                stroke-width: 1px;
                stroke: black;

            }
			#container {
                position: relative;
				width: 1000px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 50px;
				padding: 50px;
				background-color: white;
                border-radius: 20px 20px 0 0;
				box-shadow: 4px 4px 13px 6px #ccc;
			}


		</style>
	</head>
	<body style="background: #fff;">

  		<div id="container">
            <h1>An equal area projection, with some rotation and mouseover.</h1>
            <p>Centered over LAX, rotation [0,15]</p>

        </div>


		<script type="text/javascript">

            function changeColor() {
                console.log($(this).length);
                d3.select(this).transition().duration(300).attr("fill","red");
            };

            function resetColor() {
                d3.select(this).transition().duration(500).attr("fill","orange");
            };

        </script>

		<script type="text/javascript">


			//Width and height
			var w = 900;
			var h = 900;
            var pi = 3.14;

			//Define map projection
			var projection = d3.geo.conicEqualArea()
                .center([ -118, 34 ])
                .rotate([0,15])
                .translate([ w*2/5, h*2/4 ])
                .scale([ w*4/3 ])

                ;


			//Define path generator
			var path = d3.geo.path()
                .projection(projection)
                ;

			//Create SVG
			var svg = d3.select("#container")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

			//Load in GeoJSON data
//			d3.json("../data/countries/mapshaper_output_50simplified.json", function(json) {
			d3.json("ne_10m_admin_1_states_provinces-USA-CAN-MEX.json", function(json) {

				//Bind data and create one path per GeoJSON feature
				svg.selectAll("path")
                    .data(json.features)
                    .enter()
                    .append("path")
                    .attr("d", path)
                    //.attr("class","orange")
                    .attr("fill","orange")
                    .on("mouseover",changeColor)
                    .on("mouseout",resetColor)
                ;

			});


		</script>
	</body>
</html>

## ne_10m_admin_1_states_provinces-USA-CAN-MEX.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ne_10m_admin_1_states_provinces-USA-CAN-MEX.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Mercator projection</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<style type="text/css">



	body {
	background-color: gray;
	}
	h1 {
	font-family: "Droid Sans";
	font-size: 32px;
	text-align: center;
	}
	p {
	font-family: "Droid Sans";
	font-size: 14px;
	text-align: center;
	}

	svg {
	background-color: white;
	}

	.orange {
	fill: orange;
	}

	path {
	stroke-width: 1px;
	stroke: black;

	}
	#container {
	position: relative;
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	padding: 50px;
	background-color: white;
	border-radius: 20px 20px 0 0;
	box-shadow: 4px 4px 13px 6px #ccc;
	}


	</style>
	</head>
	<body style="background: #fff;">

	<div id="container">
	<h1>An equal area projection, with some rotation and mouseover.</h1>
	<p>Centered over LAX, rotation [0,15]</p>

	</div>


	<script type="text/javascript">

	function changeColor() {
	console.log($(this).length);
	d3.select(this).transition().duration(300).attr("fill","red");
	};

	function resetColor() {
	d3.select(this).transition().duration(500).attr("fill","orange");
	};

	</script>

	<script type="text/javascript">



	//Width and height
	var w = 900;
	var h = 900;
	var pi = 3.14;

	//Define map projection
	var projection = d3.geo.conicEqualArea()
	.center([ -118, 34 ])
	.rotate([0,15])
	.translate([ w2/5, h2/4 ])
	.scale([ w*4/3 ])

	;


	//Define path generator
	var path = d3.geo.path()
	.projection(projection)
	;

	//Create SVG
	var svg = d3.select("#container")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	//Load in GeoJSON data
	// d3.json("../data/countries/mapshaper_output_50simplified.json", function(json) {
	d3.json("ne_10m_admin_1_states_provinces-USA-CAN-MEX.json", function(json) {

	//Bind data and create one path per GeoJSON feature
	svg.selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("d", path)
	//.attr("class","orange")
	.attr("fill","orange")
	.on("mouseover",changeColor)
	.on("mouseout",resetColor)
	;

	});



	</script>
	</body>
	</html>
No results found