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

    这里写图片描述

  • 相关阅读:
    jquery 删除cookie失效的解决方法
    SQL Server 抛出自定义异常,由C#程序俘获之并进行相应的处理
    SqlServer中的自增的ID的最后的值:
    Stream/Bytes[]/Image对象相互转化
    TextBox禁止复制粘贴和数字验证,小数验证,汉字验证
    扩展WPF的DataGrid按方向键移动焦点
    WPF 中获取DataGrid 模板列中控件的对像
    IIS设置文件 App_Offline.htm 网站维护
    IIS设置文件 Robots.txt 禁止爬虫
    js中的整除运算
  • 原文地址:https://www.cnblogs.com/caojunjie/p/8318885.html
Copyright © 2020-2023  润新知