tableau 自定义图表_一种新的十六进制美国地图布局的案例-Tableau中的自定义图表

tableau 自定义图表

For whatever reason,

无论出于什么原因

maps are cool. Even though the earth has mostly been the same since those 地图很酷 。 即使自Pangaea days, we humans make and remake maps constantly. It might be that old maps remind us of how things used to be while new maps remind us of how fast things change. Maybe, it’s the geometric shapes and patterns that draw our attention to affect our psyche at a deep level.Pangea时代以来地球大体相同,我们人类仍在不断制作和重新制作地图。 可能是旧地图使我们想起了过去的事物,而新地图使我们想起了事物变化的速度。 也许是几何形状和图案吸引我们的注意力从深层次上影响我们的心理。

地图的双重任务 (The map’s dual mandate)

Throughout our lives, maps often fulfill multiple needs as they straddle the line between art and science. On the one hand, maps are supposed to be a representation of the land — a precise account of the world’s geography. But on the other hand, people need to connect maps to understand what they have to say. Without connection, maps are no good and people are lost.

在我们的一生中,地图常常跨越艺术与科学之间的界限,因此可以满足多种需求。 一方面,地图应该被认为是土地的代表-世界地理的精确描述。 但是另一方面,人们需要连接地图才能理解他们所说的话。 没有联系,地图就不好了,人会迷路。

There was a time when it was understood that maps should be to scale, or in other words, the relative distances between illustrations on a map equaled the same distance between things on the ground.

曾经有一段时间,人们了解到地图应该按比例绘制,换句话说,地图上插图之间的相对距离等于地面上事物之间的相同距离。

However, when it makes sense, we stretch and skew maps to fit our needs. As a result, instead of a map with tangled spaghetti in the city center with long strands that stretch into the suburbs, we want an even distribution of information and art throughout the whole system.

但是,在有意义的情况下,我们会拉伸和倾斜地图以适合我们的需求。 结果, 我们希望在整个系统中均匀分布信息和艺术 ,而不是在市中心缠绕长条面条的地图

As an example, take a look at early versions of the Underground tube map that first adhered to scale only to evolve into a scheme of pleasing colors and evenly spaced geometries. Beautiful.

例如,看一看地下管图的早期版本,该图最初坚持按比例绘制 ,只是演变成令人愉悦的颜色和均匀间隔的几何形状的方案。 美丽。

今日Data Viz中的地图 (Maps in Data Viz Today)

Given the dual mandate of art and science, it is no surprise that maps are the basis for so many data visualizations.

鉴于艺术和科学的双重任务,地图是众多数据可视化的基础也​​就不足为奇了。

In recent years, we’ve come to know tile and hex maps as the backdrop to many interesting data stories. An article by Kevin and Ken Flerlage does a nice job of capturing the brief history of the hex, NPR documented their tessellation from tiles to hex, and FiveThirtyEight makes great use of the tile to convey complex stories across an even playing field.

近年来,我们已经知道平铺和十六进制地图是许多有趣数据故事的背景。 Kevin和Ken Flerlage的一篇文章很好地捕捉了十六进制的简要历史, NPR记录了它们从图块到十六进制的细分情况 ,而FiveThirtyEight很好地利用了图块在均匀的游戏环境中传达复杂的故事。

In some ways, that last bit about an even playing field is the most important part. For instance, having tile and hex maps help normalize visualizations so that we get an apples-to-apples comparison. When we look to compare things about states that have little or nothing to do with geographic size, normalizing the visual makes sense.

从某些方面来说,关于公平竞争的最后一点是最重要的部分。 例如, 具有平铺和十六进制地图有助于标准化可视化效果,以便我们进行苹果对苹果的比较。 当我们希望比较与地理大小几乎没有关系的州的事物时,归一化视觉是有意义的。

十六进制地图的挑战 (Challenges with Hex Maps)

However, while preparing a visualization for another story that I’m researching, I realized that tile and hex maps have three key drawbacks. First, it is tough to account for tightly packed East Coast states when using evenly spaced tiles or hexagons. Second, too many sacrifices are made with the relative location of states to accommodate both small and large states. Third, placing a state in the wrong location can alienate the audience and thus, break the opportunity for connection.

但是,在为我正在研究的另一个故事准备可视化文件时,我意识到平铺和十六进制地图具有三个主要缺点。 首先,当使用间距均匀的瓷砖或六边形时,很难考虑紧密堆积的东海岸状态。 其次,国家的相对位置做出了太多牺牲,无法容纳大小国家。 第三,将状态放置在错误的位置可能会使观众疏远,从而破坏联系的机会。

Generally speaking, a person should be able to look at a map and agree that things are where they should be.

一般而言,一个人应该能够查看地图并同意事物应该在其应有的位置。

Screenshot of a Tableau tutorial’s version of the US Hex map. The DC hex is highlighted to illustrate a problem in geography.
Tableau Tutorial.Tableau教程 。

地图就是故事 (The map is the story)

At first, I tried to ignore the mapping problem and work on the actual story but I could not separate one from the other. The problem is that I wanted the benefits of a hex map but also needed to depict a better way to show where D.C. is, relative to the states.

起初,我试图忽略映射问题并处理实际故事,但我无法将它们彼此分开。 问题是我想要一个十六进制图的好处,但还需要描绘一种更好的方法来显示相对于状态的DC位置。

Eventually, the map became the story as I obsessed over a long weekend about a better way to approach the problem. The result is this proposal for a new hex map of the United States.You can find in my workbook in the link below.

最终,地图成为故事,我一个长周末痴迷过一个更好的办法来解决这个问题。 结果是针对美国的新十六进制地图的建议。您可以在我的工作簿中的以下链接中找到。

问题,规则,妥协 (Problems, Rules, Compromises)

With my proposed hex map, the following is a list of specific problems that I hope to solve, rules to stick by, and compromises that I made.

使用我建议的十六进制映射,以下列出了我希望解决的特定问题,需要遵循的规则以及做出的妥协。

  1. I like the aesthetic of the hex map and decided to focus on how to get a hex map to work without relegating Washington, D.C., into the middle of the Atlantic Ocean.

    我喜欢六边形图的美感,并决定专注于如何在不将华盛顿特区降级到大西洋中部的情况下使六边形图起作用。
  2. I try to honor the relative position of one state to another. For example, North Dakota should always be above South Dakota and the same goes for North Carolina and South Carolina. However, I compromised on the four-way Utah, Colorado, Arizona, New Mexico border to preserve the appearance of the Southwest.

    我试图尊重一个国家与另一个国家的相对地位。 例如,北达科他州应始终位于南达科他州之上,北卡罗莱纳州和南卡罗莱纳州也应如此。 但是,我在四向犹他州,科罗拉多州,亚利桑那州和新墨西哥州的边界折衷以保留西南的外观。
  3. Tennessee and Missouri each share borders with eight other states — how to convey these relationships with hexagons? A little extra padding.

    田纳西州和密苏里州分别与其他八个州接壤-如何用六边形传达这些关系? 一点额外的填充。
  4. Similarly, Texas and California both touch many states but have the added challenge of being two of the three largest states by land area. Getting the map to look like the United States becomes tough when making a smaller state like Rhode Island into the same shape and size as Texas.

    同样,得克萨斯州和加利福尼亚州都触及许多州,但要成为土地面积最大的三个州中的两个州则面临着更大的挑战。 将像罗德岛州这样的小州变成与得克萨斯州相同的形状和大小时,使地图看起来像美国变得困难。

  5. Most of the maps I found on the Internet insist on having all the tiles touch each other. Instead, why not have some padding, but just enough make the map visually appealing?

    我在互联网上找到的大多数地图都坚持让所有图块相互接触。 取而代之的是,为什么不添加一些填充,而足以使地图具有视觉吸引力?
  6. Despite learning how to make a custom chart from a really good Tableau blog tutorial, I could not find a ‘ready to go’ template that fit my criteria. As a result, with this story, I hope that anyone who wants to solve this problem can have access to my solution.

    尽管从一个非常好的Tableau博客教程中学习了如何制作自定义图表,但我找不到适合我条件的“准备就绪”模板。 因此,有了这个故事,我希望任何想解决这个问题的人都可以使用我的解决方案。

(Solution)

To get a feel for how to make a custom hex map in Tableau, think about plotting a table of states with X and Y coordinates. When combined with any other table with data organized by state, we can produce a graph that looks like the United States.

若要了解如何在Tableau中制作自定义十六进制贴图,请考虑绘制带有X和Y坐标的状态表。 当与任何其他具有按州组织的数据的表结合使用时,我们可以生成一个类似于美国的图形。

For a full step-by-step, the Tableau blog works nicely, but I recommend working through four modifications and tips below. Grab my workbook from here or build it from scratch with the two tables and hex PNG that follow below.

要获得完整的逐步介绍, Tableau博客可以很好地运行,但是我建议您通过以下四个修改和技巧进行工作。 从这里获取我的工作簿,或者使用下面的两个表格和十六进制PNG从头开始构建它。

First, try loading the following table into Tableau and visualize the points. The X values go to the Column bar and Y values go to the Row bar.

首先,尝试将下表加载到Tableau中并可视化这些点。 X值转到列栏,Y值转到行栏。

Plot each state with an X and Y coordinate in Tableau.
在Tableau中用X和Y坐标绘制每个状态。

If you’re playing along at home, know that you can update coordinates in the table from a program like MS Excel and then refresh Tableau. When the workbook refreshes, icons will move around the sheet according to the new coordinates. This is helpful when fine-tuning your look and feel.

如果您在家中玩耍,请知道您可以通过MS Excel之类的程序更新表中的坐标,然后刷新Tableau。 当工作簿刷新时,图标将根据新坐标在图纸上移动。 在微调外观时,这很有用。

To produce coordinates in the first place, I started with a PowerPoint sketch. Below is an example of how I conceptualized what this might look like in a coordinate system.

首先要生成坐标,我从PowerPoint草图开始。 以下是我如何概念化坐标系统中的外观的示例。

Screenshot of a US Map with a grid overlay and hex tiles drawn as a sketch in Microsoft PowerPoint to think about coordinates
Trying to figure out what it should look like, with coordinates in PowerPoint.
尝试用PowerPoint中的坐标找出它的外观。

Second, I drew my own hexagon using PowerPoint and saved the resulting PNG file to My Tableau Repository. My version of how this works is below and the hex file can be downloaded from my GitHub. Importantly, you can draw anything in PowerPoint and export it to become a custom shape in Tableau. Lots of possibilities.

其次,我使用PowerPoint绘制了自己的六边形,并将生成的PNG文件保存到My Tableau存储库中。 我的工作方式如下所示,并且可以从GitHub下载 hex文件。 重要的是,您可以在PowerPoint中绘制任何内容并将其导出以在Tableau中成为自定义形状。 很多可能性。

New folder and hex icon displayed in My Tableau Repository. Arrows direct how to click on Shapes and to load them in Tableau.
My version of how to create and use custom shapes in Tableau.
关于如何在Tableau中创建和使用自定义形状的我的版本。

Third, I wanted to see how well (or not well) this hex map design conveyed information. I thought it would be interesting to see how it does with legalization status. To do so, I copied a table from Wikipedia and used it to create a version that would plot well by categorizing the status of Recreational and Medical use.

第三,我想看看这种六角形地图设计传达信息的程度(或不好)。 我认为看看它与合法化身份的关系会很有趣。 为此,我从Wikipedia复制了一个表格,并使用它创建了一个版本,该版本可以通过对娱乐和医疗用途的状态进行分类来很好地进行绘制。

For example purposes only, the below table can be joined with the hex map on the State Abbreviation field to create a visual with different dimensions, colors, and labels.

仅出于示例目的,下表可以与“状态缩写”字段上的十六进制贴图结合在一起,以创建具有不同尺寸,颜色和标签的视觉效果。

This story is does not constitute legal advice, and I make no representations about the status of legalization — this is just for illustration.

这个故事并不构成法律建议,我不对合法化的状况做任何表述,这仅是为了说明。

This is not legal advice! 这不是法律建议! See Wikipedia source for details.有关详细信息,请参见Wikipedia源。

Fourth, adjust the icon size, colors, and dimensions. The result is an interactive graph that displays by color, label, and detail.

第四,调整图标的大小,颜色和尺寸。 结果是一个交互式图形,按颜色,标签和详细信息显示。

The proposed US Hex Map from Tableau Public with details on Texas showing in mouse hover. Red, Blue, Yellow, and Green hexes.
Tableau Public hex map. Status by color and displaying state abbreviation and one other field. On mouse hover, more detail and other information.Tableau Public十六进制地图的屏幕截图。 按颜色显示状态,并显示状态缩写和另一个字段。 关于鼠标悬停,更多详细信息和其他信息。

There is a good case for using both tile and hex maps, but they come with many compromises. Depending on who your audience is, you may want to adjust how you decided to deliver information. This hex map proposal is definitely not new, but it offers a different way to get there by mostly preserving the relative location of states and including D.C. into the map.

同时使用平铺贴图和十六进制贴图是一个很好的例子,但是它们有很多折衷。 根据您的听众是谁,您可能需要调整决定提供信息的方式。 这个十六进制地图提议绝对不是新手,但它通过保留大多数州的相对位置并将DC包含在地图中而提供了一种到达那里的不同方法。

Lastly, whether you believe in the hex map, you can take these methods with you to create custom visualizations in Tableau.

最后,无论您是否相信十六进制映射,都可以使用这些方法在Tableau中创建自定义可视化。

Cheers!

干杯!

翻译自: https://uxdesign.cc/the-case-for-a-new-hex-map-379c088b60c

tableau 自定义图表

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274886.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2022,前端工具链十年盘点

大家好,我是若川。持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列2021 …

书籍排版学习心得_为什么排版是您可以学习的最佳技能

书籍排版学习心得重点 (Top highlight)I was introduced to design in a serpentine fashion. I don’t have any formal training. Instead, I’ve learned everything through the Web, books, and by interacting with designers daily.我被介绍为蛇形设计。 我没有任何正规…

若川的 2021 年度总结,弹指之间

1前言从2014年开始,每一年都会写年度总结,已经坚持了7个年头。7年的光阴就是弹指之间,转瞬即逝。正如孔子所说:逝者如斯夫,不舍昼夜。回顾2014,约定2015(QQ空间日志)2015年总结&…

线框图用什么软件_为什么要在线框中着色?

线框图用什么软件I was recently involved in a debate around why some wireframes (which were definitely not UI screens) were not 100% greyscale. This got me thinking — when is it ok to use colour in wireframes, and when is it going to cause you problems fur…

Linux 内核

Linux 内核是一个庞大而复杂的操作系统的核心,不过尽管庞大,但是却采用子系统和分层的概念很好地进行了组织。通过本专题,我们可以学习 Linux 的分层架构、内核配置和编译、内核性能调试和 Linux 2.6 中的许多提升功能。Linux 内核组成 Linux…

给asterisk写app供CLI调用

环境:CentOS6.2 Asterisk 1.8.7.1 一、添加源文件 复制app_verbose.c为app_testApp.c 复制app_verbose.exports为app_testApp.exports 主要是修改一些标识,编译不会出错就行,这里列出我进行的主要修改。 1、添加头文件 #include "aster…

前端,校招,面淘宝,指南

大家好,我是若川。持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列虽然是…

qq空间网页设计_网页设计中负空间的有效利用

qq空间网页设计Written by Alan Smith由艾伦史密斯 ( Alan Smith)撰写 Negative space is a key design element that you may come across in the fields of art, architecture, interior design, landscaping and web design. Rather than serving as awkward, empty areas …

Git 和 GitHub 教程——版本控制入门

大家好,我是若川。持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列Learn…

matlab中的:的优先级_内容早期设计:内容优先

matlab中的:的优先级By Simone Ehrlich, Content Strategy Manager由 西蒙埃利希 ,内容策略经理 Words are cheap. Cheaper than wires; cheaper than mocks. That doesn’t mean words aren’t important, just less expensive to produce as a design asset. So …

我真的哭了,哭过后呢(-)

这些是山区的孩子们! 这是他们的教室。这个也算是!如此的师资力量自己解决吃饭问题冬天到了,一起烤烤火与泥土污水一起还好,最大的数字只是10老师抱着孩子来给我们上课了不知道山那边会是什么呢?又一双充满了渴望的大眼…

脑裂问题解决方案_从解决方案到问题

脑裂问题解决方案Once upon a time a couple of years ago, one of my mentors (and favourite people in the world) repeatedly drilled the idea above into my brain. Her advice for Product people was to “fall in love with the problem, not the solution”. At the …

Vue.js 官方团队成员霍春阳新作,深入解析 Vue.js 设计细节【文末送书】

霍春阳(Hcy),Vue.js 官方团队成员。专注于 Web 研发领域,是 Vue.js 3 的核心贡献者之一,Vue.js 文档生成工具 Vuese 的作者,技术社区活跃者,曾撰写大量颇受好评的技术博客。经过一年的准备&…

LINQ之路 5:LINQ查询表达式

书写LINQ查询时又两种语法可供选择:方法语法(Fluent Syntax)和查询表达式(Query Expression)。 LINQ方法语法的本质是通过扩展方法和Lambda表达式来创建查询。C# 3.0对于LINQ表达式还引入了声明式的查询表达式&#xf…

调查谋杀案以换取Obra Dinn

回顾性 (RETROSPECTIVE) I am not sure if this is intentional, but Lucas Pope has a knack for turning the mundane into something special. This was evident in his release of Papers Please. In that game, you’re a border patrolman trying to provide for your fa…

9年前的大一,我们这样为女生过37女生节【祝节日快乐】

这是一篇水文~没啥目的,若说要有,就是希望大家参加源码共读学起来。公众号后台显示所有读者朋友中大约有23%的女生。前端工程师中女生应该占比相对多些。祝关注我公众号的女生3.7女生节快乐,大部分公司明天应该都有半天假期。可以留言大学时你…

requests模块发送带headers的Get请求和带参数的请求

1.在PyCharm开发工具中新建try_params.py文件; 2.try_params.py文件中编写代码: import requests#设置请求Headers头部header {"User-Agent" : "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;"}#请求输入参数p…

面试官问:跨域请求如何携带cookie?

大家好,我是若‍川。持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列本文…

ux设计中的各种地图_移动应用程序设计中的常见UX错误

ux设计中的各种地图Have you ever tried a new app, only to realize you have no idea how to use it?您是否曾经尝试过一个新的应用程序,却发现自己不知道如何使用它? Few things can transport a person from calm and happy, to frustrated and an…

如何使用 Node 后端创建 React 应用程序:完整指南

大家好,我是若川。持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列React…