<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-2/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="https://blog.ouseful.info/2017/06/29/hexjson-htmlwidget-for-r-part-2/"> 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 my previous post – <a rel="nofollow" href="https://blog.ouseful.info/2017/06/28/hexjson-htmlwidget-for-r-part-1/" target="_blank">HexJSON HTMLWidget for R, Part 1</a> – I described a first attempt at an HTMLwidget for displaying <a rel="nofollow" href="https://odileeds.org/projects/hexmaps/hexjson.html" target="_blank">hexJSON</a> maps using <a rel="nofollow" href="https://github.com/olihawkins/d3-hexjson" target="_blank"><code>d3-hexJSON</code></a>.</p>
<p>I had another play today and added a few extra features, including the ability to:</p>
<ul>
<li>add a grid (as demonstrated in the original <code>d3-hexJSON</code> examples),</li>
<li>modify the default colour of data and grid hexes,</li>
<li>set the data hex colour via a <code>col</code> attribute defined on a hexJSON hex, and</li>
<li>set the data hex label via a <code>label</code> attribute defined on a hexJSON hex.</li>
</ul>
<p>We can now also pass in the path to a hexJSON file, rather than just the hexJSON object:</p>
<p><img data-orig-file="https://ouseful.files.wordpress.com/2017/06/hexjsonpart2_11.png?w=450&amp;h=451&amp;fit=502%2C451" data-orig-size="1292,1162" data-medium-file="https://ouseful.files.wordpress.com/2017/06/hexjsonpart2_11.png?w=450&amp;h=451&amp;fit=502%2C451?w=300" data-attachment-id="16539" data-image-meta="{" data-image-description="" src="https://ouseful.files.wordpress.com/2017/06/hexjsonpart2_11.png?w=450&h=451&fit=502%2C451" data-permalink="https://blog.ouseful.info/2017/06/29/hexjson-htmlwidget-for-r-part-2/hexjsonpart2_1/" data-large-file="https://ouseful.files.wordpress.com/2017/06/hexjsonpart2_11.png?w=450&amp;h=451&amp;fit=502%2C451?w=830" alt="" data-image-title="hexjsonpart2_1" sizes="(max-width: 502px) 100vw, 502px" data-comments-opened="1" class="wp-image-16539" data-recalc-dims="1"></p>
<p>Here’s the example hexJSON file:</p>
<p><img data-orig-file="https://ouseful.files.wordpress.com/2017/06/hexjsonpart2_21.png?w=339&amp;h=134&amp;fit=339%2C134&amp;resize=339%2C134" data-orig-size="842,332" data-medium-file="https://ouseful.files.wordpress.com/2017/06/hexjsonpart2_21.png?w=339&amp;h=134&amp;fit=339%2C134&amp;resize=339%2C134?w=300" data-attachment-id="16540" data-image-meta="{" data-image-description="" src="https://ouseful.files.wordpress.com/2017/06/hexjsonpart2_21.png?w=339&h=134&fit=339%2C134&resize=339%2C134" data-permalink="https://blog.ouseful.info/2017/06/29/hexjson-htmlwidget-for-r-part-2/hexjsonpart2_2/" data-large-file="https://ouseful.files.wordpress.com/2017/06/hexjsonpart2_21.png?w=339&amp;h=134&amp;fit=339%2C134&amp;resize=339%2C134?w=830" alt="" data-image-title="hexjsonpart2_2" sizes="(max-width: 339px) 100vw, 339px" data-comments-opened="1" class="wp-image-16540" data-recalc-dims="1"></p>
<p>And here’s an example of the default grid colour and a custom text colour :</p>
<p><img data-orig-file="https://ouseful.files.wordpress.com/2017/06/hexjsonpart2_3.png?w=450&amp;h=398&amp;fit=510%2C398" data-orig-size="1268,990" data-medium-file="https://ouseful.files.wordpress.com/2017/06/hexjsonpart2_3.png?w=450&amp;h=398&amp;fit=510%2C398?w=300" data-attachment-id="16538" data-image-meta="{" data-image-description="" src="https://ouseful.files.wordpress.com/2017/06/hexjsonpart2_3.png?w=450&h=398&fit=510%2C398" data-permalink="https://blog.ouseful.info/2017/06/29/hexjson-htmlwidget-for-r-part-2/hexjsonpart2_3/" data-large-file="https://ouseful.files.wordpress.com/2017/06/hexjsonpart2_3.png?w=450&amp;h=398&amp;fit=510%2C398?w=830" alt="" data-image-title="hexjsonpart2_3" sizes="(max-width: 510px) 100vw, 510px" data-comments-opened="1" class="wp-image-16538" data-recalc-dims="1"></p>
<p>I’ve also tried to separate out the code changes as separate commits for each feature update: <a rel="nofollow" href="https://github.com/psychemedia/htmlwidget-hexjson/commits/master" target="_blank">code checkins</a>. For example, here’s where I <a rel="nofollow" href="https://github.com/psychemedia/htmlwidget-hexjson/commit/9063aef784e25c2782168952f7c2d7e790b2c00a" target="_blank">added the original colour handling</a>.</p>
<p>I’ve also had a go at putting some docs in place, generated using <code>roxygen2</code> called from inside the widget code folder with <code>devtools::document()</code>. (The widget itself gets rebuilt by running the command <code>devtools::install()</code>.)</p>
<p>Next up – some routines to annotate a base hexJSON file with data to colour and label the hexes. (I’m also wondering if I should support the ability to specify arbitrary hexJSON hex attribute names for label text (<code>label</code>) and hex colour (<code>col</code>), or whether to keep those names as a fixed requirement?)</p>
<p> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/ouseful.wordpress.com/16535/" target="_blank"><img border="0" alt="" src="http://feeds.wordpress.com/1.0/comments/ouseful.wordpress.com/16535/"></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/29/hexjson-htmlwidget-for-r-part-2/"> 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/aIjAcgOQVso" height="1"></a></div>