octaviomtz/chih.json

## chih.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              chih.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.
      
    
## index.html
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Howework 3 | Octavio</title>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>


    <script src="script1.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            background-color: #bbccbb;
            font-family: Helvetica, Arial, sans-serif;
        }

        #container {
            width: 600px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 50px;
            padding: 50px;
            background-color: #ffffff;
            box-shadow: 3px 3px 5px 6px #000;
        }

        #title {
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        #someText {
            width: 800px;
            margin-left: auto;
            margin-right: auto;
            font-family: Helvetica, Arial, sans-serif;
        }
        path:hover {
                fill: #0d3;
            }

    </style>
</head>

<body>


    <h1 id="title">Counties of Chihuahua (south of Texas) </h1>

    <div id="container"></div>
    <div id="someText">
        <p>The .shp file was obtained from <a href="http://www.numeroslocos.com/2013/07/10/shapefile/">here</a> and converted in mapshaper.org <br>
            I used the same technique as David Mendoza to color each county
        </p>
    </div>


    <script src="script1.js"></script>


</body>

</html>

## script1.js
//Width and height
var w = 500;
var h = 500;

//Define map projection
var projection = d3.geo.equirectangular()
    .center([-102,24])
    .translate([w, h])
    .scale([w * 7]);

//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("chih.json", function (json) {

    //Bind data and create one path per GeoJSON feature


    var counties = svg.selectAll("path")
        .data(json.geometries)
        .enter()
        .append("path")
        .attr("d", path)
        .datum("green")
    .attr("fill","#348712")
    .attr("stroke","#040");


     counties.on("mouseover", function() {
                    d3.select(this)
                        .classed("hover", true)
                });

                counties.on("mouseout", function() {
                    d3.select(this)
                        .classed("hover", false)
                });


});
	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="utf-8" />
	<title>Howework 3 \| Octavio</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>


	<script src="script1.js"></script>
	<style type="text/css">
	body {
	margin: 0;
	background-color: #bbccbb;
	font-family: Helvetica, Arial, sans-serif;
	}

	#container {
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	padding: 50px;
	background-color: #ffffff;
	box-shadow: 3px 3px 5px 6px #000;
	}

	#title {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	}

	#someText {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	font-family: Helvetica, Arial, sans-serif;
	}
	path:hover {
	fill: #0d3;
	}

	</style>
	</head>

	<body>



	<h1 id="title">Counties of Chihuahua (south of Texas) </h1>

	<div id="container"></div>
	<div id="someText">
	<p>The .shp file was obtained from <a href="http://www.numeroslocos.com/2013/07/10/shapefile/">here</a> and converted in mapshaper.org <br>
	I used the same technique as David Mendoza to color each county
	</p>
	</div>


	<script src="script1.js"></script>



	</body>

	</html>
	//Width and height
	var w = 500;
	var h = 500;

	//Define map projection
	var projection = d3.geo.equirectangular()
	.center([-102,24])
	.translate([w, h])
	.scale([w * 7]);

	//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("chih.json", function (json) {

	//Bind data and create one path per GeoJSON feature



	var counties = svg.selectAll("path")
	.data(json.geometries)
	.enter()
	.append("path")
	.attr("d", path)
	.datum("green")
	.attr("fill","#348712")
	.attr("stroke","#040");


	counties.on("mouseover", function() {
	d3.select(this)
	.classed("hover", true)
	});

	counties.on("mouseout", function() {
	d3.select(this)
	.classed("hover", false)
	});



	});