【归档】[D3] 地图可视化——美国地图
生活随笔
收集整理的這篇文章主要介紹了
【归档】[D3] 地图可视化——美国地图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
基于地圖信息，設計可視化方案，能夠將不同州的生產力高低，以及一些城市的人口多少表示在地圖上。該可視化方案，能為用戶提供一個分析在那些生產力比較高（或比較低）的州和州里一些大城市的人口之間關系的工具。
?
<!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>?
效果圖如下：
?
?
?
?
?
數據文件：地圖可視化數據（美國地圖）
總結
以上是生活随笔為你收集整理的【归档】[D3] 地图可视化——美国地图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Tomcat做成系统服务
- 下一篇： CentOS下连VisualSVN服务器