地理路徑生成器d3.deo.path()

這篇文章是《數據可視化實戰》中的作者例子，我只不過是想重溫下地理路徑生成器的使用思路。
地理路徑的格式有兩種，geojson，topojson，topojson是d3作者mike自創的一種格式，並沒有成爲一種標準，這個例子是書中例子，格式是geojson形式的。

1.數據格式

數組中每個字典都代表了一個州的邊界數據，

2.我們先看下代碼

        <script type="text/javascript">


            var w = 500;
            var h = 300;
//地理數據的格式是三維的，我們爲了在二維平面上顯示，所以需要有一個轉換方式，將三維映射到二維screen上，這就是投影方式
            //定義投影方式
            var projection = d3.geo.albersUsa()
                                   .translate([w/2, h/2])
                                   .scale([500]);

            //定義 geo  generator，將投影方式作爲路徑生成器對象的屬性
            var path = d3.geo.path()
                             .projection(projection);

            //svg畫布
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            //load data
            d3.json("us-states.json", function(json) {

                //bind the data
                svg.selectAll("path")
                   .data(json.features)
                   .enter()
                   .append("path")
                   .attr("d", path)
                   .style("fill", "steelblue");

            });

        </script>

3.改進版

解釋下，下邊代碼，在上邊的代碼中我們所有的顏色頭填充爲了steelblue，爲了有所區分，作者又採用了每個州的生產力數據，通過地理位置的比較，將州生產力作爲原來數據propoties下的value字段，將這個數字作爲顏色映射輸入，然後輸出不同的顏色
黃色circle的大小，是州人口作爲標準，是加載的另一個數據。

<script type="text/javascript">

            //Width and height
            var w = 500;
            var h = 300;

            //Define map projection
            var projection = d3.geo.albersUsa()
                                   .translate([w/2, h/2])
                                   .scale([500]);

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

            //Define quantize scale to sort data values into buckets of color
            //這是一個量化比例尺，將連續的定義域或者離散的定義域，輸出位離散的值，相當於分類。
            var color = d3.scale.quantize()
                                .range(["rgb(237,248,233)","rgb(186,228,179)","rgb(116,196,118)","rgb(49,163,84)","rgb(0,109,44)"]);
                                //Colors taken from colorbrewer.js, included in the D3 download

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

            //Load in agriculture data
            d3.csv("us-ag-productivity-2004.csv", function(data) {

                //Set input domain for color scale
                color.domain([
                    d3.min(data, function(d) { return d.value; }), 
                    d3.max(data, function(d) { return d.value; })
                ]);

                //Load in GeoJSON data
                d3.json("us-states.json", function(json) {

                    //Merge the ag. data and GeoJSON
                    //Loop through once for each ag. data value
                    for (var i = 0; i < data.length; i++) {

                        var dataState = data[i].state;              //Grab state name
                        var dataValue = parseFloat(data[i].value);  //Grab data value, and convert from string to float

                        //Find the corresponding state inside the GeoJSON
                        for (var j = 0; j < json.features.length; j++) {

                            var jsonState = json.features[j].properties.name;

                            if (dataState == jsonState) {

                                //Copy the data value into the JSON
                                json.features[j].properties.value = dataValue;

                                //Stop looking through the JSON
                                break;

                            }
                        }       
                    }

                    //Bind data and create one path per GeoJSON feature
                    svg.selectAll("path")
                       .data(json.features)
                       .enter()
                       .append("path")
                       .attr("d", path)
                       .style("fill", function(d) {
                            //Get data value
                            var value = d.properties.value;

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

                    //Load in cities data
                    d3.csv("us-cities.csv", function(data) {

                        svg.selectAll("circle")
                           .data(data)
                           .enter()
                           .append("circle")
                           .attr("cx", function(d) {
                               return projection([d.lon, d.lat])[0];
                           })
                           .attr("cy", function(d) {
                               return projection([d.lon, d.lat])[1];
                           })
                           .attr("r", function(d) {
                                return Math.sqrt(parseInt(d.population) * 0.00004);
                           })
                           .style("fill", "yellow")
                           .style("opacity", 0.75);

                    });


                });

            });

        </script>