彩票走势图

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

点击下载Highcharts最新试用版

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

在此博客中，您将学习如何使用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" )

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. | 

嗯，那是因为稍后，您将使用由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()

美国宽带使用百分比图

好吧，您已经完成了大量特技才能到达这里，但现在是创建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='//github.com/microsoft/USBroadbandUsagePercentages'>
        Microsoft
      </a> 
       - 
      <a href='//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='//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()