3分钟画出酷炫动态地图的秘诀!(下)

简介: 今天来聊聊地图可视化

经常使用的功能可以分成四类,我们逐一来探究。


地图可视化类型选择,这里主要有堆积、簇形柱状图,有气泡图,有热力图,还有区域颜色区分图。


源数据地域数据在系统内做匹配,比如省一级的,我们可以选择“省/市/自治区”,城市一级别的,可以选择“城市”(这里以更细化的数据为准)。如果还有更细致的具体收获地址,可以选择“街道”。


地区匹配上了,我们感兴趣的是每个地区数值大小,比如我们关心每个城市销售额高低,就把销售额字段添加到“高度”:


image.png


销售额高低对应着柱子的高度,如果选择的是热力图,会对应着颜色的深度。


我们还想要用颜色来区分省份,让不同的省份柱子颜色呈现出差异化,就需要设置类别了,这里我们把“省份”添加进类别:


image.png


在讲动态之前,先学习怎么样让地图变得更加好看:


image.png


导航栏有主题选项,提供了不同风格的主题,一般我会选择酷酷的黑色。


image.png


怎么样,是不是比原生的养眼多了?


然后,在右侧图形选项下,根据实际情况设置图形,比如我们想让柱子整体更高,就把高度比例调大,像让每根柱子更加厚实,调整对应厚度,不透明度,对应类别颜色的设置也是如此。

image.png


3D柱状图地图我们基本搞定了,接下来该让图形动起来了。只需要把付款时间添加到“时间”选项:


image.png


这样,左下方的可视化区域就多了一个时间轴,点击播放按钮,各个柱子会自己动起来:

微信图片_20220509103550.gif


小功告成!热力图和其他类型换个格式也能轻松实现。


受限于电脑老旧+渣录屏软件,实际播放效果比这个酷N倍。具体播放速率、旋转形态、多图叠加等细节大家也可以自己DIY。


最后,由于我们是上帝视角俯瞰,地图区域显示的很粗糙。不过,拉近视角,区域也能看的非常细致:


image.png


参考内容:


1.可乐数据分析之路:Excel做数据地图


2.百科Excel文档

相关文章
|
前端开发 JavaScript
中秋之美——html+css+js制作中秋网页
中秋之美——html+css+js制作中秋网页
667 0
中秋之美——html+css+js制作中秋网页
|
3月前
|
前端开发 JavaScript
还在为酷炫css动画背景头疼吗?1分钟解决
还在为酷炫css动画背景头疼吗?1分钟解决
|
数据可视化 定位技术 数据格式
|
移动开发 前端开发 HTML5
分享30个打动你的摄影师作品集网站
  摄影师如何能够使他们的作品脱颖而出呢?精心设计的美妙的作品集可以很好的证明摄影师的优秀和独特。摄影作品集网站可以见证摄影师的个性,能力和创造力。在这里集合了30个可以打动你的摄影师作品集网站,向下滚动和享受! 您可能感兴趣的相关文章 经典网页设计:超炫动画效果单页网站 30个独具匠心...
1728 0
|
Web App开发
25个精美的个人作品集网站,激发灵感
  我的大多数朋友都是网页设计师或开发人员,其中大部分人都已经创建了自己的个人作品集网站来展现技能并链接到他们以前的作品。有一个在线的作品组合,并保持它的更新对于专业人士是至关重要的,它绝不是仅限于那些从事 Web 设计和开发工作的人。
932 0
|
UED HTML5 移动开发
另类网页设计:30个复古怀旧风格的网站作品
  复古怀旧风格的网页设计是一种独特的网页设计模式。在过去的几年里,我们看到很多复古设计的例子,其中的一些看起来真的很不错,并提供出色的用户体验。当然,复古设计不是适合任何类型的网站,设计必须是故事的一部分并有适应的业务领域,但是如果应用得当,效果是惊人的!这里是30个美丽的复古设计的网站,一起欣赏。
1598 0
太有才了!街头创意涂鸦手绘图片欣赏【上篇】
  传统的涂鸦艺术家一般使用油漆来实现自己的作品,“街头艺术”包含了许多其他的媒体和技术,包括:LED艺术,马赛克瓷砖,壁画,模板艺术,贴纸艺术,街头雕塑,街道装置,视频投影等等。   投影到大型城市建筑形式的涂鸦是一种新的媒体形式,越来越流行。
993 0
|
前端开发
40款奇特的名片设计,吸引大家的眼球《上篇》
  我们都知道,任何企业如果想成功,品牌的形象是至关重要的。如果您的企业的标志是大胆,有创意和独特的,那么人们会记住你的,这意味着你实现你的目标。你经常会发现很多情况下,向初始的人传递您的详细信息,名片是唯一的选择。
944 0
|
前端开发 JavaScript HTML5
激发灵感:26个清爽的蓝色调网页设计作品欣赏
  作为最冷的色调,蓝色是设计师使用最多的颜色之一。蓝色表现出一种沉稳、冷静、理智、安详与广阔,常用在强调科技,效率的商品或企业形象。今天这篇文章收集了26个清爽的蓝色风格网页设计作品分享给大家,一起欣赏。
1077 0