D3.js中国地图可视化

news2024/10/3 18:08:22

1、项目介绍

该项目来自Github，基于D3.js中国地图可视化。

D3.js is a JavaScript library for manipulating documents based on data. It uses HTML, SVG, and CSS to display data. The full name of D3 is "Data-Driven Documents," which means it allows you to use data to drive updates to the Document Object Model (DOM).

D3.js provides powerful data visualization capabilities, including but not limited to bar charts, line charts, pie charts, scatter plots, and force-directed graphs. It allows developers to create complex, interactive charts and graphs by writing JavaScript code.

The learning curve for D3.js may be relatively steep, as it requires a certain understanding of HTML, CSS, JavaScript, and SVG. However, once these basics are mastered, the flexibility and powerful features of D3.js make it possible to create complex data visualizations.

Please note that D3.js is an open-source project created and maintained by Mike Bostock. It is continuously updated to support new browser features and improve performance.

If you are interested in D3.js, I recommend starting with the official documentation and tutorials, and trying to write some simple charts yourself to deepen your understanding. You can also refer to some online D3.js communities and forums to get more learning resources and help.

2、实验仪器

IDEA、JAvaScript、Java SDK22、D3.js、china.js

3、实验操作

打开项目，首先安装依赖库。

npm install in chinaMap

安装完成会出现， node_modules文件夹。

接着在cmd中输入

npm run start

运行得出如下结果：

接着打开浏览器，在地址栏中输入：localhost:3000

运行得出图像。

4、D3.js源代码

<html>  
	<head>  
	    <meta charset="utf-8">  
	    <title>ChinaMap</title>  
	</head> 
	<style>
		.mapBox{width: 1400px; height: 450px; margin: 50px auto;}
		.mapBox>div{ float:left;}
		.map{ width: 700px; height: 450px; }
		.provinceMap{width: 700px; height: 450px;}
	</style>
<body>
<div class="mapBox">
	<div class="ChinaMap"></div>
	<div class="provinceMap"></div>
</div>

<script src="d3.v3.js" charset="utf-8"></script>
<script src="chinaMap.js" charset="utf-8"></script>
<script type="text/javascript">
	var provinceData = [
			{"name": "北京", "value":	14149},
			{"name": "天津", "value":	2226.41},
			{"name": "河北", "value":	1544.94},
			{"name": "山西", "value":	3720.24},
			{"name": "辽宁", "value":	6263.69},
			{"name": "内蒙古", "value":	2771.96},
			{"name": "吉林", "value":	4494.77},
			{"name": "黑龙江", "value":	3835.48},
			{"name": "上海", "value":	5493.23},
			{"name": "江苏", "value":	12299.72},
			{"name": "浙江", "value":	14151.74},
			{"name": "安徽", "value":	1562.67},
			{"name": "福建", "value":	14225.67},
			{"name": "江西", "value":	384.73},
			{"name": "山东", "value":	9923.65},
			{"name": "河南", "value":	1611.41},
			{"name": "湖北", "value":	1202.97},
			{"name": "湖南", "value":	928.36},
			{"name": "广东", "value":	15610.67},
			{"name": "广西", "value":	9278.87},
			{"name": "海南", "value":	13348.02},
			{"name": "重庆", "value":	1168.32},
			{"name": "四川", "value":	7798.15},
			{"name": "贵州", "value":	168.94},
			{"name": "云南", "value":	8947.08},
			{"name": "西藏", "value":	13405.7},
			{"name": "陕西", "value":	1597.47},
			{"name": "甘肃", "value":	4522.35},
			{"name": "青海", "value":	0},
			{"name": "宁夏", "value":	545.45},
			{"name": "新疆", "value":	13150.57},	
			{"name": "韩国", "value":	13150.57},
			{"name": "澳门", "value":	5150.57},
			{"name": "台湾", "value":	15150.57},
			{"name": "美国", "value":	150.57}
		];

	var provinceData2 = [
                {"name": "锡林郭勒盟", "value": 1544.94},
                {"name": "鄂尔多斯市", "value": 3720.24},
                {"name": "赤峰市", "value": 6263.69},
                {"name": "巴彦淖尔市", "value":    2771.96},
                {"name": "通辽市", "value": 4494.77},
                {"name": "乌兰察布市", "value":    3835.48},
                {"name": "兴安盟", "value": 5493.23},
                {"name": "包头市", "value": 12299.72},
                {"name": "呼和浩特市", "value": 14151.74},
                {"name": "乌海市", "value": 1562.67}
            ];


	var opt = {
		data: provinceData,
		container: '.ChinaMap',
		isShowLinearGradient: true,
		isShowSouthSea: true,
		isShowProvince: true,
		isShowLinearGradient: true,
		provinceData: provinceData2
	}
	new ChinaMap(opt);
</script>

		
</body>  
</html>