首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答
筛选
回答情况:
全部无回答回答未采纳
提问时间:
不限一周内一月内三月内一年内
回答标签:
javascript

如何实现数据可视化?

提问2018-10-243.2K
DEA林晨曦
以下示例是做一份数据的可视化图表,一步步的来看下我们如何获取数据,以及如何进行可视化的展示。 ? 在上章内容中,提到了关于【数据可视化迭代过程】的步骤,这也能看出整个过程包含的步骤,大致有:1. 确定主题 - 2.数据获得 - 3.图表选择(表达)- 4图表绘制。 当然了我们也可以看到可视化是要一个不断迭代的过程,步骤之间都需要多次的迭代修改的。 确定主题 这肯定是第一步了,在做数据可视化的时候,首先你要明了你要做什么,想要从数据获中取什么信息,有了目标才能明确的往下做。 那我们这次还是来做关于空气质量PM2.5的数据展示,了解历年来PM2.5的实际情况和发展趋势。 数据获得 对于全国空气质量的数据,最权威的来源肯定是来自于中国环境监测总站(http://www.cnemc.cn/) 的数据提供。但是监测总站的API提供的并不是很详细,还有很多第三方也提供类似的API接口,比如PM25.in(http://pm25.in/) ,在API说明上做的很详细,他们的数据每日更新。所以这次我们选择PM25这个网站来获取数据源。 ? 我们可以看到PM25提供的内容是相当多,包括PM2.5、AQI、PM10、CO、NO2、O3等等。我们只需要PM2.5的数据,所以我们把其他不需要的数据都可以去除掉,同时把Json的数据转换为CSV的数据格式,这里转换数据只是为了下一步处理方便,我这边是选用Processing来做数据可视化处理的。如果你用D3.js,Echart来做的话,Json可能会更方便点。 ? 图表选择(表达) 对于很多人(非设计师)来说数据可能容易获取,但是像要把数据转换成合适的图表进行表达反而非常困难的。因为同样的数据,用不同的图表进行展示出来,得到的效果是完全不一样的。在平时我们可能用到最多的就是通过Excel来做的图表,在Excel2010的版本里面,提供了10类共53个图表,还提供了什么数据透视图,自定义图表等等,总之种类非常多。不过尽管图表种类繁多,但其基本类型只有以下几种: 曲线图:用来反映随时间变化的趋势; 柱形图:用来反映分类项目之间的比较,也可以用来反映时间趋势; 条形图:用来反映分类项目之间的比较; 散点图:用来反映相关性或分布关系; 饼图:用来反映构成,即部分占总体的比例; 地图:用来反映区域之间的分类比较; 那知道了基础图表的类型,如何去做图表的选择呢?国外专家Andrew Abela他将图表展示的关系分为4 类:比较、分布、构成、联系。然后根据这个分类和数据的状况给出了对应的图表类型建议。当我们不确定使用什么类型的图表的时候,可以参考下这个图。 ? 图表绘制 俗话说【不会撸码的交互不是好的数据可视化设计师】,虽然现在市面上有各式各样的可视化的方法和工具,但坦白来说【这些可视化工具都是大坑!!!】,要想做好可视化的表现,最好的方式还是需要掌握一门编程语言,只有这样你才能最合适的表达清楚出你想传达出来的数据信息。 这里给各位想跳入数据可视化这个大坑的设计师们(编程大佬请无视),推荐一下Processing这个创意编程语言。 Processing是美国麻省理工学院媒体实验室旗下美学与运算小组创造出来的(就是搞设计的人做出来的编程语言),非常容易上手,代码逻辑也很简单,几段代码就能做出十分出现效果的展示,下图就是Processing的界面。 ? 不过Processing没有代码提示的功能的,用起来还是十分痛苦的,经常是因为一个单词写错了,而造成程序报错。不过后来我发现到Subilme Text能支持Processing的编译环境,而且能提供代码提示功能,简直是发现新大陆一样,从此Processing用起来再也不费劲了。欢迎大家一起入坑Processing一起学习。 确定用Processing来实现后,我们继续来做PM2.5的可视化展示。国家环保部将空气质量分为六个等级,分别用绿、黄、橙、红、紫、褐六个颜色来标注,对于着优、良、轻度污染、中度污染、重度污染和严重污染六个空气质量。我们要展示历年来PM2.5的实际情况和发展趋势,就可以把每天的空气质量转换一个个不同颜色的小方格,通过颜色的区别来展示当天的PM2.5情况。 ? 先在纸上画一个简单的草图。已年为划分,下面用小方格展示该年内每天的空气质量是什么等级,把当天的PM2.5数值转换对应的颜色值。 ? 确定方式后,开始撸代码,代码很简单的,我大概编写了40来行就完成了,代码逻辑很简单就是先导入数据,然后判断当前数据的值是多少,根据不同的值赋予小方块不同的颜色。 ? 实现之后,看起来就是这样子的。日期时间轴是按照1月到12月排列的,通过上面的图示我们可以比较清楚的看到污染程度比较高的时间是集中在开头和结尾,就是1-2月,11-12月之间,也就是每年冬天就是PM2.5污染程度高的时间。 ? 我们继续把成都历史的数据可视化后来看下。我们发现12年之前成都空气质量都还不错的,在14年的时候,就没有小绿格了,可见14年成都空气质量有多差劲,15年、16年后慢慢的开始有点好转。我们在把北京,上海和深圳的天气拔来看看。 ? 第一列是成都08-16年的空气质量,第二列是北京的,第三列是上海的,第四列是深圳的。可见深圳的空气质量完爆成都、北京和上海。几乎全是小绿格,真是宜居好地方。而帝都北京空气质量是这四个城市中最差的。其中14年都是上述几个城市空气质量最差的一年,而也是这一年央视记者柴静从央视辞职出去开始拍摄雾霾的深度调查,在第二年2015年2月28号推出纪录片《穹顶之下》,引发了公众的一片哗然,全民开始关注雾霾,政府部门也开始着手治理雾霾,15年、16年开始有所好转。

document.querySelector始终返回null?arrowLeft 和arrowright获取不到

编辑2023-08-17253
一凡sir
如果document.querySelector始终返回null,可能是由于以下几个原因: 元素选择器不正确:document.querySelector接受一个CSS选择器作为参数,并返回第一个匹配该选择器的元素。请确保你传入的选择器是正确的,否则会返回null。例如,如果你要选择一个类名为"example"的元素,应该使用.yifan-online作为选择器,而不是"yifan-online"。 脚本运行的时机不正确:在脚本中使用document.querySelector方法时,确保代码运行时DOM已经加载完毕。你可以将脚本放在window.onload回调函数中,或者将脚本放在页面底部、异步加载脚本等方式来保证脚本在DOM加载完毕后执行。 元素不存在:如果选择器是正确的,但仍然返回null,那么可能是找不到匹配的元素。请确保要查询的元素确实存在于页面中。

网站各个浏览器兼容性 样式、按钮事件、存储问题、插件的支持都不同,有些更甚用不了,该怎么解决呢?

一凡sir回答已采纳
要解决网站在不同浏览器上的兼容性问题,可以采取以下几个步骤: 1. 浏览器兼容性测试:在不同的浏览器(如Chrome、Firefox、Safari、Edge等)上测试网站的样式、按钮事件和功能是否正常工作。可以使用跨浏览器测试工具(如BrowserStack、Sauce Labs、Browserling等)来简化测试流程。 2. CSS样式兼容性:使用CSS前缀以适应不同浏览器的样式要求。可以使用自动添加前缀的工具(如Autoprefixer)来自动生成兼容各浏览器的CSS样式。 3. JavaScript事件兼容性:对于不同浏览器对事件的支持差异,可以使用JavaScript库或框架(如jQuery、Modernizr、Polyfill等)来解决或规避这些问题。这些库会自动处理浏览器的兼容性问题,确保事件在各个浏览器上正常工作。 4. 存储问题兼容性:使用浏览器原生支持的存储机制,如LocalStorage和SessionStorage,并且避免使用过时的存储方式(如Cookie)。此外,对于不支持某些存储机制的浏览器,可以选择使用JavaScript库(如localForage)来提供一致的跨浏览器存储解决方案。 5. 插件兼容性:如果网站依赖于某些插件(如Flash、Java Applet等),可以考虑使用替代方案或者适配器来解决兼容性问题。另外,随着HTML5的发展,越来越多的功能被原生支持,可以尽量减少对插件的依赖。 最重要的是,及时更新和维护你的网站,关注HTML、CSS和JavaScript的最新标准和规范,以确保网站在不同浏览器上的兼容性。

为什么使用swiper时出现错误?(语言-javascript)?

用户10366443
124125421

想了解一下这段js代码可以在简化一些吗?

编辑2022-11-11101
胖五斤
数字没有大小写之分,不需要调用toLowerCase。 for循环可以考虑用lambda方式写,可以简洁点。 重复的操作,例如getElementById、for循环。可以封装成一个通用的函数。

为什么云函数连接mqtt.js失败?

编辑2022-11-08137
胖五斤
没有包含wx的sdk?例如: <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript"></script>

vue中使用axios跨域请求服务器的api接口?

编辑2022-10-13104
军哥
后端header带上 Access-Control-Allow-Origin

vue 导入tencentcloud-sdk-nodejs模块报错?

编辑2022-10-04374
用户5247360
请问解决了吗?我也遇到这个问题了

shell脚本如何获取 node 执行 js的执行结果 或者返回值?

西门呀在吹雪
httpStatus=`curl -i -s -m 10 $1 |grep HTTP|awk '{print $2}'` if [ $httpStatus ] && [ $httpStatus -eq 200 -o $httpStatus -eq 401 ] ; then echo "http状态码正常,端口已可达:"$httpStatus else echo "未获取到状态码,等待重试" fi 请参考,可以使用管道符接收

如何调用本地PDF插件预览网页中的PDF文件?

编辑2022-07-27110
卖女孩的火柴
用IDM下载下来

DAU reaches the Trial Edition limit?

编辑2022-07-141K
用户7471955
要升级套餐了。 /document/product/269/1671#.EF.BC.88.E4.BA.8C.EF.BC.89.E6.9C.8D.E5.8A.A1.E7.AB.AF.E7.9A.84.E9.94.99.E8.AF.AF.E7.A0.81 图片

Hls.js 怎么获取缓冲区大小,比特率?

编辑2022-07-12238
查看源码如下 get maxBitrate(): number { return Math.max(this.realBitrate, this.bitrate); } 2.用这个参数maxBufferLength试试

云开发静态网站托管脚本静态资源为什么加载失败?

用户9548001
已解决,定位到代码问题

Golang 编译成 Wasm 时报 undefined: syscall.NewLazyDLL?

编辑2022-05-20601
一凡sir
没有这个方法,无法使用

我在安装npm中的nrm,为什么会安装失败?

编辑2022-04-182.3K
用户3136460
安装成功了,警告无需理会

发送axios的post请求后,url中端口号后出现问号+属性名+属性值,但方法能正常执行怎么回事?

编辑2022-04-08553
莫运
已解决,因为input等输入元素是包裹在form表单里的,但提交是给form内的一个按钮绑定的点击事件。点击按钮的时会冒泡触发form表单的行为,改变url,导致页面刷新,虽然方法能正常执行,但页面刷新会使input内的数据丢失。 解决办法给绑定的submit或者click添加prevent后缀,阻止事件冒泡,或者干脆不用form包裹 BLS9VT51CMV8(@_D$BS3$CN.png

如何同步删除localStorage和div里面其中一个的值?

EatRice
您好,您这个删除有一行代码可能要修改一下: list = list.splice(i,1); 否则你的删除不起作用
Hi~
今天想聊点什么呢?
近期活跃用户
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
http://www.vxiaotou.com