Libraries<\/h2>\n
You will use:<\/p>\n
- \n
- ? highcharter for charts.<\/li>\n
- ? janitor to clean the data.<\/li>\n
- ? tidyTuesdayR to download the data.<\/li>\n
- ? tidyverse for full data manipulation.<\/li>\n
- ? widgetframe to transform the chart into an iframe.<\/li>\n<\/ul>\n
\r\nlibrary(highcharter)\r\nlibrary(janitor)\r\nlibrary(tidytuesdayR)\r\nlibrary(tidyverse)\r\nlibrary(widgetframe)\r\n<\/pre>\n
Get the data<\/h2>\n
The data used in this article is about the United States Broadbank Usage Percentage Dataset<\/a> <\/p>\n
\r\ntuesday_data <- tidytuesdayR::tt_load(2021, week = 20)\r\n<\/pre>\n
Extract data to use<\/h2>\n
A full description of the data can be found in this map of America's broadband problem Github link<\/a><\/p>\n
\r\nbroadband <- tuesday_data$broadband %>%\r\n glimpse()\r\n<\/pre>\n
Download map data<\/h2>\n
In the
broadband<\/code> table, you will find five columns, of which,COUNTY ID<\/code> represents the identifier of the county in which the broadband usage metrics are being performed.<\/p>\nTherefore,
COUNTY ID<\/code> can be used to locate the broadband usage values of each county on a map. Here are several alternatives that you could make use of.
\nHowever, in this blog, you will use a map of the USA provided by theHighchart<\/code> team.<\/p>\nIn particular,
highcharter<\/code> provides two utility functions for accessing and browsing different common maps:<\/p>\n- \n
download_map_data()<\/code>: Download the geojson data from the highchartsJS collection.<\/li>\nget_data_from_map()<\/code>: Get the properties for each region in the map, as the keys from the map data.<\/li>\n<\/ul>\n\r\nmap_layout_data <- download_map_data(\"countries\/us\/us-all-all.js\")<\/pre>\n
If you look askance at the columns of the United States map, you will notice that there is a column named
fips<\/code>; these are unique 5-digit codes to identify counties in the United States. So, if you consider this, theCOUNTY ID<\/code> andfips<\/code> columns are equivalent. Yes, you may have to make a few adjustments later, but stick with that idea for now. ??<\/p>\n\r\nget_data_from_map(map_layout_data) %>%\r\n clean_names() %>% \r\n glimpse()\r\n<\/pre>\n
General preprocessing<\/h2>\n
To replicate the map of
\nThe Verge by Microsoft<\/a> (i.e.<\/em>, hereinafter referred astarget map<\/code>) you will need to focus only on the two following variables:<\/p>\n\r\n|variable |class |description |\r\n|:------------------------------|:---------|:-----------|\r\n|county_id |double | County ID |\r\n|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. |<\/pre>\n
But wait... maybe you should be asking yourself why you do not need other indicator variables like
ST<\/code> orCOUNTY NAME<\/code>?<\/p>\nWell, that's because in a few moments, you will use one of the tables provided by
Highcharts<\/code> (described in the section above) to carry out the name mapping of each county. However, in case you don't want to use these provided maps, you could keep the other columns and use packages likezipcodeR<\/code> ortigris<\/code> to help you with the correct mappings. ?<\/p>\nNow, getting back to general data processing, this is a relatively straightforward task. First, and as a good practice, you will use
clean_names()<\/code> provided by thejanitor<\/code> package to convert the names of the data columns to a standard one. In this way, typing the columns will be simple, easy to remember, and visibly appropriate. ?<\/p>\nThen, you will convert the
broadban_usage<\/code> column from acharacter<\/code> type to anumeric<\/code> type. While you might initially consider using the R baseas.numeric()<\/code> ortype.convert()<\/code>,type_convert()<\/code> from thereader<\/code> package provides a useful interface if you need to do manual work. Select, clean, and lettype_converter()<\/code> take care of the parsing of your variables. ??<\/p>\n\r\nbroadband_processed <- broadband %>%\r\n clean_names() %>%\r\n select(county_id, broadband_usage) %>%\r\n type_convert(\r\n col_types = cols(\r\n broadband_usage = col_double()\r\n ),\r\n na = \"-\"\r\n ) %>%\r\n glimpse()<\/pre>\n
Prepare data for plot<\/h2>\n
Our data is clean, however, to build the
target map<\/code> withhighcharter<\/code>, you will need to transform it a bit. To begin with, the data does not have information of broadband usage on certain places (i.e.<\/em>, data withNA<\/code>) and, thecounty_id<\/code> are not five-character codes, but four-character. Therefore, you must add a zero to those under four characters. ?\u2705<\/p>\nBesides, the
target map<\/code> shows two categories to highlight the problem of broadband use. Specifically, those counties that use a broadband speed less than or greater than and equal to 15%. You must apply this condition to categorize the data in thebroadband<\/code> table.<\/p>\nFinally, it is time to transform the data into a format that
highcharter<\/code> can understand. To do this, you will create a list of series, one serie for each category of the map you want to display. Hence, you will usegroup_nest()<\/code> to create a subset of data per group. Then, you can add metadata for each series, for example, a color variable. Now, you can transform each subset of data to a list format thathighcharter<\/code> can understand withlist_parse()<\/code>.<\/p>\nImportantly, each subset has columns named exactly as the base
highcharter<\/code> chart needs with some metadata. For example, to recreate thetarget map<\/code>, each category has the columns: name, value, and fips. Of which, onlyfips<\/code> is a metadata variable. ???<\/p>\n\r\nbroadband_series_data <- broadband_processed %>%\r\n filter(!is.na(broadband_usage)) %>%\r\n transmute(\r\n # Transform to a fips format ------------------------------------------\r\n fips = str_pad(\r\n string = county_id,\r\n width = 5,\r\n side = \"left\",\r\n pad = \"0\"\r\n ),\r\n # Categorize data -----------------------------------------------------\r\n value = broadband_usage * 100,\r\n name = if_else(\r\n condition = value < 15,\r\n true = \"< 15%\",\r\n false = \">= 15%\"\r\n )\r\n ) %>%\r\n # Transform data so that highcharter accepts it. -------------------------\r\n group_nest(name) %>%\r\n mutate(\r\n color = c(\"#0B0073\", \"#B6B8B8\"),\r\n data = map(data, list_parse)\r\n ) %>%\r\n glimpse()<\/pre>\n
I need to tell you that there is another way to create choropleths of categorical areas using dataClasses()<\/a> ?
\nHowever, honestly, the process of creating thedataClasses<\/code> does not seem as intuitive to me as the version used in this blog (i.e.<\/em>, usinggroup_nest()<\/code>). ?
\nWho knows. Observe, discuss and leave in the comments how you create them! ??<\/p>\nUnited States Broadband Usage Percentages figure<\/h2>\n
Well, you've done a ton of stunts to get here, but now is the time to create the
target map<\/code>. Are you ready? Let's do it! ???<\/p>\nThe first step is to map the data to a graph. For this, you will use
highchart()<\/code> to define that the desired graph is of themap<\/code> type.<\/p>\nNext, you will define how you want to display each of your data groups.For instance, groups below or above 15% broadband usage.
\nUsinghc_plotOptions()<\/code>, you can configure the behavior of each series when plotting. In turn, you can also overwrite the default values by adding more columns of metadata (_e.g._, color) in the data created withlist_parse()<\/code>.
\nSo when you runhc_add_series_list()<\/code>, they will all share the parameters used inhc_plotOptions()<\/code>, but you can always overwrite some as you like ?<\/p>\nAlthough you built a similar graph to the `target map` with the previous step, it is time for you to add the corresponding text annotations. Normally, HTML within the
highcharter<\/code> charts is not necessary, much less mandatory. However, if required, you can use theuseHTML = TRUE<\/code> parameter within each display text call (_e.g._,hc_title()<\/code>,hc_subtitle()<\/code>, etc.). In this way, all the strings that you define will be treated as HTML, and you will have greater control over how and where to display specific pieces of text. ?<\/p>\nThe result so far should look almost identical; only one thing is missing; the navigation buttons. By default, the navigation buttons are disabled, so you must activate them with
hc_mapNavigation()<\/code>. To position it in a specific place, use thebuttonOptions<\/code> parameter. With it, you can change the alignment with the parametersalign<\/code>,verticalAlign<\/code>. To mention, you can also find these parameters in the positioning of the legend or texts. ?<\/p>\nIt would be best to use
frameWidget()<\/code> to displayhighcharter<\/code> plots within static pages. Inside a Rmarkdown or a Shiny app, it might not be necessary. ?<\/p>\n\r\nhighchart(\r\n type = \"map\"\r\n) %>%\r\n # How do you want to display the data? ----------------------------------\r\n hc_plotOptions(\r\n map = list(\r\n allAreas = FALSE,\r\n joinBy = \"fips\",\r\n value = \"value\",\r\n mapData = map_layout_data\r\n ),\r\n series = list(\r\n states = list(\r\n inactive = list(\r\n opacity = 0.7\r\n )\r\n )\r\n )\r\n ) %>% \r\n hc_add_series_list(broadband_series_data) %>%\r\n # Display text as in original source. -----------------------------------\r\n hc_title(\r\n text = \"\r\n <p style='text-align:center;'>\r\n <b>THIS IS A MAP OF AMERICAN'S BROADBAND PROBLEM<\/b>\r\n <br>\r\n A county-by-county look at the broadband gap\r\n <\/p>\r\n \",\r\n align = \"center\",\r\n useHTML = TRUE\r\n ) %>%\r\n hc_subtitle(\r\n text = \"\r\n By Russell Brandom<\/a>\r\n and William Joel<\/a> | May 10, 2021, 9:00am EDT\r\n \",\r\n align = \"center\",\r\n useHTML = TRUE\r\n ) %>%\r\n hc_caption(\r\n text = \"\r\n Map: The Verge. The database does not include broadband rates for\r\n Oglala Lakota County, South Dakota, or Kusilvak Census Area, Alaska,\r\n because of a coding irregularity. Source: \r\n <a href='https:\/\/github.com\/microsoft\/USBroadbandUsagePercentages'>\r\n Microsoft\r\n <\/a> \r\n - \r\n <a href='https:\/\/www.theverge.com\/22418074\/broadband-gap-america-map-county-microsoft-data'>\r\n Get the data\r\n <\/a>.\r\n \",\r\n useHTML = TRUE\r\n ) %>%\r\n hc_legend(\r\n title = list(\r\n text = \"\r\n Percentage of people using the internet at 25Mbps or above per county.\r\n \"\r\n ),\r\n align = \"left\",\r\n symbolHeight = 12,\r\n symbolWidth = 12,\r\n symbolRadius = 0,\r\n squareSymbol = FALSE\r\n ) %>%\r\n hc_tooltip(\r\n pointFormat = \"\r\n <b>{point.name}<\/b><br>\r\n <br>\r\n <b>{point.value}%<\/b><br>\r\n Percent using broadband speed\r\n \",\r\n useHTML = TRUE\r\n ) %>%\r\n hc_credits(\r\n text = \"\r\n <b>Replica made by: <\/b> \r\n <a href='https:\/\/twitter.com\/jvelezmagic'>@jvelezmagic<\/a>\r\n \",\r\n enabled = TRUE,\r\n useHTML = TRUE\r\n ) %>%\r\n # Customize zoom options ------------------------------------------------\r\n hc_mapNavigation(\r\n enabled = TRUE,\r\n enableMouseWheelZoom = FALSE,\r\n buttonOptions = list(\r\n align = \"right\",\r\n verticalAlign = \"bottom\"\r\n )\r\n ) %>%\r\n # Include your favorite theme! -----------------------------------------\r\n hc_add_theme(\r\n hc_thm = hc_theme_elementary()\r\n ) %>%\r\n # Display as iframe -----------------------------------------------------\r\n frameWidget() %>% \r\n identity()\r\n<\/pre>\n
![\"A](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2021\/06\/10142550\/Screenshot-2021-06-10-at-14.24.57.jpg\")
<\/p>\nCongratulations, you have learned to create a handy map to share and show a problem of interest. I hope to see you soon with another blog. ?\u2728\u2728\u2728 <\/p>\n
Feel free to share your comments in the comment section below.<\/p>\n","protected":false},"excerpt":{"rendered":"
A step-by-step tutorial to learn how to create an interactive chart using Tidytuesday and Highcharter.<\/p>\n","protected":false},"author":265,"featured_media":20916,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1105],"tags":[876,793],"coauthors":[895],"class_list":["post-20914","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integration","tag-highcharts-maps","tag-r"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20914","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/265"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=20914"}],"version-history":[{"count":2,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20914\/revisions"}],"predecessor-version":[{"id":29350,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20914\/revisions\/29350"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/20916"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=20914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=20914"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=20914"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=20914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}