地理路径生成器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>