【归档】[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] 地图可视化——美国地图相关推荐

R语言使用ggplot2包和maps包可视化美国地图、使用北美犯罪率数据为不同区域的地图渲染（颜色深浅区分犯罪率高低、US map colored by violent crime rates）
R语言使用ggplot2包和maps包可视化美国地图.使用北美犯罪率数据为不同区域的地图渲染(颜色深浅区分犯罪率高低.US map colored by violent crime rates) 目录
echarts地图可视化中国地图及各省级js文件分享
最近在做关于echarts地图可视化时,需要绘制各省的地图,于是就搜索了大量的信息.踩了好多坑,大多数都是付费的. 有需要的搜索微信公众号[知音库],点击文件库进入领取即可领取整理好的中国地图js文 ...
pyqt5 地图可视化网页地图 folium
实验任务(实验题目.目的) Implement a shortest path algorithm and apply it to the national railway system.以全国主要城 ...
Power BI——地图可视化(气泡地图Bubble Map)
一.概念: 在地图上利用气泡的大小来表示不同地区的数据二.案例分析: 展现世界各国的 GDP: 步骤1: 步骤2:如果有多个层次的位置列,比如上图中是国家层级的位置,再加上省自治区.市级的位置数据, ...
数据可视化神器，精彩的地图可视化展示
传统的地图分析制作大多需要编程来完成,今天给大家介绍的地图可视化工具,简单的套入地理经纬度数据或者区域名称,系统自动识别定位出相应位置从而完成地图可视化.地图可以说下当下重要的数据可视化工具.好的地图 ...
Python调用高德地图API实现经纬度换算、地图可视化
作者 | 糖甜甜甜出品 | 经管人学数据分析 Python调用高德地图API实现经纬度换算.地图可视化前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地 ...
借助高德地图开发者平台——地图可视化
借助高德地图开发者平台--地图可视化高德地图开发者平台:http://developer.amap.com/ 做什么? 制作这样的显示地图: 你只需要: 点位经纬度坐标即可.(这一点可以利用高德坐标 ...
EXCEL地图可视化功能概览--小O地图EXCEL版0.6.3.0版
前言小O地图EXCEL版软件能干什么? 总结起来,在EXCEL中实现地图浏览.地图任务(处理地理数据).地图可视化.地图标注.地图快照. 本文是对小O地图EXCEL版软件功能的简介,通过本文,能够 ...
0306-二维地图开发-地图可视化：简单符号渲染
地图可视化是地图作为信息呈现媒介的一个重要功能.通过可视化,我们可以洞察出地图上呈现的数据特征和它们之间的空间关系.目前做空间可视化这块的越来越精细,有些甚至上升到的艺术的层面.对于地图开发者来说,如 ...

【归档】[D3] 地图可视化——美国地图

【归档】[D3] 地图可视化——美国地图相关推荐

最新文章

热门文章