Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網(wǎng)站、Web應(yīng)用程序提供直觀、交互式圖表。當(dāng)前支持折線、曲線、區(qū)域、區(qū)域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區(qū)域排列圖、區(qū)域曲線排列圖、柱形排列圖、極坐標(biāo)圖等幾十種圖表類型。

點擊下載Highcharts最新試用版

毫無疑問，這場大流行病帶來了許多問題，同時也加劇了原有的問題。許多企業(yè)、學(xué)?；蛘绦蛭樟藬?shù)字模型，而其中很大一部分則關(guān)門大吉。訪問這些數(shù)字模型成為一項幾乎無法完成的任務(wù)。這個問題多年來被忽視的增長現(xiàn)在很明顯。寬帶差距問題現(xiàn)在不容忽視。??

在此博客中，您將學(xué)習(xí)如何使用highcharter和tidyverse生態(tài)系統(tǒng)來創(chuàng)建由The Verge創(chuàng)建的地圖的基本副本。你準(zhǔn)備好了嗎？讓我們開始吧！??

library

您將使用：

• ?? 圖表的 highcharter。
• ?? 看門人來清理數(shù)據(jù)。
• ?? tidyTuesdayR 下載數(shù)據(jù)。
• ?? tidyverse 用于完整的數(shù)據(jù)操作。
• ?? widgetframe 將圖表轉(zhuǎn)換為 iframe。

library(highcharter)
library(janitor)
library(tidytuesdayR)
library(tidyverse)
library(widgetframe)

本文使用的數(shù)據(jù)是關(guān)于美國Broadbank Usage Percentage Dataset

tuesday_data <- tidytuesdayR :: tt_load ( 2021 , week = 20 ) 

數(shù)據(jù)的完整描述可以在這張美國寬帶問題地圖 Github 鏈接中找到

broadband <- tuesday_data$broadband %>%
  glimpse()

在broadband表中，您將找到五列，其中COUNTY ID表示正在執(zhí)行寬帶使用指標(biāo)的縣的標(biāo)識符。
因此，COUNTY ID可用于在地圖上定位每個縣的寬帶使用值。您可以使用以下幾種替代方法。
但是，在此博客中，您將使用Highchart團(tuán)隊提供的美國地圖。
特別是highcharter提供了兩個實用功能，用于訪問和瀏覽不同的常用地圖：

• download_map_data(): 從 highchartsJS 集合下載 geojson 數(shù)據(jù)。
• get_data_from_map()：獲取地圖中每個區(qū)域的屬性，作為地圖數(shù)據(jù)中的鍵。

map_layout_data <- download_map_data ( "countries/us/us-all-all.js" )

get_data_from_map(map_layout_data) %>%
  clean_names() %>% 
  glimpse() 

要復(fù)制
Microsoft的The Verge地圖（即，以下簡稱target map），您只需關(guān)注以下兩個變量：

|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（在上一節(jié)中描述）提供的表之一來執(zhí)行每個縣的名稱映射。但是，如果您不想使用這些提供的映射，您可以保留其他列并使用諸如zipcodeR或 之類的包tigris來幫助您進(jìn)行正確的映射。??

現(xiàn)在，回到一般數(shù)據(jù)處理，這是一項相對簡單的任務(wù)。首先，作為一種很好的做法，您將使用包提供的名稱將數(shù)據(jù)列的名稱轉(zhuǎn)換為標(biāo)準(zhǔn)名稱。通過這種方式，輸入列將變得簡單、易于記憶且明顯合適。??clean_names()janitor

然后，您會將broadban_usage列從character類型轉(zhuǎn)換為numeric類型。雖然您最初可能會考慮使用 R 基礎(chǔ)或，但如果您需要進(jìn)行手動工作，包中提供了一個有用的界面。選擇、清理并處理變量的解析。????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()

我們的數(shù)據(jù)是干凈的，但是，要構(gòu)建target mapwith highcharter，您需要對其進(jìn)行一些轉(zhuǎn)換。首先，數(shù)據(jù)中沒有某些地方的寬帶使用信息（即帶有 的數(shù)據(jù)NA），county_id并且不是五字符代碼，而是四字符代碼。因此，您必須在四個字符以下的字符上加一個零。???

此外，還target map展示了兩個類別以突出寬帶使用問題。具體來說，那些使用寬帶速度小于或大于等于 15% 的縣。您必須應(yīng)用此條件對broadband表中的數(shù)據(jù)進(jìn)行分類。

最后，是時候?qū)?shù)據(jù)轉(zhuǎn)換為highcharter可以理解的格式了。為此，您將創(chuàng)建一個系列列表，為要顯示的地圖的每個類別創(chuàng)建一個系列。因此，您將用于為每個組創(chuàng)建一個數(shù)據(jù)子集。然后，您可以為每個系列添加元數(shù)據(jù)，例如顏色變量?，F(xiàn)在，您可以將每個數(shù)據(jù)子集轉(zhuǎn)換為可以使用.group_nest()highcharterlist_parse()

重要的是，每個子集都有與基本highcharter圖表需要的完全相同的列，并帶有一些元數(shù)據(jù)。例如，要重新創(chuàng)建target map，每個類別都有列：名稱、值和 fips。其中，只有fips一個元數(shù)據(jù)變量。??????

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

美國寬帶使用百分比圖

好吧，您已經(jīng)完成了大量特技才能到達(dá)這里，但現(xiàn)在是創(chuàng)建target map. 你準(zhǔn)備好了嗎？我們開始做吧！??????

第一步是將數(shù)據(jù)映射到圖形。為此，您將使用來定義所需圖形的類型。highchart()map

接下來，您將定義要如何顯示每個數(shù)據(jù)組。例如，寬帶使用率低于或高于 15% 的組。
使用，您可以在繪圖時配置每個系列的行為。反過來，您還可以通過在使用 .csv 創(chuàng)建的數(shù)據(jù)中添加更多元數(shù)據(jù)列（_e.g._、顏色）來覆蓋默認(rèn)值。因此，當(dāng)您運行時，它們都會共享 中使用的參數(shù)，但是您可以隨時隨心所欲地覆蓋一些 ??hc_plotOptions()list_parse()
hc_add_series_list()hc_plotOptions()

盡管您在上一步中構(gòu)建了與“目標(biāo)地圖”類似的圖形，但現(xiàn)在是添加相應(yīng)文本注釋的時候了。通常，highcharter圖表中的HTML不是必需的，更不是強(qiáng)制性的。但是，如果需要，您可以在每個顯示文本調(diào)用中使用該參數(shù)（_例如_ 、、 等）。這樣，您定義的所有字符串都將被視為 HTML，并且您可以更好地控制如何以及在何處顯示特定文本片段。??useHTML = TRUEhc_title()hc_subtitle()

到目前為止的結(jié)果應(yīng)該看起來幾乎相同；只有一件事不見了；導(dǎo)航按鈕。默認(rèn)情況下，導(dǎo)航按鈕處于禁用狀態(tài)，因此您必須使用 激活它們。要將其放置在特定位置，請使用參數(shù)。有了它，您可以更改與參數(shù),的對齊方式。值得一提的是，您還可以在圖例或文本的定位中找到這些參數(shù)。??hc_mapNavigation()buttonOptionsalignverticalAlign

最好用于在靜態(tài)頁面中顯示繪圖。在 Rmarkdown 或 Shiny 應(yīng)用程序中，它可能不是必需的。??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()