数据可视化【六】Line Chart Area Chart

Line Chart

vizhub代码：

https://vizhub.com/Edward-Elric233/094396fc7a164c828a4a8c2e13045308

实现效果：
在这里插入图片描述
这里先使用d3.line()设置每个点的x坐标和y坐标，然后再用这个东西设置path的'd'属性，就可以得到曲线。

const lineGenerator = d3.line().x(d => xScale(xValue(d))).y(d => yScale(yValue(d))).curve(d3.curveBasis); //使得曲线比较光滑g.append('path').attr('class', 'line-path').attr('d', lineGenerator(data));

index.html

<!DOCTYPE html>
<html><head><title>Temperature in San Francisc Line Chart</title><link rel="stylesheet" href="./styles.css"><script src="https://unpkg.com/d3@5.7.0/dist/d3.min.js"></script><!-- find D3 file on UNPKG d3.min.js-->
</head><body><svg width="960" height="500"></svg><script src="./index.js">// console.log(d3); test whether you have imported d3.js or not</script></body></html>

html.js

const svg = d3.select('svg');
// svg.style('background-color', 'red'); test
const width = +svg.attr('width');
const height = +svg.attr('height');const render = data => {const title = 'A week in San Francisco';const xValue = d => d.timestamp;const xAxisLabel = 'Time';const yValue = d => d.temperature;const yAxisLabel = 'Temperature';const margin = { top: 60, right: 20, bottom: 80, left: 100 };const innerWidth = width - margin.left - margin.right;const innerHeight = height - margin.top - margin.bottom;const circleRadius = 6;const xScale = d3.scaleTime()//.domain([min(data, xValue), max(data, xValue)])	//和下面的写法等价.domain(d3.extent(data, xValue)).range([0, innerWidth]).nice(); //作用是如果值域的最大值不够整齐可以变得整齐// const yScale = scaleBand()const yScale = d3.scaleLinear().domain([d3.max(data, yValue), d3.min(data, yValue)]).range([0, innerHeight]).nice();//const xAxisTickFormat = number => format('.3s')(number).replace('G','B');const yAxis = d3.axisLeft(yScale).tickSize(-innerWidth).tickPadding(15);const xAxis = d3.axisBottom(xScale)//.tickFormat(xAxisTickFormat).tickSize(-innerHeight) //设置tick-line的长度.tickPadding(15); //通过设置Padding让x轴的数字离远一点const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);//yAxis(g.append('g'));const yAxisG = g.append('g').call(yAxis);yAxisG.selectAll('.domain').remove();yAxisG.append('text').attr('class', 'axis-label').attr('y', -70).attr('x', -innerHeight / 2).attr('fill', 'black').attr('transform', `rotate(-90)`).attr('text-anchor', 'middle') //设置锚点在中心.text(yAxisLabel);const xAxisG = g.append('g').call(xAxis).attr('transform', `translate(0,${innerHeight})`);xAxisG.selectAll('.domain').remove();xAxisG.append('text').attr('class', 'axis-label').attr('y', 60).attr('x', innerWidth / 2).attr('fill', 'black').text(xAxisLabel);let colorSet = ['#eb2617', '#ffaa00', '#4dff00', '#00fbff', '#bb00ff', '#eeff00'];const createGetColor = (idx) => {var i = idx || -1;return {get: () => { i = (i + 1) % colorSet.length; return colorSet[i]; }};};const getColor = createGetColor();const lineGenerator = d3.line().x(d => xScale(xValue(d))).y(d => yScale(yValue(d))).curve(d3.curveBasis); //使得曲线比较光滑g.append('path').attr('class', 'line-path').attr('d', lineGenerator(data));/*g.selectAll('circle').data(data).enter().append('circle').attr('cy', d=>yScale(yValue(d))).attr('cx', d => xScale(xValue(d))).attr('r', circleRadius).attr('fill', 'red');*/g.append('text').attr('class', 'title').attr('y', -20).attr('x', innerWidth / 2).attr('text-anchor', 'middle').text(title);
};d3.csv('https://vizhub.com/curran/datasets/temperature-in-san-francisco.csv').then(data => {// console.log(data);data.forEach(d => {//得到的数据默认每个属性的值都是字符串，因此需要进行转换d.temperature = +d.temperature;d.timestamp = new Date(d.timestamp);});render(data);
});

styles.css

body {margin: 0px;overflow: hidden;font-family: manosapce;
}circle {opacity: 0.5;
}text {font-family: sans-serif;
}.tick text {font-size: 2em;fill: #8E8883
}.tick line {stroke: #E5E2E0
}.axis-label {fill: #8E8883;font-size: 2.5em
}.title {font-size: 3em;fill: #8E8883
}.line-path {fill: none;stroke: steelblue;stroke-width: 5;stroke-linejoin: round /*使得曲线比较光滑*/
}

其实也可以在折现图上加上点，只需要去掉原本散点图的注释就可以了。但是我觉得这样不好看就没有加上。

Area Chart

vizhub代码：

https://vizhub.com/Edward-Elric233/9fa9b8c649cf41a3afcde6e185a72cca

https://vizhub.com/Edward-Elric233/39790021eded4d398be6f97726e73dd2

area图只需要把使用line的地方换成area即可。不同的地方在于area需要设置y0,y1,y用来划分区域，而且需要设置path的fill属性，用来表示区域的颜色。一般来讲应该不需要设置线的stroke和stroke-width属性。

例如把上面的图变成Area Chart
在这里插入图片描述
需要修改的js代码如下：

const areaGenerator = area().x(d => xScale(xValue(d))).y1(d=>yScale(yValue(d))).y0(innerHeight).curve(curveBasis);	//使得曲线比较光滑g.append('path').attr('class', 'line-path').attr('d', areaGenerator(data));

这里还画了一个图，把网格提到了图形的前面。
在这里插入图片描述
虽然有些丑，但是如果需要使用的话还是可以的。技巧就是先生成Area图，然后再生成坐标轴就可以了。这样坐标线就会显示在图形的上面。

index.html

<!DOCTYPE html>
<html><head><title>World Population Area Chart</title><link rel="stylesheet" href="./styles.css"><script src="https://unpkg.com/d3@5.7.0/dist/d3.min.js"></script><!-- find D3 file on UNPKG d3.min.js-->
</head><body><svg width="960" height="500"></svg><script src="./index.js">// console.log(d3); test whether you have imported d3.js or not</script></body></html>

index.js

const svg = d3.select('svg');
// svg.style('background-color', 'red'); test
const width = +svg.attr('width');
const height = +svg.attr('height');const render = data => {const title = 'World Population';const xValue = d => d.year;const xAxisLabel = 'Year';const yValue = d => d.population;const yAxisLabel = 'Population';const margin = { top: 60, right: 20, bottom: 80, left: 100 };const innerWidth = width - margin.left - margin.right;const innerHeight = height - margin.top - margin.bottom;const circleRadius = 6;const xScale = d3.scaleTime()//.domain([min(data, xValue), max(data, xValue)])	//和下面的写法等价.domain(d3.extent(data, xValue)).range([0, innerWidth])//.nice();	//作用是如果值域的最大值不够整齐可以变得整齐// const yScale = scaleBand()const yScale = d3.scaleLinear().domain([d3.max(data, yValue), 0]).range([0, innerHeight]).nice();const yAxisTickFormat = number => d3.format('.1s')(number).replace('G', 'B');const yAxis = d3.axisLeft(yScale).tickFormat(yAxisTickFormat).tickSize(-innerWidth).tickPadding(15);const xAxis = d3.axisBottom(xScale)//.tickFormat(xAxisTickFormat).ticks(10) //设置标签的多少，不知道为什么如果设置为10就会很乱，可能是因为这是一周的时间，如果划分成10个以上就需要显示小时吧.tickSize(-innerHeight) //设置tick-line的长度.tickPadding(15); //通过设置Padding让x轴的数字离远一点const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);const areaGenerator = d3.area().x(d => xScale(xValue(d))).y1(d => yScale(yValue(d))).y0(innerHeight).curve(d3.curveBasis); //使得曲线比较光滑g.append('path').attr('class', 'line-path').attr('d', areaGenerator(data));//yAxis(g.append('g'));const yAxisG = g.append('g').call(yAxis);yAxisG.selectAll('.domain').remove();yAxisG.append('text').attr('class', 'axis-label').attr('y', -70).attr('x', -innerHeight / 2).attr('fill', 'black').attr('transform', `rotate(-90)`).attr('text-anchor', 'middle') //设置锚点在中心.text(yAxisLabel);const xAxisG = g.append('g').call(xAxis).attr('transform', `translate(0,${innerHeight})`);xAxisG.selectAll('.domain').remove();xAxisG.append('text').attr('class', 'axis-label').attr('y', 60).attr('x', innerWidth / 2).attr('fill', 'black').text(xAxisLabel);let colorSet = ['#eb2617', '#ffaa00', '#4dff00', '#00fbff', '#bb00ff', '#eeff00'];const createGetColor = (idx) => {var i = idx || -1;return {get: () => { i = (i + 1) % colorSet.length; return colorSet[i]; }};};const getColor = createGetColor();/*g.selectAll('circle').data(data).enter().append('circle').attr('cy', d=>yScale(yValue(d))).attr('cx', d => xScale(xValue(d))).attr('r', circleRadius).attr('fill', 'red');*/g.append('text').attr('class', 'title').attr('y', -20).attr('x', innerWidth / 2).attr('text-anchor', 'middle').text(title);
};d3.csv('https://vizhub.com/curran/datasets/world-population-by-year-2015.csv').then(data => {console.log(data);data.forEach(d => {//得到的数据默认每个属性的值都是字符串，因此需要进行转换d.population = +d.population;d.year = new Date(d.year);});render(data);
});

styles.css

body {margin: 0px;overflow: hidden;font-family: manosapce;
}circle {opacity: 0.5;
}text {font-family: sans-serif;
}.tick text {font-size: 2em;fill: #8E8883
}.tick line {stroke: #E5E2E0
}.axis-label {fill: #8E8883;font-size: 2.5em
}.title {font-size: 3em;fill: #8E8883
}.line-path {fill: #42A5B3;/*   stroke : blue;stroke-width : 5; */
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/383612.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数据可视化【七】 更新模式

数据可视化【七】 更新模式

Enter 以下面这个简单的代码进行分析 const svg d3.select(svg); // svg.style(background-color, red); testconst height svg.attr(height); // equals paresFloat() const width svg.attr(width);const makeFruit type >( {type} ); //这种写法好像能够直接得到一个…
阅读更多...
数据可视化【八】根据数据类型选择可视化方式

数据可视化【八】根据数据类型选择可视化方式

Marks:Rows PointsLinesAreas Channels:Columns PositionColorShape
阅读更多...
数据可视化【九】单向数据流交互

数据可视化【九】单向数据流交互

我们使用一下上上篇博客的代码。 例如我们想要当鼠标点击水果的时候会出现黑色的框&#xff0c;再点击一下黑色的框就会消失。 首先&#xff0c;我们应该给组件添加点击事件&#xff1a; fruitBowl.js gruopAll.on(click, d > onClick(d.id));这个on函数第一个参数是事件…
阅读更多...
数据库原理及应用【四】数据库管理系统

数据库原理及应用【四】数据库管理系统

查询优化 数据库管理系统中非常重要的一部分。 代数优化 按照一定的规则将语句变化成关系代数以后进行优化 操作优化 对代数优化后的查询树使用比较好的方法进行查询。 主要是对连接运算进行优化 嵌套循环归并扫描索引优化哈希连接 恢复机制 备份&#xff08;完整备份差…
阅读更多...
数据库原理及应用【五】安全性和完整性约束

数据库原理及应用【五】安全性和完整性约束

数据库一致性被破坏&#xff1a; 系统故障许多用户的并发访问人为破坏事务本身不正确 保护数据库一致性的方法&#xff1a; 视图/查询修改访问控制 普通用户拥有资源特权的用户DBA 数据库的安全问题 身份验证 口令物理设备 GRANT CONNECT TO John IDENTIFIED BY 123456…
阅读更多...
递归式复杂度求解

递归式复杂度求解

代换法 猜测复杂度验证是否满足递归式&#xff08;使用归纳法&#xff09;找到常数应该满足的条件针对基本情况&#xff0c;常数足够大时总是成立的 需要注意的是&#xff0c;我们猜测的复杂度有可能不满足递归式&#xff0c;这个时候就要通过减去一些低阶项来使得归纳成立。…
阅读更多...
斐波那契数列计算

斐波那契数列计算

定义 斐波那契数列&#xff1a; F[n]{0,n01,n1F[n−1]F[n−2],elseF[n] \begin{cases} 0,n0 \\ 1,n1\\ F[n-1]F[n-2],else \end{cases} F[n]⎩⎪⎨⎪⎧​0,n01,n1F[n−1]F[n−2],else​ 朴素计算法 根据递归式F[n]F[n−1]F[n−2]F[n]F[n-1]F[n-2]F[n]F[n−1]F[n−2]进行计算…
阅读更多...
P、NP、NP完全问题、NP难问题

P、NP、NP完全问题、NP难问题

可以在多项式时间内求解的问题称为易解的&#xff0c;而不能在多项式时间内求解的问题称为难解的。 P类问题&#xff1a;多项式类型&#xff0c;是一类能够用&#xff08;确定性的&#xff09;算法在多项式的时间内求解的判定问题。 只有判定问题才属于P 不可判定问题&#…
阅读更多...
数据可视化【十】绘制地图

数据可视化【十】绘制地图

Loading and parsing TOPOJSON 导入Topojson d3文件 地址&#xff1a;https://unpkg.com/topojson3.0.2/dist/topojson.min.js 想要找d3文件的话去unpkg.com好像大部分都能找到的样子 Rendering geographic features 寻找合适的地图数据&#xff1a;谷歌搜索world-atlas npm…
阅读更多...
数据可视化【十一】树状图

数据可视化【十一】树状图

Constructing a node-link tree visualization 首先将节点之间的连线画出来。 使用json函数读取文件以后&#xff0c;使用hierarchy等函数得到连线的数组&#xff0c;然后绑定这个数组&#xff0c;给每个元素添加一个path&#xff0c;绘画使用的是一个函数linkHorizontal&…
阅读更多...
数据可视化【十二】 颜色图例和尺寸图例

数据可视化【十二】 颜色图例和尺寸图例

有了前面的知识&#xff0c;制作一个图例应该不是很难&#xff0c;关键是我们想要制作一个可以在其他地方进行使用的图例&#xff0c;这样就需要能够动态地设置图例的大小&#xff0c;位置&#xff0c;等等。 这里直接上代码&#xff1a; colorLegend.js export const color…
阅读更多...
数据可视化【十三】地区分布图

数据可视化【十三】地区分布图

在前面的博客中已经介绍了如何绘制地图&#xff0c;这一节学习如何绘制地区分布图。如果对绘制地图还不熟悉的话可以了解一下之前我写的博客&#xff1a;数据可视化【十】绘制地图 Intergrating(整合) TopoJSON with tabular data(列表数据) 在前面的博客中没有使用到tsv文件…
阅读更多...
3.01【python正则表达式以及re模块】

3.01【python正则表达式以及re模块】

python正则表达式以及re模块 元字符 正则表达式的语法就由表格中的元字符组成&#xff0c;一般用于搜索、替换、提取文本数据 元字符含义.匹配除换行符以外的任何单个字符*匹配前面的模式0次或1次匹配前面的模式1次或多次?匹配前面的模式0次或1次[]用于定义字符集&#xff…
阅读更多...
Linux配置编程环境+云服务器上传文件

Linux配置编程环境+云服务器上传文件

Java环境配置 Ubuntu https://www.cnblogs.com/lfri/p/10437266.html Centos https://blog.csdn.net/qq_21077715/article/details/85536399 Tomcat配置 Centos https://blog.csdn.net/qq_21077715/article/details/85541685 https://www.cnblogs.com/newwind/p/9904561…
阅读更多...
gbd + cgbd

gbd + cgbd

gbd&#xff1a;传送门 cgbd&#xff1a;传送门 | 传送门
阅读更多...
数据可视化【十四】交互式过滤地区分布图

数据可视化【十四】交互式过滤地区分布图

在前面的博客中已经介绍了如何绘制地区分布图&#xff0c;这一节学习如何绘制交互式过滤地区分布图。如果对绘制地区分布图还不熟悉的话可以了解一下之前我写的博客&#xff1a;数据可视化【十三】地区分布图 整体的框架仍然是在之前的基础上进行修改&#xff0c;主要是添加交…
阅读更多...
Ubuntu环境搭建

Ubuntu环境搭建

本文记录了一些常用的Ubuntu软件 然后首先修改软件源&#xff1a;软件和更新->Ubuntu软件->下载自&#xff1a;其他站点&#xff08;修改为阿里云&#xff09; 在关闭的时候需要更新什么的 然后修改更新方式&#xff0c;将不支持的更新去掉 常用的Windows软件 网易云…
阅读更多...
1 两数之和

1 两数之和

虽然只是一道很简单的题&#xff0c;但是也给我很多思考。 刚看到这道题的时候没有仔细思考&#xff0c;直接写了个排序和二分查找&#xff0c;想着对每个数字查找另一个数字会不会出现&#xff0c;复杂度是O(nlognnlogn)O(nlognnlogn)O(nlognnlogn)&#xff0c;主要训练了一下…
阅读更多...
834 树中距离之和

834 树中距离之和

这道题我自己的想法只有对每个点都用一遍Dijkstra然后再求和&#xff0c;显然会超时&#xff0c;所以我都没有尝试。 研究了一下题解&#xff0c;发现题解很巧妙&#xff0c;自己对树的处理还是太稚嫩&#xff0c;之前树链剖分学的都忘光了。 对于固定根节点的&#xff0c;我…
阅读更多...
75 颜色分类

75 颜色分类

题目已经提示可以一遍扫描了但是我还是没有想到&#xff0c;其实双指针的想法我已经有了&#xff0c;但是一想到有问题就觉得无法实现。这也揭示了我思维上的问题&#xff1a;用一种方法解决问题遇到困难第一件事情不是想着如何攻克而是想着换一种方法。对自己的思维也不自信。…
阅读更多...
最新文章

Copyright @ 2022~2023