【歸檔】[D3] 地圖可視化——美國地圖

原創

2020-06-16 11:57

基於地圖信息，設計可視化方案，能夠將不同州的生產力高低，以及一些城市的人口多少表示在地圖上。該可視化方案，能爲用戶提供一個分析在那些生產力比較高（或比較低）的州和州里一些大城市的人口之間關係的工具。

<!DOCTYPE html>
<html>

<head>
    <title>D3js可視化——美國地圖</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="./js/d3.v3.min.js"></script>
    <script type="text/javascript" src="./js/d3-queue.min.js"></script>
</head>

<body>
    <script type="text/javascript">
    // 定義地圖的長寬
    var width = 960;
    var height = 500;
    // 定義地圖的容器和樣式
    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("style", "margin: 20px auto;display: block;")
        .append("g");
    // 投影函數
    // 這個投影函數將美國本土和阿拉斯加以及夏威夷融合在了一個地圖上
    // 它把阿拉斯加的面積縮小0.35倍，將夏威夷島放在了美國本土的下面
    var projection = d3.geo.albersUsa();
    // 設置地理路徑生成器
    // projection() 是設定生成器的投影函數，把上面定義的投影傳入即可。
    // 以後，當使用此生成器計算路徑時，會自己加入投影的影響。
    var path = d3.geo.path()
        .projection(projection);
    // 讀取數據，生成地圖
    d3.queue()
        .defer(d3.json, "./dist/us_states.json")
        .defer(d3.csv, "./dist/us_ag_productivity_2004.csv")
        .defer(d3.csv, "./dist/us_cities.csv")
        .await(ready);

    function ready(error, states, productivity, cities) {
        if (error) throw error;
        console.log(states);
        console.log(productivity);
        console.log(cities);
        // 根據生產力的不同，返回不同深度的顏色填充地圖塊
        var colors = ["#F1E3D6", "#E7C6B0", "#DCAC89", "#C99067", "#BE7542"],
            proMin = d3.min(productivity, function(d) { return d.value; }),
            proMax = d3.max(productivity, function(d) { return d.value; });
        var colorScale = d3.scale.quantile()
            .domain([proMin, colors.length - 1, proMax])
            .range(colors);
        var targetColor = function(target) {
            for (var i = productivity.length - 1; i >= 0; i--) {
                if (target == productivity[i].state) {
                    return colorScale(productivity[i].value);
                }
            }
            return "#F1E3D6";
        }
        // 添加地圖塊
        svg.selectAll("path")
            .data(states.features)
            .enter().append("path")
            // 添加地圖邊界
            .attr("stroke", "#000")
            .attr("stroke-width", 1)
            .attr("fill", function(d, i) {
                return targetColor(d.properties.name);
            })
            .attr("d", path)
            // 鼠標懸浮樣式
            .on("mouseover", function(d, i) {
                d3.select(this).attr("fill", "yellow");
            })
            .on("mouseout", function(d, i) {
                d3.select(this).attr("fill", targetColor(d.properties.name));
            })
            // 添加地圖名稱
            .append("title").text(function(d, i) {
                return d.properties.name;
            });
        // 添加人口信息
        var popMin = d3.min(cities, function(d) { return parseInt(d.population); }),
            popMax = d3.max(cities, function(d) { return parseInt(d.population); });
        // 設置比例
        var getR = d3.scale.linear()
            .domain([popMin, popMax])
            .range([4, 24]);
        var city = svg.selectAll("g")
            .data(cities).enter()
            .append("g")
            // 定位
            .attr("transform", function(d, i) {
                var po = projection([d.lon, d.lat]);
                return "translate(" + po[0] + ", " + po[1] + ")";
            });
        city.append("circle")
            .attr("r", function(d, i) {
                return getR(cities[i].population);
            })
            .attr("fill", "#00a1e9")
            // 添加透明度，使一些被覆蓋的點可以顯示出來
            .attr("opacity", "0.8")
            // 鼠標懸浮樣式
            .on("mouseover", function(d, i) {
                d3.select(this).attr("r", getR(d.population) * 2);
                d3.select(this).attr("fill", "red");
            })
            .on("mouseout", function(d, i) {
                d3.select(this).attr("r", getR(d.population));
                d3.select(this).attr("fill", "#00a1e9");
            })
            // 添加人口信息
            .append("title").text(function(d, i) {
                return d.place + "\nPopulations: " + d.population + "\nRank: " + d.rank;
            });

    }
    </script>
</body>

</html>

效果圖如下：