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

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

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


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


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


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


image.png


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


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


image.png


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


image.png


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


image.png


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


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

image.png


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


image.png


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

微信图片_20220509103550.gif


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


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


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


image.png


参考内容:


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


2.百科Excel文档

相关文章
|
2月前
|
前端开发 JavaScript
还在为酷炫css动画背景头疼吗?1分钟解决
还在为酷炫css动画背景头疼吗?1分钟解决
|
11月前
|
安全 iOS开发
让人惊艳的高级配色,让你的色彩灵感爆棚!
让人惊艳的高级配色,让你的色彩灵感爆棚!
78 0
|
数据可视化 定位技术 数据格式
N900当初的绚丽宣传片
N900虽然已经发布了一年多,但是,它还是NOKIA最具可玩性的一款手机,当初的宣传片也可以看出NOKIA本想大力宣传这款性能强劲的旗舰机型。
662 0
Path – 很漂亮,但走错了路子
  两个前 Facebook 员工的新创意,造了很久势的 Path 终于发布了它的 iOS 应用程序。尽管从截图上看,这跟当初他们公布的创意已经大相径庭,我还是第一时间下载体验,新鲜有趣的应用总是智能手机上的一抹亮彩。
777 0
|
前端开发 容器 流计算
如何用纯 CSS 创作一只徘徊的果冻怪兽
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/VdOKQG 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
902 0
|
UED HTML5 移动开发
另类网页设计:30个复古怀旧风格的网站作品
  复古怀旧风格的网页设计是一种独特的网页设计模式。在过去的几年里,我们看到很多复古设计的例子,其中的一些看起来真的很不错,并提供出色的用户体验。当然,复古设计不是适合任何类型的网站,设计必须是故事的一部分并有适应的业务领域,但是如果应用得当,效果是惊人的!这里是30个美丽的复古设计的网站,一起欣赏。
1596 0
|
移动开发 前端开发 HTML5
五彩缤纷!13个学习网站配色技巧的绝佳案例
  使用恰当的调色板是网页设计过程中最重要的部分,也是最困难的部分。通常现有的品牌对于采用什么颜色影响最大,但也可能有其它因素发挥作用。例如,要为网站的访问者定下的基调和情绪主要是由颜色决定。   这篇文章,我们收集了一组优秀配色的网页作品,为您提供很好的启发。
1079 0