//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", 0.75);
        });






    }); //end of json

}); //end of csv