GDP折线图
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>GDP折线图</title>
7 <script src="./d3.js"></script>
8 <style>
9 .axis path,
10 .axis line {
11 fill: none;
12 stroke: black;
13 shape-rendering: crispEdges;
14 }
15
16 .axis text {
17 font-family: sans-serif;
18 font-size: 11px
19 }
20 </style>
21 </head>
22
23 <body>
24 <script>
25 let dataset = [{
26 country: 'china',
27 gdp: [
28 [2000, 11920],
29 [2001, 13170],
30 [2002, 14550],
31 [2003, 16500],
32 [2004, 19440],
33 [2005, 22870],
34 [2006, 27930],
35 [2007, 35040],
36 [2008, 45470],
37 [2009, 51050],
38 [2010, 59490],
39 [2011, 73140],
40 [2012, 83860],
41 [2013, 103550],
42 ]
43 }, {
44 country: "japan",
45 gdp: [
46 [2000, 47310],
47 [2001, 41590],
48 [2002, 39800],
49 [2003, 43020],
50 [2004, 46550],
51 [2005, 45710],
52 [2006, 43560],
53 [2007, 43560],
54 [2008, 48490],
55 [2009, 50350],
56 [2010, 54950],
57 [2011, 59050],
58 [2012, 59370],
59 [2013, 48980],
60 ]
61 }];
62 // svg画布
63 let width = 600;
64 let height = 600;
65 let svg = d3.select("body").append('svg')
66 .attr('width', width)
67 .attr('height', height)
68 // 外边框
69 let padding = { top: 50, right: 50, left: 50, bottom: 50};
70 // 计算gdp最大值
71 let gdpMax = 0;
72 for(let i = 0; i<dataset.length; i++) {
73 let currGdp = d3.max(dataset[i].gdp, function(d) {
74 return d[1];
75 });
76 if(currGdp > gdpMax) {
77 gdpMax = currGdp
78 }
79 }
80 // 定义比例尺
81 let xScale = d3.scale.linear()
82 .domain([2000, 2013])
83 .range([0, width - padding.left - padding.right]);
84 let yScale = d3.scale.linear()
85 .domain([0, gdpMax * 1.1])
86 .range([(height - padding.top - padding.bottom), 0]);
87
88 // 创建一个线段生成器
89 let linePath = d3.svg.line()
90 .x(function(d) {
91 return xScale(d[0])
92 })
93 .y(function(d) {
94 return yScale(d[1]);
95 })
96 .interpolate('cardinal');
97 // 定义两个颜色
98 let colors = [d3.rgb(0, 0, 255), d3.rgb(0, 255, 0)];
99 // 添加路径
100 svg.selectAll("path")
101 .data(dataset)
102 .enter()
103 .append('path')
104 .attr('d', function(d) {
105 return linePath(d.gdp); //返回线段生成器得到的路径
106 })
107 .attr('transform', 'translate(' + padding.left + ',' + padding.top + ')')
108 .attr('fill', 'none')
109 .attr('stroke', function(d, i) {
110 return colors[i]
111 })
112 .attr('stroke-width', '3px');
113 // 创建坐标值
114 let xAxis = d3.svg.axis()
115 .scale(xScale)
116 .ticks(5)
117 .tickFormat(d3.format("d"))
118 .orient("bottom");
119 let yAxis = d3.svg.axis()
120 .scale(yScale)
121 .orient("left");
122 // 添加坐标轴
123 svg.append('g')
124 .attr('class', 'axis')
125 .attr('transform', 'translate(' + padding.left + ',' + (height - padding.bottom) + ')')
126 .call(xAxis);
127 svg.append('g')
128 .attr('class', 'axis')
129 .attr('transform', 'translate(' + padding.left + ',' + padding.top + ')')
130 .call(yAxis);
131 // 添加矩形
132 svg.selectAll('rect')
133 .data(dataset)
134 .enter()
135 .append('rect')
136 .attr('width', 20)
137 .attr('height', 15)
138 .attr('fill', function(d, i) {
139 return colors[i]
140 })
141 .attr('x', function(d, i) {
142 return padding.left + 80 * i;
143 })
144 .attr('y', height - padding.bottom)
145 .attr('transform', 'translate(20,30)');
146 // 添加文字
147 svg.selectAll('.text')
148 .data(dataset)
149 .enter()
150 .append('text')
151 .attr('font-size', '14px')
152 .attr('text-anchor', 'middle')
153 .attr('fill', '#000')
154 .attr('x', function(d, i) {
155 return padding.left + 80 * i
156 })
157 .attr('y', height - padding.bottom)
158 .attr("dx", "40px")
159 .attr('dy', '0.9em')
160 .attr('transform', 'translate(20, 30)')
161 .text(function(d) {
162 return d.country
163 })
164 </script>
165 </body>
166
167 </html>
GDP折线图的更多相关文章
- 4-Highcharts曲线图之时间轴折线图
鼠标按住左键 左右移动可以试试<!DOCTYPE> <html lang='en'> <head> <title>4-Highcharts曲线图之时间轴 ...
- 3-Highcharts曲线图之显示点值折线图
直接上代码 根据代码注释讲解 <!DOCTYPE> <html lang='en'> <head> <title>3-Highcharts曲线图之显示 ...
- 利用python进行折线图，直方图和饼图的绘制
我用10个国家某年的GDP来绘图,数据如下: labels = ['USA', 'China', 'India', 'Japan', 'Germany', 'Russia', 'Brazil', ...
- JavaScript数据可视化编程学习（一）Flotr2，包含简单的，柱状图，折线图，饼图，散点图
一.基础柱状图 二.基础的折线图 三.基础的饼图 四.基础的散点图 一.基础柱状图 如果你还没有想好你的数据用什么类型的图表来展示你的数据,你应该首先考虑是否可以做成柱状图.柱状图可以表示数据的变化过 ...
- highcharts.js的时间轴折线图
工作中正好用到. 鼠标按住左键 左右移动可以试试 <!DOCTYPE> <html lang='en'> <head> <title>4-Highcha ...
- D3.js(v3)+react 制作 一个带坐标轴与比例尺的折线图
本章使用路径生成器来绘制一个折线图.以中国和日本的GDP数据为例: //数据 var dataList = [ { coountry : "china", gdp : [ [2 ...
- matplotlib折线图
绘制折线图:参考https://baijiahao.baidu.com/s?id=1608586625622704613 (3)近10年GDP变化的曲线图,及三次产业GDP变化的曲 ...
- C# 实时折线图，波形图
此Demo是采用VS自带的Chart图表控件,制作实时动态显示的折线图,和波形图. 涉及到知识如下: Chart 控件,功能强大,可以绘制柱状图,折线图,波形图,饼状图,大大简化了对图的开发与定制. ...
- Android开发学习之路-自定义控件（天气趋势折线图）
之前写了个天气APP,带4天预报和5天历史信息.所以想着要不要加一个折线图来显示一下天气变化趋势,难得有空,就写了一下,这里做些记录,脑袋不好使容易忘事. 先放一下效果: 控件内容比较简单,就是一个普 ...
- react-echarts之折线图的显示
react中想要实现折线图和饼图的功能,需要引入react-echarts包,然后再实现折线图的功能.我这里引用的版本是:0.1.1.其他的写法参echarts官网即可.下面详细讲解的是我在react ...
随机推荐
- Java API 操作Docker浅谈
背景: 使用com.github.docker-java库可以很方便地在Java中操作Docker.下面是一个详细的教程,包括创建镜像.创建容器.启动容器.停止容器和删除容器的步骤以及每一步的说明. ...
- LeetCode1806：还原排列的最少操作步数（置换群 or 模拟）
题意:题目的意思是,给定一个初始状态perm,然后对perm的每个元素按照上述的规则进行变换操作.问:perm经过多少次这种操作能够变回初始的perm. 解题思路:第一种方法就是模拟,一直变换,直到变 ...
- 浅谈android的activity
说道activity,大家可以说是熟悉的不能再熟悉,首先,先来个镇楼图, 个人觉得谷歌的这张图,比别的什么生命周期图都好;说下各个生命周期注意的: 1:onstart()时,activity可见; 2 ...
- 文件不落地上线sliver
接着二开sliver,给他添加一个生成powershell payload上线的功能,生成并复制到剪切板. 准备 首先,先开启监听,不多说直接mtls默认的就行,sliver可以生成配置文件来实现 ...
- [Python急救站]回文数的判断
回文数判断:回文数是指这个数颠倒后,与原数一致,如32223.12221等. 第一个程序是由用户输入,并判断是否是回文数. a = eval(input("请输入一个五位数")) ...
- Boost程序库完全开发指南：1.1-C++基础知识点梳理
主要整理了N多年前(2010年)学习C++的时候开始总结的知识点,好长时间不写C++代码了,现在LLM量化和推理需要重新学习C++编程,看来出来混迟早要还的. 1.shared_ptr 解析:sh ...
- 异步、多线程、Await/Async、Task
异步多线程经常被拿来说事,网上文章也是多如牛毛,我也是停留在很菜的水平,痛下决心好好"恶补"一下这块知识. 还是先放两个官方文档压压惊:使用 Async 和 Await 的异步编程 ...
- 万万没想到，我在夜市地摊解决了MySQL临时表空间难题~~
都说"大隐隐于市,高手在深宫".突如其来的"摆地摊"风潮,让原本冷清的街道热闹非凡,也让众人发现了那些神龙见首不见尾的大神们. 这不,小毛在下班的途中就遇到了大 ...
- 【小白学YOLO】一文带你学YOLOv1 Testing
摘要:本文将为初学者带详细分析如何进行YOLOv1 Testing的内容. YOLOv1 Testing 进入testing阶段,我们已经得到98个bounding box和confidence还有C ...
- 网络ping不通，试试这8招
摘要:网络ping不通,该怎么办?本文教你8个大招,轻松找到问题根源. 本文分享自华为云社区<网络ping不通,该怎么办?>,作者:wljslmz. 如下图,PC(192.168.10.1 ...