在 Tidytuesday Internet Access 中使用 Highcharter

Highcharts是一款纯JavaScript编写的图表库，为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

毫无疑问，这场大流行病带来了许多问题，同时也加剧了原有的问题。许多企业、学校或政府程序吸收了数字模型，而其中很大一部分则关门大吉。访问这些数字模型成为一项几乎无法完成的任务。这个问题多年来被忽视的增长现在很明显。宽带差距问题现在不容忽视。🧐

✨ 微软的 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），您只需关注以下两个变量：

但是等等…也许您应该问自己为什么不需要其他指示变量，例如ST或COUNTY NAME？
嗯，那是因为稍后，您将使用由Highcharts（在上一节中描述）提供的表之一来执行每个县的名称映射。但是，如果您不想使用这些提供的映射，您可以保留其他列并使用诸如zipcodeR或 之类的包tigris来帮助您进行正确的映射。🤔

现在，回到一般数据处理，这是一项相对简单的任务。首先，作为一种很好的做法，您将使用包提供的名称将数据列的名称转换为标准名称。通过这种方式，输入列将变得简单、易于记忆且明显合适。😇clean_names()janitor

然后，您会将broadban_usage列从character类型转换为numeric类型。虽然您最初可能会考虑使用 R 基础或，但如果您需要进行手动工作，包中提供了一个有用的界面。选择、清理并处理变量的解析。💻🙌as.num

eric()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 应用程序中，它可能不是必需的。😬frameWidge

t()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 = "THIS IS A MAP OF AMERICAN’S BROADBAND PROBLEM


 A county-by-county look at the broadband gap
 ",

 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:

​
 Microsoft
​

 -

​
 Get the data
​.

 ",

 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 = "

{point.name}



{point.value}%

 Percent using broadband speed

 ",

 useHTML = TRUE

 ) %>%

 hc_credits(

 text = "

Replica made by: 
​​@jvelezmagic​​

 ",

 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()