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

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

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


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


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


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


image.png


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


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


image.png


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


image.png


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


image.png


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


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

image.png


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


image.png


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

微信图片_20220509103550.gif


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


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


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


image.png


参考内容:


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


2.百科Excel文档

相关文章
|
数据可视化 定位技术 数据格式
|
前端开发
40款奇特的名片设计,吸引大家的眼球《上篇》
  我们都知道,任何企业如果想成功,品牌的形象是至关重要的。如果您的企业的标志是大胆,有创意和独特的,那么人们会记住你的,这意味着你实现你的目标。你经常会发现很多情况下,向初始的人传递您的详细信息,名片是唯一的选择。
953 0
|
6月前
|
前端开发
灯光效果,触手可及:CSS动画让网页设计更出彩!
灯光效果,触手可及:CSS动画让网页设计更出彩!
|
前端开发 HTML5 移动开发
200佳国外创意设计网站推荐(系列十八)
您可能还喜欢 寻找网页设计灵感的27个最佳网站推荐 最新30个漂亮的个人作品集网页设计案例 分享35个非常漂亮的单页网站设计案例 60佳灵感来自大自然的网页设计作品欣赏 分享100佳精美的作品集网站设计案例   这个系列将向大家200佳国外创意设计网站,包括网页设计、名片设计、LOGO设计和包装设计等等,设计师们可通过这些网站收集的优秀设计作品来获取灵感,进而设计出更具有创意的作品,设计师们也可以把自己得意的作品提交到这些网站,分享给其它的设计师朋友。
1098 0
30个令人惊叹的灵感来自自然风光的网站设计《下篇》
  设计师使用精致的充满吸引力的宽屏图片作为背景,给来网站带来一种别样的特色。现在网络上有成千上万的图片可供选择,根据您的设​​计和需求,你可以把普通图像变成一个功能强大的工具,以吸引你的客户。   让我们来仔细看看这些自然景观风格的网站,展示了户外的唯美。
846 0
|
前端开发 JavaScript HTML5
激发灵感:26个清爽的蓝色调网页设计作品欣赏
  作为最冷的色调,蓝色是设计师使用最多的颜色之一。蓝色表现出一种沉稳、冷静、理智、安详与广阔,常用在强调科技,效率的商品或企业形象。今天这篇文章收集了26个清爽的蓝色风格网页设计作品分享给大家,一起欣赏。
1096 0
|
30天前
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
33 2
|
前端开发 HTML5 移动开发
200佳优秀的国外创意网站推荐(系列十九)
  这个系列将向大家200佳非常有用的创意设计网站,包括网页设计、名片设计、LOGO设计和包装设计等等,设计师们可通过这些网站收集的优秀设计作品来获取灵感,进而设计出更具有创意的作品,设计师们也可以把自己得意的作品提交到这些网站,分享给其它的设计师朋友。
965 0
|
计算机视觉
一起欣赏:50+ 极具创意的个人简历设计【下篇】
  这篇文章收集了50+非常有创意的简历设计作品与大家分享,相比国内求职者中规中矩的简历,这些国外的简历设计非常新颖,让人眼前一亮!一份让人眼前一亮的简历也许就能带给你一份不错的工作,一起欣赏! 您可能感兴趣的相关文章 分享30个非常有创意的简历设计 25幅独特的字符头像艺术作品欣赏 ...
904 0
|
前端开发 HTML5 移动开发
引领网页设计潮流的优秀网页作品赏析《第三季》
  每天都有很多新的网站推出,其中不乏一些设计极其优秀的作品。这个系列的文章,我为大家挑选了2012年赢得 CSS Awards 大奖的50个最佳网站。这些鼓舞人心的网站作品代表了网页设计的最高水平,相信你可以得到很大的启发。
828 0

热门文章

最新文章