在 Tidytuesday Internet Access 中使用 Highcharter
Highcharts是一款纯JavaScript编写的图表库，为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。
Highcharts最新试用版下载【慧都网】
毫无疑问，这场大流行病带来了许多问题，同时也加剧了原有的问题。许多企业、学校或政府程序吸收了数字模型，而其中很大一部分则关门大吉。访问这些数字模型成为一项几乎无法完成的任务。这个问题多年来被忽视的增长现在很明显。宽带差距问题现在不容忽视。🧐
✨ 微软的 The Verge 设计了一篇关于美国带宽缺口问题的文章。他们生成了一张地图，突出显示没有良好互联网连接的县之间的二价性。
在此博客中，您将学习如何使用highcharter和tidyverse生态系统来创建由The Verge创建的地图的基本副本。你准备好了吗？让我们开始吧！🙌
library
您将使用：
- 📈 图表的 highcharter。
- 🪣 看门人来清理数据。
- 📥 tidyTuesdayR 下载数据。
- 📝 tidyverse 用于完整的数据操作。
- 🪞 widgetframe 将图表转换为 iframe。
library(highcharter) library(janitor) library(tidytuesdayR) library(tidyverse) library(widgetframe)
获取数据
本文使用的数据是关于美国Broadbank Usage Percentage Dataset
tuesday_data <- tidytuesdayR :: tt_load ( 2021 , week = 20 )
提取要使用的数据
数据的完整描述可以在这张美国宽带问题地图 Github 链接中找到
broadband <- tuesday_data$broadband %>% glimpse()
下载地图数据
在broadband表中，您将找到五列，其中COUNTY ID表示正在执行宽带使用指标的县的标识符。
因此，COUNTY ID可用于在地图上定位每个县的宽带使用值。您可以使用以下几种替代方法。
但是，在此博客中，您将使用Highchart团队提供的美国地图。
特别是highcharter提供了两个实用功能，用于访问和浏览不同的常用地图：
- download_map_data(): 从 highchartsJS 集合下载 geojson 数据。
- get_data_from_map()：获取地图中每个区域的属性，作为地图数据中的键。
map_layout_data <- download_map_data ( "countries/us/us-all-all.js" )
如果您斜视美国地图的列，您会注意到有一列名为fips; 这些是用于标识美国各县的唯一 5 位代码。所以，如果你考虑到这一点，COUNTY ID和fips列是等效的。是的，您以后可能需要做一些调整，但现在坚持这个想法。👀👌
get_data_from_map(map_layout_data) %>% clean_names() %>% glimpse()
一般预处理
要复制
Microsoft的The Verge地图（即，以下简称target map），您只需关注以下两个变量：
|variable |class |description | |:------------------------------|:---------|:-----------| |county_id |double | County ID | |broadband_usage |character | Percent of people per county that use the internet at broadband speeds based on the methodology explained above. Data is from November 2019. |
但是等等...也许您应该问自己为什么不需要其他指示变量，例如ST或COUNTY NAME？
嗯，那是因为稍后，您将使用由Highcharts（在上一节中描述）提供的表之一来执行每个县的名称映射。但是，如果您不想使用这些提供的映射，您可以保留其他列并使用诸如zipcodeR或 之类的包tigris来帮助您进行正确的映射。🤔
现在，回到一般数据处理，这是一项相对简单的任务。首先，作为一种很好的做法，您将使用包提供的名称将数据列的名称转换为标准名称。通过这种方式，输入列将变得简单、易于记忆且明显合适。😇clean_names()janitor
然后，您会将broadban_usage列从character类型转换为numeric类型。虽然您最初可能会考虑使用 R 基础或，但如果您需要进行手动工作，包中提供了一个有用的界面。选择、清理并处理变量的解析。💻🙌as.numeric()type.convert()type_convert()readertype_converter()
broadband_processed <- broadband %>%
clean_names() %>%
select(county_id, broadband_usage) %>%
type_convert(
col_types = cols(
broadband_usage = col_double()
),
na = "-"
) %>%
glimpse()
为绘图准备数据
我们的数据是干净的，但是，要构建target mapwith highcharter，您需要对其进行一些转换。首先，数据中没有某些地方的宽带使用信息（即带有 的数据NA），county_id并且不是五字符代码，而是四字符代码。因此，您必须在四个字符以下的字符上加一个零。😬✅
此外，还target map展示了两个类别以突出宽带使用问题。具体来说，那些使用宽带速度小于或大于等于 15% 的县。您必须应用此条件对broadband表中的数据进行分类。
最后，是时候将数据转换为highcharter可以理解的格式了。为此，您将创建一个系列列表，为要显示的地图的每个类别创建一个系列。因此，您将用于为每个组创建一个数据子集。然后，您可以为每个系列添加元数据，例如颜色变量。现在，您可以将每个数据子集转换为可以使用.group_nest()highcharterlist_parse()
重要的是，每个子集都有与基本highcharter图表需要的完全相同的列，并带有一些元数据。例如，要重新创建target map，每个类别都有列：名称、值和 fips。其中，只有fips一个元数据变量。😋👉👈
broadband_series_data <- broadband_processed %>%
filter(!is.na(broadband_usage)) %>%
transmute(
# Transform to a fips format ------------------------------------------
fips = str_pad(
string = county_id,
width = 5,
side = "left",
pad = "0"
),
# Categorize data -----------------------------------------------------
value = broadband_usage * 100,
name = if_else(
condition = value < 15,
true = "< 15%",
false = ">= 15%"
)
) %>%
# Transform data so that highcharter accepts it. -------------------------
group_nest(name) %>%
mutate(
color = c("#0B0073", "#B6B8B8"),
data = map(data, list_parse)
) %>%
glimpse()
我需要告诉你，还有另一种方法可以使用dataClasses()来创建分类区域的等值线 😬
但是，老实说，创建 的过程dataClasses在我看来并不像本博客中使用的版本（即使用）那么直观。😅谁知道呢。观察、讨论并在评论中留下您如何创建它们！🧐🥴group_nest()
美国宽带使用百分比图
好吧，您已经完成了大量特技才能到达这里，但现在是创建target map. 你准备好了吗？我们开始做吧！🤭🤭🤭
第一步是将数据映射到图形。为此，您将使用来定义所需图形的类型。highchart()map
接下来，您将定义要如何显示每个数据组。例如，宽带使用率低于或高于 15% 的组。
使用，您可以在绘图时配置每个系列的行为。反过来，您还可以通过在使用 .csv 创建的数据中添加更多元数据列（_e.g._、颜色）来覆盖默认值。因此，当您运行时，它们都会共享 中使用的参数，但是您可以随时随心所欲地覆盖一些 😋hc_plotOptions()list_parse()
hc_add_series_list()hc_plotOptions()
尽管您在上一步中构建了与“目标地图”类似的图形，但现在是添加相应文本注释的时候了。通常，highcharter图表中的HTML不是必需的，更不是强制性的。但是，如果需要，您可以在每个显示文本调用中使用该参数（_例如_ 、、 等）。这样，您定义的所有字符串都将被视为 HTML，并且您可以更好地控制如何以及在何处显示特定文本片段。🤗useHTML = TRUEhc_title()hc_subtitle()
到目前为止的结果应该看起来几乎相同；只有一件事不见了；导航按钮。默认情况下，导航按钮处于禁用状态，因此您必须使用 激活它们。要将其放置在特定位置，请使用参数。有了它，您可以更改与参数,的对齐方式。值得一提的是，您还可以在图例或文本的定位中找到这些参数。🤓hc_mapNavigation()buttonOptionsalignverticalAlign
最好用于在静态页面中显示绘图。在 Rmarkdown 或 Shiny 应用程序中，它可能不是必需的。😬frameWidget()highcharter
highchart(
type = "map"
) %>%
# How do you want to display the data? ----------------------------------
hc_plotOptions(
map = list(
allAreas = FALSE,
joinBy = "fips",
value = "value",
mapData = map_layout_data
),
series = list(
states = list(
inactive = list(
opacity = 0.7
)
)
)
) %>%
hc_add_series_list(broadband_series_data) %>%
# Display text as in original source. -----------------------------------
hc_title(
text = "
<p style='text-align:center;'>
<b>THIS IS A MAP OF AMERICAN'S BROADBAND PROBLEM</b>
<br>
A county-by-county look at the broadband gap
</p>
",
align = "center",
useHTML = TRUE
) %>%
hc_subtitle(
text = "
By Russell Brandom
and William Joel | May 10, 2021, 9:00am EDT
",
align = "center",
useHTML = TRUE
) %>%
hc_caption(
text = "
Map: The Verge. The database does not include broadband rates for
Oglala Lakota County, South Dakota, or Kusilvak Census Area, Alaska,
because of a coding irregularity. Source:
<a href='https://github.com/microsoft/USBroadbandUsagePercentages'>
Microsoft
</a>
-
<a href='https://www.theverge.com/22418074/broadband-gap-america-map-county-microsoft-data'>
Get the data
</a>.
",
useHTML = TRUE
) %>%
hc_legend(
title = list(
text = "
Percentage of people using the internet at 25Mbps or above per county.
"
),
align = "left",
symbolHeight = 12,
symbolWidth = 12,
symbolRadius = 0,
squareSymbol = FALSE
) %>%
hc_tooltip(
pointFormat = "
<b>{point.name}</b><br>
<br>
<b>{point.value}%</b><br>
Percent using broadband speed
",
useHTML = TRUE
) %>%
hc_credits(
text = "
<b>Replica made by: </b>
<a href='https://twitter.com/jvelezmagic'>@jvelezmagic</a>
",
enabled = TRUE,
useHTML = TRUE
) %>%
# Customize zoom options ------------------------------------------------
hc_mapNavigation(
enabled = TRUE,
enableMouseWheelZoom = FALSE,
buttonOptions = list(
align = "right",
verticalAlign = "bottom"
)
) %>%
# Include your favorite theme! -----------------------------------------
hc_add_theme(
hc_thm = hc_theme_elementary()
) %>%
# Display as iframe -----------------------------------------------------
frameWidget() %>%
identity()
