<p><div><div><div><div data-show-faces="false" data-height="21" data-width="100" data-layout="button_count" data-send="true" data-href="https://www.r-bloggers.com/hexjson-htmlwidget-for-r-part-1/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="https://blog.ouseful.info/2017/06/28/hexjson-htmlwidget-for-r-part-1/"> Rstats – OUseful.Info, the blog…</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p>In advance of the recent UK general election, ODI Leeds published an interactive <a rel="nofollow" href="https://odileeds.org/projects/hexmaps/constituencies.html" target="_blank">hexmap of constituencies</a> to provide a navigation surface over various datasets relating to Westminster constituencies:</p>
<p><a rel="nofollow" href="https://odileeds.org/projects/hexmaps/constituencies.html" target="_blank"><img data-orig-file="https://ouseful.files.wordpress.com/2017/06/hex_map_of_uk_constituencies.png?w=450&amp;h=445&amp;fit=666%2C445" data-orig-size="2188,1462" data-medium-file="https://ouseful.files.wordpress.com/2017/06/hex_map_of_uk_constituencies.png?w=450&amp;h=445&amp;fit=666%2C445?w=300" data-attachment-id="16525" data-image-meta="{" data-image-description="" src="https://ouseful.files.wordpress.com/2017/06/hex_map_of_uk_constituencies.png?w=450&h=445&fit=666%2C445" data-permalink="https://blog.ouseful.info/2017/06/28/hexjson-htmlwidget-for-r-part-1/hex_map_of_uk_constituencies/" data-large-file="https://ouseful.files.wordpress.com/2017/06/hex_map_of_uk_constituencies.png?w=450&amp;h=445&amp;fit=666%2C445?w=830" alt="" data-image-title="Hex_map_of_UK_constituencies" sizes="(max-width: 666px) 100vw, 666px" data-comments-opened="1" class="wp-image-16525" data-recalc-dims="1"></a></p>
<p>As well as the interactive front end, ODI Leeds published a simple JSON format for sharing the hex data – <a rel="nofollow" href="https://odileeds.org/projects/hexmaps/hexjson.html" target="_blank"><em>hexjson</em></a> that allows you to specify an identifier for each, some data values associated with it, and relative row (<code>r</code>) and column (<code>q</code>) co-ordinates:</p>
<p><a rel="nofollow" href="https://odileeds.org/projects/hexmaps/hexjson.html" target="_blank"><img data-orig-file="https://ouseful.files.wordpress.com/2017/06/hexjson_format.png?w=450&amp;h=424&amp;fit=485%2C424" data-orig-size="1204,1052" data-medium-file="https://ouseful.files.wordpress.com/2017/06/hexjson_format.png?w=450&amp;h=424&amp;fit=485%2C424?w=300" data-attachment-id="16523" data-image-meta="{" data-image-description="" src="https://ouseful.files.wordpress.com/2017/06/hexjson_format.png?w=450&h=424&fit=485%2C424" data-permalink="https://blog.ouseful.info/2017/06/28/hexjson-htmlwidget-for-r-part-1/hexjson_format/" data-large-file="https://ouseful.files.wordpress.com/2017/06/hexjson_format.png?w=450&amp;h=424&amp;fit=485%2C424?w=830" alt="" data-image-title="HexJSON_format" sizes="(max-width: 485px) 100vw, 485px" data-comments-opened="1" class="wp-image-16523" data-recalc-dims="1"></a></p>
<p>It’s not hard to imagine the publication of default, or <strong>base</strong>, <em>hexJSON</em> documents that include standard identifier codes and appropriate co-ordinates, e.g. for Westminster constituencies, wards, local authorities, and so on being developed around such a standard.</p>
<p>So that’s one thing the standard affords – a common way of representing lots of different datasets.</p>
<p>Tooling can then be developed to inject particular data-values into an appropriate <code>hexJSON</code> file. For example, a <code>hexJSON</code> representation of UK HEIs could add a data attribute identifying whether an HEI received a Gold, Silver or Bronze TEF rating. That’s a second thing the availability of a standard supports.</p>
<p>By building a UI that reads data in from a <em>hexJSON</em> file, ODI Leeds have developed an application that can presumably render other people’s <em>hexJSON</em> files, again, another benefit of a standard representation.</p>
<p>But the availability of the standard also means other people can build other visualisation tools around the standard. Which is exactly what Oli Hawkins did with his <a rel="nofollow" href="https://github.com/olihawkins/d3-hexjson" target="_blank"><code>d3-hexjson</code></a> Javascript library, <em>“a D3 module for generating [SVG] hexmaps from data in HexJSON format”</em> as <a rel="nofollow" href="http://olihawkins.com/2017/06/1" target="_blank">announced here</a>. So that’s another thing the standard allows.</p>
<p>You can see an <a rel="nofollow" href="https://bl.ocks.org/henryjameslau/5daca6e4667c41ae85959da614a37787" target="_blank">example</a> here, created by Henry Lau:</p>
<p><a rel="nofollow" href="https://bl.ocks.org/henryjameslau/5daca6e4667c41ae85959da614a37787" target="_blank"><img data-orig-file="https://ouseful.files.wordpress.com/2017/06/d3-hexjson_-_bl_ocks_org.png?w=450&amp;h=482&amp;fit=643%2C482" data-orig-size="1802,1350" data-medium-file="https://ouseful.files.wordpress.com/2017/06/d3-hexjson_-_bl_ocks_org.png?w=450&amp;h=482&amp;fit=643%2C482?w=300" data-attachment-id="16522" data-image-meta="{" data-image-description="" src="https://ouseful.files.wordpress.com/2017/06/d3-hexjson_-_bl_ocks_org.png?w=450&h=482&fit=643%2C482" data-permalink="https://blog.ouseful.info/2017/06/28/hexjson-htmlwidget-for-r-part-1/d3-hexjson_-_bl_ocks_org/" data-large-file="https://ouseful.files.wordpress.com/2017/06/d3-hexjson_-_bl_ocks_org.png?w=450&amp;h=482&amp;fit=643%2C482?w=830" alt="" data-image-title="D3-hexjson_-_bl_ocks_org" sizes="(max-width: 643px) 100vw, 643px" data-comments-opened="1" class="wp-image-16522" data-recalc-dims="1"></a></p>
<p>You maybe start to get a feel for how this works… Data in a standard form, standard library that renders the data. For example, Giuseppe Sollazzo (aka @puntofisso), had a play looking at <a rel="nofollow" href="http://swing.puntofisso.net/" target="_blank">voter swing</a>:</p>
<p><a rel="nofollow" href="http://swing.puntofisso.net/" target="_blank"><img data-orig-file="https://ouseful.files.wordpress.com/2017/06/swing_2017_and_various.png?w=450&amp;h=340&amp;fit=618%2C340" data-orig-size="2404,1324" data-medium-file="https://ouseful.files.wordpress.com/2017/06/swing_2017_and_various.png?w=450&amp;h=340&amp;fit=618%2C340?w=300" data-attachment-id="16521" data-image-meta="{" data-image-description="" src="https://ouseful.files.wordpress.com/2017/06/swing_2017_and_various.png?w=450&h=340&fit=618%2C340" data-permalink="https://blog.ouseful.info/2017/06/28/hexjson-htmlwidget-for-r-part-1/swing_2017_and_various/" data-large-file="https://ouseful.files.wordpress.com/2017/06/swing_2017_and_various.png?w=450&amp;h=340&amp;fit=618%2C340?w=830" alt="" data-image-title="Swing_2017_and_various" sizes="(max-width: 618px) 100vw, 618px" data-comments-opened="1" class="wp-image-16521" data-recalc-dims="1"></a></p>
<p>So… one of the things I was wondering was how easy it would be for folk in the House of Commons Library, for example, to make use of the <code>d3-hexjson</code> maps without having to do the Javascript or HTML thing.</p>
<p>Step in <a rel="nofollow" href="http://www.htmlwidgets.org/" target="_blank">HTMLwidgets</a>, a (standardised) format for publishing interactive HTML widgets from Rmarkdown (Rmd). The idea is that you should be able to say something like:</p>
<p><code>hexjsonwidget( hexjson )</code></p>
<p>and embed a rendering of a <code>d3-hexjson</code> map in HTML output from a <em>knitr</em>ed <em>Rmd</em> document.</p>
<p>(Creating the <code>hexjson</code> as a JSON file from a base (<em>hexJSON</em>) file with custom data values added to it is the next step, and the next thing on my to do list.)</p>
<p>So following the <a rel="nofollow" href="http://www.htmlwidgets.org/develop_intro.html" target="_blank">HTMLwidgets tutorial</a>, and copying Henry Lau’s example (which maybe drew on Oli’s README?) I came up with a <a rel="nofollow" href="https://github.com/psychemedia/htmlwidget-hexjson" target="_blank">minimal take on a hexJSON HTMLwidget</a>.</p>
<pre>library(devtools)
install_github(&quot;psychemedia/htmlwidget-hexjson&quot;)
</pre>
<p>It’s little more than a wrapping of the demo template, and I’ve only tested it with a single example <em>hexJSON</em> file, but it does generate d3.js hexmaps:</p>
<p><a rel="nofollow" href="https://github.com/psychemedia/htmlwidget-hexjson" target="_blank"><img data-orig-file="https://ouseful.files.wordpress.com/2017/06/rstudio_hexjson1.png?w=456" data-orig-size="2488,786" data-medium-file="https://ouseful.files.wordpress.com/2017/06/rstudio_hexjson1.png?w=456?w=300" data-attachment-id="16528" data-image-meta="{" data-image-description="" src="https://ouseful.files.wordpress.com/2017/06/rstudio_hexjson1.png?w=456" data-permalink="https://blog.ouseful.info/2017/06/28/hexjson-htmlwidget-for-r-part-1/rstudio_hexjson-2/" data-large-file="https://ouseful.files.wordpress.com/2017/06/rstudio_hexjson1.png?w=456?w=830" alt="rstudio_hexjson" data-image-title="rstudio_hexjson" sizes="(max-width: 830px) 100vw, 830px" data-comments-opened="1" class="wp-image-16528" data-recalc-dims="1"></a></p>
<pre>library(jsonlite)
library(hexjsonwidget)

jj=fromJSON('./example.hexjson')
hexjsonwidget(jj)</pre>
<p>It also needs documenting. And support for creating data-populated base <em>hexJSON</em> files. But it’s a start. And another thing the <em>hexJSON</em> has unintentionally provided supported for.</p>
<p>But it does let you create HTML documents with embedded hexmaps if you have the <em>hexJSON</em> file handy:</p>
<p><img data-orig-file="https://ouseful.files.wordpress.com/2017/06/rstudio_hexjson_test.png?w=450&amp;h=297&amp;fit=567%2C297" data-orig-size="1866,978" data-medium-file="https://ouseful.files.wordpress.com/2017/06/rstudio_hexjson_test.png?w=450&amp;h=297&amp;fit=567%2C297?w=300" data-attachment-id="16520" data-image-meta="{" data-image-description="" src="https://ouseful.files.wordpress.com/2017/06/rstudio_hexjson_test.png?w=450&h=297&fit=567%2C297" data-permalink="https://blog.ouseful.info/2017/06/28/hexjson-htmlwidget-for-r-part-1/rstudio_hexjson_test/" data-large-file="https://ouseful.files.wordpress.com/2017/06/rstudio_hexjson_test.png?w=450&amp;h=297&amp;fit=567%2C297?w=830" alt="" data-image-title="rstudio_hexjson_test" sizes="(max-width: 567px) 100vw, 567px" data-comments-opened="1" class="wp-image-16520" data-recalc-dims="1"></p>
<p>By the by, it’s also worth noting that we can also publish an image snapshot of the SVG hexjson map in a <code>knitr</code> rendering of the document to a PDF or Microsoft Word output document format:</p>
<p><img data-orig-file="https://ouseful.files.wordpress.com/2017/06/rstudio_hexjson_testpdf.png?w=450&amp;h=258&amp;fit=548%2C258" data-orig-size="2500,1176" data-medium-file="https://ouseful.files.wordpress.com/2017/06/rstudio_hexjson_testpdf.png?w=450&amp;h=258&amp;fit=548%2C258?w=300" data-attachment-id="16519" data-image-meta="{" data-image-description="" src="https://ouseful.files.wordpress.com/2017/06/rstudio_hexjson_testpdf.png?w=450&h=258&fit=548%2C258" data-permalink="https://blog.ouseful.info/2017/06/28/hexjson-htmlwidget-for-r-part-1/rstudio_hexjson_testpdf/" data-large-file="https://ouseful.files.wordpress.com/2017/06/rstudio_hexjson_testpdf.png?w=450&amp;h=258&amp;fit=548%2C258?w=830" alt="" data-image-title="rstudio_hexjson_testpdf" sizes="(max-width: 548px) 100vw, 548px" data-comments-opened="1" class="wp-image-16519" data-recalc-dims="1"></p>
<p>At first I thought this wasn’t possible, and via <a rel="nofollow" href="https://github.com/timelyportfolio/exportwidget/blob/master/Readme.md" target="_blank">@timelyportfolio</a> found a workaround to generate an image from the SVG:</p>
<pre>library(exportwidget)
library(webshot)
library(htmltools)
library(magrittr)

html_print(tagList(
hexjsonwidget(jj)
, export_widget( )
), viewer=NULL) %>%
webshot( delay = 3 )</pre>
<p>But then noticed that the PDF rendering <em>was</em> suddenly working – it seems that if you have the <code>webshot</code> and <code>htmltools</code> packages installed, then the PDF and Word rendering of the HTMLwidget SVG as an image works automagically. (I’m not sure I’ve seen that documented – the <a rel="nofollow" href="https://github.com/ramnathv/htmlwidgets/issues/95" target="_blank">related HTMLwidget Github issue</a> still looks to be open?)</p>
<p> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/ouseful.wordpress.com/16518/" target="_blank"><img border="0" alt="" src="http://feeds.wordpress.com/1.0/comments/ouseful.wordpress.com/16518/"></a> <img border="0" alt="" src="https://i1.wp.com/pixel.wp.com/b.gif?resize=1%2C1&ssl=1" data-recalc-dims="1"></p>
	<p>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="https://blog.ouseful.info/2017/06/28/hexjson-htmlwidget-for-r-part-1/"> Rstats – OUseful.Info, the blog…</a></strong>.</div>
<hr>
<a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers.com</a> offers <strong><a rel="nofollow" href="https://feedburner.google.com/fb/a/mailverify?uri=RBloggers">daily e-mail updates</a></strong> about <a rel="nofollow" href="https://www.r-project.org/" title="The R Project for Statistical Computing">R</a> news and <a rel="nofollow" href="https://www.r-bloggers.com/search/tutorial" title="R tutorials">tutorials</a> on topics such as: <a rel="nofollow" href="https://www.r-bloggers.com/search/data%20science" title="Data science">Data science</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data" title="Big Data">Big Data, <a rel="nofollow" href="https://www.r-users.com/" title="R jobs">R jobs</a>, visualization (<a rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2" title="ggplot and ggplot2 tutorials">ggplot2</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/boxplot" title="Boxplots using lattice and ggplot2 tutorials">Boxplots</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/map" title="Maps and gis">maps</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/animation" title="Animation in R">animation</a>), programming (<a rel="nofollow" href="https://www.r-bloggers.com/search/RStudio" title="RStudio IDE for R">RStudio</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/sweave" title="Sweave and literate programming">Sweave</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX" title="LaTeX in R">LaTeX</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/SQL" title="SQL and databases">SQL</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/eclipse" title="Eclipse IDE for R">Eclipse</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/git" title="git and github, Version Control System">git</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/hadoop" title="Large data in R using Hadoop">hadoop</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping" title="Web Scraping of google, facebook, yahoo, twitter and more using R">Web Scraping</a>) statistics (<a rel="nofollow" href="https://www.r-bloggers.com/search/regression" title="Regressions and ANOVA analysis tutorials">regression</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/PCA" title="principal component analysis tutorial">PCA</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/time+series" title="Time series">time series</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/trading" title="finance trading">trading</a>) and more...
<img alt="" width="1" src="http://feeds.feedburner.com/~r/RBloggers/~4/NMgUoHx_vTc" height="1"></a></div>