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.
      
    
## chihLatitudeLongitude.csv

          
            number
            name
            latitude
            longitude
            population

            
              1
              Chihuahua
              28.616667
              -106.066666
              819543

            
              2
              Cuauhtemoc
              28.4
              -106.86666
              154639

            
              3
              Delicias
              28.18333
              -105.466667
              137935

            
              4
              Juarez
              31.733334
              -106.433334
              1332131

## chihvalues.csv

          
            number
            name
            value

            
              1
              Ahumada
              1.244934621

            
              2
              Almada
              1.239067295

            
              3
              Allende
              1.208994682

            
              4
              Aquiles Serd�n
              1.503512212

            
              5
              Ascenci�n
              2.316241348

            
              6
              Bach�niva
              2.4433414

            
              7
              Balleza
              2.513943111

            
              8
              Batopilas
              2.859475686

            
              9
              Bocoyna
              3.693530133

            
              10
              Buenaventura
              3.557968157

            
              11
              Camargo
              3.886816282

            
              12
              Carichic
              3.639042652

            
              13
              Casas Grandes
              4.767533387

            
              14
              Coronado
              4.514153126

            
              15
              Coyame del Sotol
              4.88779719

            
              16
              La Cruz
              5.769025021

            
              17
              Cuauht�moc
              5.362639975

            
              18
              Cusihuiriachic
              5.952194873

            
              19
              Chihuahua
              6.132853901

            
              20
              Ch�nipas
              6.292191796

            
              21
              Delicias
              6.871115455

            
              22
              Dr. Belisario Dom�nguez
              6.654278945

            
              23
              Galeana
              6.943273233

            
              24
              Santa Isabel
              7.834410153

            
              25
              G�mez Farias
              8.315226609

            
              26
              Gran Morelos
              8.216186278

            
              27
              Guachochic
              8.611295539

            
              28
              Guadalupe
              8.769496813

            
              29
              Guadalupe y Calvo
              8.870938923

            
              30
              Guazapares
              9.797070773

            
              31
              Guerrero
              9.995127519

            
              32
              Hidalgo del Parral
              10.16440841

            
              33
              Huejotit�n
              9.969003982

            
              34
              Ignacio Zaragoza
              10.74051271

            
              35
              Janos
              11.43696679

            
              35
              Jim�nez
              11.30005214

            
              37
              Ju�rez
              11.70753643

            
              38
              Julimes
              11.83555489

            
              39
              L�pez
              12.54508309

            
              40
              Madera
              12.6460873

            
              41
              Maguarichic
              13.28682843

            
              42
              Manuel Benavides
              12.92148623

            
              43
              Matachic
              13.71668669

            
              44
              Matamoros
              13.2595597

            
              45
              Meoqui
              14.17326126

            
              46
              Morelos
              13.90589353

            
              47
              Moris
              14.22836772

            
              48
              Namiquipa
              14.56795232

            
              49
              Nonoava
              14.90014591

            
              50
              Nuevo Casas Grandes
              15.94693584

            
              51
              Ocampo
              15.34152283

            
              52
              Ojinaga
              15.94572073

            
              53
              Pr�xedis G. Guerrero
              16.69632797

            
              54
              Riva Palacio
              16.62153083

            
              55
              Rosales
              16.94439527

            
              56
              Rosario
              16.87504608

            
              57
              San Francisco de Borja
              17.99306009

            
              58
              San Francisco de Conchos
              17.43443316

            
              59
              San Francisco del Oro
              18.5952124

            
              60
              Santa B�rbara
              18.41458656

            
              61
              Satev�
              19.06513358

            
              62
              Saucillo
              19.41486889

            
              63
              Tem�sachic
              19.12955095

            
              64
              El Tule
              19.41003003

            
              65
              Urique
              19.68598405

            
              66
              Uruachic
              19.90791847

            
              67
              Valle de Zaragoza
              20.49020054

## index.html
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Howework 4 | 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>
          The colors of the counties don't mean anything in particular. The pink circles represent the population of the four counties with most inhabitants.
        </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);

var color = d3.scale.quantize()
    .range(["#f6eff7", "#bdc9e1", "#67a9cf", "#1c9099", "#016c59"]);

//Create SVG

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


d3.csv("chihvalues.csv", function (data) {

    color.domain([
					d3.min(data, function (d) {
            return +d["value"];
        }),
					d3.max(data, function (d) {
            return +d["value"];
        })
				]);
    //  console.log(data)

    d3.json("chih.json", function (json) {

        //Bind data and create one path per GeoJSON feature
        for (var i = 0; i < data.length; i++) {
            var dataValue = +data[i]["value"];

            json.geometries[i].newvalue = dataValue;

        }

        //     console.log(json.geometries)
        var counties = svg.selectAll("path")
            .data(json.geometries)
            .enter()
            .append("path")
            .attr("d", path)
            .style("fill", function (d, i) {

                //Get data value
                var value = d.newvalue;


                if (value) {
                    //If value exists…

                    return color(value);
                } else {
                    //If value is undefined…
                    return "#F10";
                }

            })
            .attr("stroke", "#040");

        d3.csv("chihLatitudeLongitude.csv", function (data2) {
            svg.selectAll("circle")
                .data(data2)
                .enter()
                .append("circle")
                .attr("cx", function (d) {
                    return projection([d.longitude, d.latitude])[0];
                })
                .attr("cy", function (d) {
                    return projection([d.longitude, d.latitude])[1];
                })
                .attr("r", function (d) {
                    //Use Math.sqrt to scale by area (not radius)
                    return Math.sqrt(+d.population / w * 0.1);
                })
                .style("fill", "#FF6c99")
                .style("opacity", .8)
                .on('mouseover', function (d) {
                    d3.select(this).style('fill-opacity', 1)
                    d3.select("#nameOfCity")
                        .text(d.name);
                })
                .on('mouseout', function (d) {
                    d3.select(this).style('fill-opacity', 0.8);
                });

            var cities = svg.append("g")
                .attr("transform", "translate(350,80)")
                .append("text")
                .attr("id", "nameOfCity");

        });


    }); //end of json

}); //end of csv
number	name	latitude	longitude	population
1	Chihuahua	28.616667	-106.066666	819543
2	Cuauhtemoc	28.4	-106.86666	154639
3	Delicias	28.18333	-105.466667	137935
4	Juarez	31.733334	-106.433334	1332131
number	name	value
1	Ahumada	1.244934621
2	Almada	1.239067295
3	Allende	1.208994682
4	Aquiles Serd�n	1.503512212
5	Ascenci�n	2.316241348
6	Bach�niva	2.4433414
7	Balleza	2.513943111
8	Batopilas	2.859475686
9	Bocoyna	3.693530133
10	Buenaventura	3.557968157
11	Camargo	3.886816282
12	Carichic	3.639042652
13	Casas Grandes	4.767533387
14	Coronado	4.514153126
15	Coyame del Sotol	4.88779719
16	La Cruz	5.769025021
17	Cuauht�moc	5.362639975
18	Cusihuiriachic	5.952194873
19	Chihuahua	6.132853901
20	Ch�nipas	6.292191796
21	Delicias	6.871115455
22	Dr. Belisario Dom�nguez	6.654278945
23	Galeana	6.943273233
24	Santa Isabel	7.834410153
25	G�mez Farias	8.315226609
26	Gran Morelos	8.216186278
27	Guachochic	8.611295539
28	Guadalupe	8.769496813
29	Guadalupe y Calvo	8.870938923
30	Guazapares	9.797070773
31	Guerrero	9.995127519
32	Hidalgo del Parral	10.16440841
33	Huejotit�n	9.969003982
34	Ignacio Zaragoza	10.74051271
35	Janos	11.43696679
35	Jim�nez	11.30005214
37	Ju�rez	11.70753643
38	Julimes	11.83555489
39	L�pez	12.54508309
40	Madera	12.6460873
41	Maguarichic	13.28682843
42	Manuel Benavides	12.92148623
43	Matachic	13.71668669
44	Matamoros	13.2595597
45	Meoqui	14.17326126
46	Morelos	13.90589353
47	Moris	14.22836772
48	Namiquipa	14.56795232
49	Nonoava	14.90014591
50	Nuevo Casas Grandes	15.94693584
51	Ocampo	15.34152283
52	Ojinaga	15.94572073
53	Pr�xedis G. Guerrero	16.69632797
54	Riva Palacio	16.62153083
55	Rosales	16.94439527
56	Rosario	16.87504608
57	San Francisco de Borja	17.99306009
58	San Francisco de Conchos	17.43443316
59	San Francisco del Oro	18.5952124
60	Santa B�rbara	18.41458656
61	Satev�	19.06513358
62	Saucillo	19.41486889
63	Tem�sachic	19.12955095
64	El Tule	19.41003003
65	Urique	19.68598405
66	Uruachic	19.90791847
67	Valle de Zaragoza	20.49020054
	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="utf-8" />
	<title>Howework 4 \| 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>
	The colors of the counties don't mean anything in particular. The pink circles represent the population of the four counties with most inhabitants.
	</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);

	var color = d3.scale.quantize()
	.range(["#f6eff7", "#bdc9e1", "#67a9cf", "#1c9099", "#016c59"]);

	//Create SVG

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


	d3.csv("chihvalues.csv", function (data) {

	color.domain([
	d3.min(data, function (d) {
	return +d["value"];
	}),
	d3.max(data, function (d) {
	return +d["value"];
	})
	]);
	// console.log(data)

	d3.json("chih.json", function (json) {

	//Bind data and create one path per GeoJSON feature
	for (var i = 0; i < data.length; i++) {
	var dataValue = +data[i]["value"];

	json.geometries[i].newvalue = dataValue;

	}

	// console.log(json.geometries)
	var counties = svg.selectAll("path")
	.data(json.geometries)
	.enter()
	.append("path")
	.attr("d", path)
	.style("fill", function (d, i) {

	//Get data value
	var value = d.newvalue;


	if (value) {
	//If value exists…

	return color(value);
	} else {
	//If value is undefined…
	return "#F10";
	}

	})
	.attr("stroke", "#040");

	d3.csv("chihLatitudeLongitude.csv", function (data2) {
	svg.selectAll("circle")
	.data(data2)
	.enter()
	.append("circle")
	.attr("cx", function (d) {
	return projection([d.longitude, d.latitude])[0];
	})
	.attr("cy", function (d) {
	return projection([d.longitude, d.latitude])[1];
	})
	.attr("r", function (d) {
	//Use Math.sqrt to scale by area (not radius)
	return Math.sqrt(+d.population / w * 0.1);
	})
	.style("fill", "#FF6c99")
	.style("opacity", .8)
	.on('mouseover', function (d) {
	d3.select(this).style('fill-opacity', 1)
	d3.select("#nameOfCity")
	.text(d.name);
	})
	.on('mouseout', function (d) {
	d3.select(this).style('fill-opacity', 0.8);
	});

	var cities = svg.append("g")
	.attr("transform", "translate(350,80)")
	.append("text")
	.attr("id", "nameOfCity");

	});






	}); //end of json

	}); //end of csv