数据可视化【十五】

最新推荐文章于 2020-10-28 19:23:32 发布
最新推荐文章于 2020-10-28 19:23:32 发布
阅读量160 收藏
点赞数
分类专栏： 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/T_T233333333/article/details/108908642
版权
博客探讨了颜色在数据可视化中的应用原则，包括背景颜色的重要性、颜色选择、颜色一致性和对比度等。引用了Stephen Few的论文，提出了六条规则，强调颜色应服务于通信目标，确保色盲人群也能正确理解，并提供了D3Scale-Chromatic作为颜色刻度的选择工具。
摘要由CSDN通过智能技术生成

经验法则：在颜色不相邻的时候加上背景颜色颜色的个数为6~12比较好。
颜色其实很大程度上由背景决定而不是他本身决定。

D3 Scale-Chromatic 有许多颜色刻度，可以根据自己的需要进行选择。

参考论文：Practical Rules for Using Color in Charts(Stephen Few,perceptual Edge)

规则１：如果想要同一种颜色看起来一样，应该保证背景是一致的
规则２：如果想要一种颜色可以被轻易的看到，应该使用一种和物品颜色有充分差异的背景颜色
规则３：只有在需要服务于特定通信目标时才使用颜色
规则４：仅仅在不同的颜色包含不同的含义的时候才使用不同的颜色，否则使用同一种颜色就可以
规则５：使用柔和、自然的颜色来显示大部分信息，使用明亮或者黑暗的颜色来高亮更需要关注的信息
规则６：当使用颜色对一系列的定量值进行编码时，坚持使用单一的色相，并改变强度，从低值的淡色到高值的渐深渐亮的颜色
规则７：表和图的非数据组件应该以足够明显的方式显示，以执行它们的角色，但不能再明显了，因为过分突出可能会使它们分散对数据的注意力
规则８：为了保证拥有色盲的人群可以正确阅读数据，应该避免在一张图里使用大量的红色和绿色

王江奎
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Tableau数据可视化实战.pdf
08-09
Tableau数据可视化实战 在本书中，我们将深入探讨 Tableau 数据可视化的实战应用。Tableau 作为一款非常强大的数据可视化工具，已经被全球数万家企业所采用。通过本书的学习，读者将能够快速掌握 Tableau 的使用，...
数据可视化分析.pdf
08-08
本书《数据可视化分析》是以Excel2016和Tableau作为主要工具，全面介绍数据分析和可视化理论以及实践应用的计算机系列规划教材。书中所涉及的知识点涵盖了数据分析的基本概念、数据分析方法、数据处理、数据展示以及...
计算机设计大赛-数据可视化赛道-大数据可视化数据大屏可视化项目.zip
11-12
计算机设计大赛-数据可视化赛道-大数据可视化数据大屏可视化模板.zip是一个包含大数据可视化数据大屏可视化模板的压缩文件。该模板旨在为参赛者在计算机设计大赛的数据可视化赛道中提供帮助，以展示具有吸引力和交互...
数据可视化集.zip
最新发布
01-04
数据可视化是一种将复杂的数据以图形或图像形式呈现的技术，它能帮助我们理解、解释和传达数据中的信息。在“数据可视化集.zip”这个压缩包中，我们很可能会找到一系列关于数据采集、数据集以及相关数据可视化工具和...
实验五时间数据可视化数据
04-16
想试试自己做的免费下载一下，自己试试
D3力导引图
T_T233333333的博客
10-28 2291
学习力导引图的时候在网上没有找到什么好的教程，支离破碎地进行了一段时间的学习，还阅读了d3的关于d3的官方文档，但是始终觉得不的要领。这里记录一下我学习力导引图的一些心得以及推荐一下学习资源。 学习资源 官方文档：https://github.com/d3/d3-force 推荐：https://tomroth.com.au/d3/#force-graphs 学习心得 其他的知识在推荐网页都可以学习到，但是有一点那个网站没有提到，官方网站也没有提到的： 在用forceSimulation绑定节点以后，如果节
数据可视化【十一】树状图
T_T233333333的博客
09-11 2256
Highlighting on Hover using CSS Adding simple tooltips(using ) Loading multiple data files Looking up country name from id Panning & Zooming
数据可视化【十三】地区分布图
T_T233333333的博客
09-20 1434
Intergrating(整合) TopsJSON with tabular data(列表数据) Creating a loadAndProcessData module Visualizing an ordered attribute with color Showing data from 2 attributes in tooltip Adding a color legend
数据可视化【四】Bar Chart
T_T233333333的博客
08-16 1341
Representing a data table in JavaScript Creating rectangles for each row Using linear and band scales The margin convention Adding axes 以下学习内容参考博客：传送门 select()选择所有指定元素的第一个 selectAll()选择指定元素的全部 上面两个函数返回的结果为选择集 关于 select 和 selectAll 的参数，其实是符合 CSS 选择器的条件的，即.
数据可视化【五】 Scatter Plot
T_T233333333的博客
08-18 940
Scatter Plot vizhub上实现的代码：https://vizhub.com/Edward-Elric233/53807a1b35d94329b3689081cd2ea945?edit=files https://vizhub.com/Edward-Elric233/b9647d50899a4a0e8e917f913cd0a53a 由前面的柱状图，我们对图形进行一定的修改就可以得到散点图： index.html <!DOCTYPE html> <html> <h
数据可视化【十二】 颜色图例和尺寸图例
T_T233333333的博客
09-20 905
有了前面的知识，制作一个图例应该不是很难，关键是我们想要制作一个可以在其他地方进行使用的图例，这样就需要能够动态地设置图例的大小，位置，等等。 这里直接上代码： colorLegend.js export const colorLegend = (selection, props) => { const {colorScale, height, circleRadius, spacing, textOffset} = props; const groups = se
数据可视化【十】绘制地图
T_T233333333的博客
09-10 876
Loading and parsing TOPOJSON 导入Topojson d3文件 地址：https://unpkg.com/topojson@3.0.2/dist/topojson.min.js 想要找d3文件的话去unpkg.com好像大部分都能找到的样子 Rendering geographic features 寻找合适的地图数据：谷歌搜索world-atlas npm，第一个网站点进去，然后选择合适的d3文件。 这个文件里面的地图是Topojson格式的，想要转化为geojson需要使用to
数据可视化【六】Line Chart && Area Chart
T_T233333333的博客
08-18 745
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))) .
数据可视化【二】HTML+CSS+SVG+D3
T_T233333333的博客
08-15 456
HTML、CSS和SVG学习实现代码：https://vizhub.com/Edward-Elric233/89185eb96bc64a9d81777873a0ccd0b9 index.html <!DOCTYPE html> <html> <head> <title>Shapes with SVG and CSS</title> <link rel="stylesheet" href="./style.css"> &
数据可视化【七】 更新模式
T_T233333333的博客
08-22 395
Enter 以下面这个简单的代码进行分析 const svg = d3.select('svg'); // svg.style('background-color', 'red'); test const height = +svg.attr('height'); //+ equals paresFloat() const width = +svg.attr('width'); const makeFruit = type =>( {type} ); //这种写法好像能够直接得到一个属性名为't.
数据可视化【一】JavaScript学习
T_T233333333的博客
08-11 383
本博客是我学习Curran Kelleher老师数据可视化课程的笔记，感兴趣的小伙伴可以点击这里学习。 three cores of data visualization: analysis design construction 推荐书籍《visualization analysis & design》 JS学习 尽量使用const 可以通过()=>{}的方式声明函数，不需要关键字function 数组可以通过数组的forEach方法遍历数组 array.forEach(item =
数据可视化【三】基本概念
T_T233333333的博客
08-15 325
Visualization is suitable when there is a need to augment human capabilities rather than replace people with computational decision-making methods. 当可以信赖的智能化的解决方案存在的时候，可视化是不必要的。 当不知道需要分析的问题是什么的时候，可视化可以帮助人们发现问题。 探索分析科学数据 展示已有结果 在开发模型之前更好地理解需求 帮助开发者为智能方案调.
数据可视化【八】根据数据类型选择可视化方式
T_T233333333的博客
08-22 314
Marks:Rows Points Lines Areas Channels:Columns Position Color Shape
数据可视化【十四】交互式过滤地区分布图
T_T233333333的博客
09-26 277
在前面的博客中已经介绍了如何绘制地区分布图，这一节学习如何绘制交互式过滤地区分布图。如果对绘制地区分布图还不熟悉的话可以了解一下之前我写的博客：数据可视化【十三】地区分布图 整体的框架仍然是在之前的基础上进行修改，主要是添加交互事件。 首先要做的是给图例添加点击事件，让我们可以通过点击改变地图的状态。 colorLegend.js const groupEnter = groups.enter().append('g') .attr('class', 'tick') .attr('transf
使用Processing编程探索数据可视化
1. **数据可视化基础**：书中首先介绍了数据可视化的基础理论，包括为何要进行数据可视化，以及可视化对于理解大量复杂数据的重要性。通过实例展示，读者可以了解到如何将抽象的数据转化为直观的图表。 2. **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值