<p><div><div><div><div data-width="100" data-show-faces="false" data-send="true" data-layout="button_count" data-height="21" data-href="https://www.r-bloggers.com/replicating-nyt-weather-app/"></div></div><div><a data-url="https://www.r-bloggers.com/replicating-nyt-weather-app/" data-counturl="https://www.r-bloggers.com/replicating-nyt-weather-app/" data-count="horizontal" data-text="Replicating NYT Weather App" class="twitter-share-button" data-via="rbloggers" href="https://twitter.com/share"></a></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://jkunst.com/r/replicating-nyt-weather-app/"> Jkunst - R category</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p>So much time since my last post so I want to post something, no matter<br>
what it is, but I hope this will be somehow helpfull</p>
<p>In this post I will show some new features for the next version of<br>
<code>highcharter</code> package. The main feature added is <code>hc_add_series</code> now is<br>
a <strong>generic</strong> function! This mean you can add the <code>data</code> argument<br>
can be numeric, data frame, time series (ts, xts, ohlc) amonth others<br>
so the syntaxis will be a little cleaner.</p>
<p>What we’ll do here? We’ll make an interactive version of the<br>
<em>well-well-know-and-a-little-repeated</em> Tufte weather chart.</p>
<p><img title="Weather Chart" alt="" src="https://i2.wp.com/www.edwardtufte.com/bboard/images/00014g-837.gif?w=456" data-recalc-dims="1"></p>
<p>There are good ggplot versions if you can start<br>
<a target="_blank" rel="nofollow" href="http://jkunst.com/r/replicating-nyt-weather-app/">https://rpubs.com/tyshynsk/133318</a> and<br>
<a target="_blank" rel="nofollow" href="http://jkunst.com/r/replicating-nyt-weather-app/">https://rpubs.com/bradleyboehmke/weather_graphic</a>.</p>
<p>But our focus will be replicate the New York Time App:<br>
<a target="_blank" rel="nofollow" href="http://www.nytimes.com/interactive/2016/02/19/us/2015-year-in-weather-temperature-precipitation.html"><strong>How Much Warmer Was Your City in 2015?</strong></a> where you can choose among<br>
<strong>over 3K cities</strong>!. So let’s start. So we need a interactive charting<br>
library and shiny.</p>
<h2>Data</h2>
<p>If you search/explore in the devTools in the previous link you can<br>
know where is the path of the used data. So to be clear:</p>
<blockquote>
<p>All the data used in this post is from http://www.nytimes.com<br>
– <cite>Me.</cite></p>
</blockquote>
<p>We’ll load the <code>tidyverse</code>, download the data, and create an auxiliar<br>
variable <code>dt</code> to store the date time in numeric format.</p>
<div>
<pre><code><span>library</span><span>(</span><span>printr</span><span>)</span><span>
</span><span>library</span><span>(</span><span>tidyverse</span><span>)</span><span>
</span><span>library</span><span>(</span><span>highcharter</span><span>)</span><span>
</span><span>library</span><span>(</span><span>lubridate</span><span>)</span><span>
</span><span>library</span><span>(</span><span>stringr</span><span>)</span><span>
</span><span>library</span><span>(</span><span>forcats</span><span>)</span><span>
</span><span>url_base</span><span> </span><span>&lt;-</span><span> </span><span>&quot;http://graphics8.nytimes.com/newsgraphics/2016/01/01/weather/assets&quot;</span><span>
</span><span>file</span><span> </span><span>&lt;-</span><span> </span><span>&quot;new-york_ny.csv&quot;</span><span> </span><span># &quot;san-francisco_ca.csv&quot;
</span><span>url_file</span><span> </span><span>&lt;-</span><span> </span><span>file.path</span><span>(</span><span>url_base</span><span>,</span><span> </span><span>file</span><span>)</span><span>
</span><span>data</span><span> </span><span>&lt;-</span><span> </span><span>read_csv</span><span>(</span><span>url_file</span><span>)</span><span>
</span><span>data</span><span> </span><span>&lt;-</span><span> </span><span>mutate</span><span>(</span><span>data</span><span>,</span><span> </span><span>dt</span><span> </span><span>=</span><span> </span><span>datetime_to_timestamp</span><span>(</span><span>date</span><span>))</span><span>
</span><span>head</span><span>(</span><span>data</span><span>)</span><span>
</span></code></pre>
</div>
<table>
<thead>
<tr>
<th>date</th>
<th>month</th>
<th>temp_max</th>
<th>temp_min</th>
<th>temp_rec_max</th>
<th>temp_rec_min</th>
<th>temp_avg_max</th>
<th>temp_avg_min</th>
<th>temp_rec_high</th>
<th>temp_rec_low</th>
<th>precip_value</th>
<th>precip_actual</th>
<th>precip_normal</th>
<th>precip_rec</th>
<th>snow_rec</th>
<th>annual_average_temperature</th>
<th>departure_from_normal</th>
<th>total_precipitation</th>
<th>precipitation_departure_from_normal</th>
<th>dt</th>
</tr>
</thead>
<tbody>
<tr>
<td>2015-01-01</td>
<td>1</td>
<td>39</td>
<td>27</td>
<td>62</td>
<td>-4</td>
<td>39</td>
<td>28</td>
<td>NULL</td>
<td>NULL</td>
<td>0.00</td>
<td>5.23</td>
<td>3.65</td>
<td>NULL</td>
<td>NULL</td>
<td>NA</td>
<td>NA</td>
<td>NA</td>
<td>NA</td>
<td>1.42e+12</td>
</tr>
<tr>
<td>2015-01-02</td>
<td>1</td>
<td>42</td>
<td>35</td>
<td>68</td>
<td>2</td>
<td>39</td>
<td>28</td>
<td>NULL</td>
<td>NULL</td>
<td>0.00</td>
<td>NA</td>
<td>NA</td>
<td>NULL</td>
<td>NULL</td>
<td>NA</td>
<td>NA</td>
<td>NA</td>
<td>NA</td>
<td>1.42e+12</td>
</tr>
<tr>
<td>2015-01-03</td>
<td>1</td>
<td>42</td>
<td>33</td>
<td>64</td>
<td>-4</td>
<td>39</td>
<td>28</td>
<td>NULL</td>
<td>NULL</td>
<td>0.71</td>
<td>NA</td>
<td>NA</td>
<td>NULL</td>
<td>NA</td>
<td>NA</td>
<td>NA</td>
<td>NA</td>
<td>NA</td>
<td>1.42e+12</td>
</tr>
<tr>
<td>2015-01-04</td>
<td>1</td>
<td>56</td>
<td>41</td>
<td>66</td>
<td>-3</td>
<td>39</td>
<td>27</td>
<td>NULL</td>
<td>NULL</td>
<td>1.01</td>
<td>NA</td>
<td>NA</td>
<td>NULL</td>
<td>NULL</td>
<td>NA</td>
<td>NA</td>
<td>NA</td>
<td>NA</td>
<td>1.42e+12</td>
</tr>
<tr>
<td>2015-01-05</td>
<td>1</td>
<td>49</td>
<td>21</td>
<td>64</td>
<td>-4</td>
<td>38</td>
<td>27</td>
<td>NULL</td>
<td>NULL</td>
<td>1.01</td>
<td>NA</td>
<td>NA</td>
<td>NULL</td>
<td>NULL</td>
<td>NA</td>
<td>NA</td>
<td>NA</td>
<td>NA</td>
<td>1.42e+12</td>
</tr>
<tr>
<td>2015-01-06</td>
<td>1</td>
<td>22</td>
<td>19</td>
<td>72</td>
<td>-2</td>
<td>38</td>
<td>27</td>
<td>NULL</td>
<td>NULL</td>
<td>1.06</td>
<td>NA</td>
<td>NA</td>
<td>NULL</td>
<td>NULL</td>
<td>NA</td>
<td>NA</td>
<td>NA</td>
<td>NA</td>
<td>1.42e+12</td>
</tr>
</tbody>
</table>
<h2>Setup</h2>
<p>Due the data is ready we’ll start to create the chart (a highchart object):</p>
<div>
<pre><code><span>hc</span><span> </span><span>&lt;-</span><span> </span><span>highchart</span><span>()</span><span> </span><span>%>%</span><span>
</span><span>hc_xAxis</span><span>(</span><span>type</span><span> </span><span>=</span><span> </span><span>&quot;datetime&quot;</span><span>,</span><span> </span><span>showLastLabel</span><span> </span><span>=</span><span> </span><span>FALSE</span><span>,</span><span>
</span><span>dateTimeLabelFormats</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>month</span><span> </span><span>=</span><span> </span><span>&quot;%B&quot;</span><span>))</span><span> </span><span>%>%</span><span> </span><span>hc_tooltip</span><span>(</span><span>shared</span><span> </span><span>=</span><span> </span><span>TRUE</span><span>,</span><span> </span><span>useHTML</span><span> </span><span>=</span><span> </span><span>TRUE</span><span>,</span><span>
</span><span>headerFormat</span><span> </span><span>=</span><span> </span><span>as.character</span><span>(</span><span>tags</span><span>$</span><span>small</span><span>(</span><span>&quot;{point.x: %b %d}&quot;</span><span>,</span><span> </span><span>tags</span><span>$</span><span>br</span><span>())))</span><span> </span><span>%>%</span><span> </span><span>hc_plotOptions</span><span>(</span><span>series</span><span> </span><span>=</span><span> </span><span>list</span><span>(</span><span>borderWidth</span><span> </span><span>=</span><span> </span><span>0</span><span>,</span><span> </span><span>pointWidth</span><span> </span><span>=</span><span> </span><span>4</span><span>))</span><span> </span><span>%>%</span><span> </span><span>hc_add_theme</span><span>(</span><span>hc_theme_smpl</span><span>())</span><span>
</span><span>hc</span><span>
</span></code></pre>
</div>
<p><iframe src="http://jkunst.com/htmlwidgets/replicating-nyt-weather-app/highchart_ljwskxz.html"></iframe></p>
<p><a target="_blank" rel="nofollow" href="http://jkunst.com/htmlwidgets/replicating-nyt-weather-app/highchart_ljwskxz.html">open</a></p>
<blockquote>
<p><em>No data to display</em>. All acording to the plan XD.</p>
</blockquote>
<h2>Temperature Data</h2>
<p>We’ll select the temperature columns from the data and do some wrangling,<br>
gather, spread, separate and recodes to get a nice <strong>tidy data frame</strong>.</p>
<div>
<pre><code><span>dtempgather</span><span> </span><span>&lt;-</span><span> </span><span>data</span><span> </span><span>%>%</span><span> </span><span>select</span><span>(</span><span>dt</span><span>,</span><span> </span><span>starts_with</span><span>(</span><span>&quot;temp&quot;</span><span>))</span><span> </span><span>%>%</span><span> </span><span>select</span><span>(</span><span>-</span><span>temp_rec_high</span><span>,</span><span> </span><span>-</span><span>temp_rec_low</span><span>)</span><span> </span><span>%>%</span><span> </span><span>rename</span><span>(</span><span>temp_actual_max</span><span> </span><span>=</span><span> </span><span>temp_max</span><span>,</span><span>
</span><span>temp_actual_min</span><span> </span><span>=</span><span> </span><span>temp_min</span><span>)</span><span> </span><span>%>%</span><span> </span><span>gather</span><span>(</span><span>key</span><span>,</span><span> </span><span>value</span><span>,</span><span> </span><span>-</span><span>dt</span><span>)</span><span> </span><span>%>%</span><span> </span><span>mutate</span><span>(</span><span>key</span><span> </span><span>=</span><span> </span><span>str_replace</span><span>(</span><span>key</span><span>,</span><span> </span><span>&quot;temp_&quot;</span><span>,</span><span> </span><span>&quot;&quot;</span><span>))</span><span> </span><span>dtempspread</span><span> </span><span>&lt;-</span><span> </span><span>dtempgather</span><span> </span><span>%>%</span><span> </span><span>separate</span><span>(</span><span>key</span><span>,</span><span> </span><span>c</span><span>(</span><span>&quot;serie&quot;</span><span>,</span><span> </span><span>&quot;type&quot;</span><span>),</span><span> </span><span>sep</span><span> </span><span>=</span><span> </span><span>&quot;_&quot;</span><span>)</span><span> </span><span>%>%</span><span> </span><span>spread</span><span>(</span><span>type</span><span>,</span><span> </span><span>value</span><span>)</span><span>
</span><span>temps</span><span> </span><span>&lt;-</span><span> </span><span>dtempspread</span><span> </span><span>%>%</span><span> </span><span>mutate</span><span>(</span><span>serie</span><span> </span><span>=</span><span> </span><span>factor</span><span>(</span><span>serie</span><span>,</span><span> </span><span>levels</span><span> </span><span>=</span><span> </span><span>c</span><span>(</span><span>&quot;rec&quot;</span><span>,</span><span> </span><span>&quot;avg&quot;</span><span>,</span><span> </span><span>&quot;actual&quot;</span><span>)),</span><span>
</span><span>serie</span><span> </span><span>=</span><span> </span><span>fct_recode</span><span>(</span><span>serie</span><span>,</span><span> </span><span>Record</span><span> </span><span>=</span><span> </span><span>&quot;rec&quot;</span><span>,</span><span> </span><span>Normal</span><span> </span><span>=</span><span> </span><span>&quot;avg&quot;</span><span>,</span><span> </span><span>Observed</span><span> </span><span>=</span><span> </span><span>&quot;actual&quot;</span><span>))</span><span>
</span><span>head</span><span>(</span><span>temps</span><span>)</span><span>
</span></code></pre>
</div>
<table>
<thead>
<tr>
<th>dt</th>
<th>serie</th>
<th>max</th>
<th>min</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.42e+12</td>
<td>Observed</td>
<td>39</td>
<td>27</td>
</tr>
<tr>
<td>1.42e+12</td>
<td>Normal</td>
<td>39</td>
<td>28</td>
</tr>
<tr>
<td>1.42e+12</td>
<td>Record</td>
<td>62</td>
<td>-4</td>
</tr>
<tr>
<td>1.42e+12</td>
<td>Observed</td>
<td>42</td>
<td>35</td>
</tr>
<tr>
<td>1.42e+12</td>
<td>Normal</td>
<td>39</td>
<td>28</td>
</tr>
<tr>
<td>1.42e+12</td>
<td>Record</td>
<td>68</td>
<td>2</td>
</tr>
</tbody>
</table>
<p>Now whe can add this data to the <em>highchart</em> object using <code>hc_add_series</code>:</p>
<div>
<pre><code><span>hc</span><span> </span><span>&lt;-</span><span> </span><span>hc</span><span> </span><span>%>%</span><span> </span><span>hc_add_series</span><span>(</span><span>temps</span><span>,</span><span> </span><span>type</span><span> </span><span>=</span><span> </span><span>&quot;columnrange&quot;</span><span>,</span><span>
</span><span>hcaes</span><span>(</span><span>dt</span><span>,</span><span> </span><span>low</span><span> </span><span>=</span><span> </span><span>min</span><span>,</span><span> </span><span>high</span><span> </span><span>=</span><span> </span><span>max</span><span>,</span><span> </span><span>group</span><span> </span><span>=</span><span> </span><span>serie</span><span>),</span><span>
</span><span>color</span><span> </span><span>=</span><span> </span><span>c</span><span>(</span><span>&quot;#ECEBE3&quot;</span><span>,</span><span> </span><span>&quot;#C8B8B9&quot;</span><span>,</span><span> </span><span>&quot;#A90048&quot;</span><span>))</span><span> </span><span>hc</span><span>
</span></code></pre>
</div>
<p><iframe src="http://jkunst.com/htmlwidgets/replicating-nyt-weather-app/highchart_jgcwqay.html"></iframe></p>
<p><a target="_blank" rel="nofollow" href="http://jkunst.com/htmlwidgets/replicating-nyt-weather-app/highchart_jgcwqay.html">open</a></p>
<p>A really similar chart of what we want!</p>
<p>The original chart show records of temprerature. So<br>
we need to filter the days with temperature records using the columns<br>
<code>temp_rec_high</code> and <code>temp_rec_low</code>, then some gathers and tweaks. Then<br>
set some options to show the points, like use fill color and some longer<br>
radius.</p>
<div>
<pre><code><span>records</span><span> </span><span>&lt;-</span><span> </span><span>data</span><span> </span><span>%>%</span><span>
</span><span>select</span><span>(</span><span>dt</span><span>,</span><span> </span><span>temp_rec_high</span><span>,</span><span> </span><span>temp_rec_low</span><span>)</span><span> </span><span>%>%</span><span> </span><span>filter</span><span>(</span><span>temp_rec_high</span><span> </span><span>!=</span><span> </span><span>&quot;NULL&quot;</span><span> </span><span>|</span><span> </span><span>temp_rec_low</span><span> </span><span>!=</span><span> </span><span>&quot;NULL&quot;</span><span>)</span><span> </span><span>%>%</span><span> </span><span>dmap_if</span><span>(</span><span>is.character</span><span>,</span><span> </span><span>str_extract</span><span>,</span><span> </span><span>&quot;\\d+&quot;</span><span>)</span><span> </span><span>%>%</span><span> </span><span>dmap_if</span><span>(</span><span>is.character</span><span>,</span><span> </span><span>as.numeric</span><span>)</span><span> </span><span>%>%</span><span> </span><span>gather</span><span>(</span><span>type</span><span>,</span><span> </span><span>value</span><span>,</span><span> </span><span>-</span><span>dt</span><span>)</span><span> </span><span>%>%</span><span> </span><span>filter</span><span>(</span><span>!</span><span>is.na</span><span>(</span><span>value</span><span>))</span><span> </span><span>%>%</span><span> </span><span>mutate</span><span>(</span><span>type</span><span> </span><span>=</span><span> </span><span>str_replace</span><span>(</span><span>type</span><span>,</span><span> </span><span>&quot;temp_rec_&quot;</span><span>,</span><span> </span><span>&quot;&quot;</span><span>),</span><span>
</span><span>type</span><span> </span><span>=</span><span> </span><span>paste</span><span>(</span><span>&quot;This year record&quot;</span><span>,</span><span> </span><span>type</span><span>))</span><span>
</span><span>pointsyles</span><span> </span><span>&lt;-</span><span> </span><span>list</span><span>(</span><span>
</span><span>symbol</span><span> </span><span>=</span><span> </span><span>&quot;circle&quot;</span><span>,</span><span>
</span><span>lineWidth</span><span>=</span><span> </span><span>1</span><span>,</span><span>
</span><span>radius</span><span>=</span><span> </span><span>4</span><span>,</span><span>
</span><span>fillColor</span><span>=</span><span> </span><span>&quot;#FFFFFF&quot;</span><span>,</span><span>
</span><span>lineColor</span><span>=</span><span> </span><span>NULL</span><span>
</span><span>)</span><span>
</span><span>head</span><span>(</span><span>records</span><span>)</span><span>
</span></code></pre>
</div>
<table>
<thead>
<tr>
<th>dt</th>
<th>type</th>
<th>value</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.44e+12</td>
<td>This year record high</td>
<td>95</td>
</tr>
<tr>
<td>1.44e+12</td>
<td>This year record high</td>
<td>97</td>
</tr>
<tr>
<td>1.45e+12</td>
<td>This year record high</td>
<td>74</td>
</tr>
<tr>
<td>1.45e+12</td>
<td>This year record high</td>
<td>67</td>
</tr>
<tr>
<td>1.45e+12</td>
<td>This year record high</td>
<td>67</td>
</tr>
<tr>
<td>1.45e+12</td>
<td>This year record high</td>
<td>68</td>
</tr>
</tbody>
</table>
<div>
<pre><code><span>hc</span><span> </span><span>&lt;-</span><span> </span><span>hc</span><span> </span><span>%>%</span><span> </span><span>hc_add_series</span><span>(</span><span>records</span><span>,</span><span> </span><span>&quot;point&quot;</span><span>,</span><span> </span><span>hcaes</span><span>(</span><span>x</span><span> </span><span>=</span><span> </span><span>dt</span><span>,</span><span> </span><span>y</span><span> </span><span>=</span><span> </span><span>value</span><span>,</span><span> </span><span>group</span><span> </span><span>=</span><span> </span><span>type</span><span>),</span><span>
</span><span>marker</span><span> </span><span>=</span><span> </span><span>pointsyles</span><span>)</span><span>
</span><span>hc</span><span>
</span></code></pre>
</div>
<p><iframe src="http://jkunst.com/htmlwidgets/replicating-nyt-weather-app/highchart_nidtayp.html"></iframe></p>
<p><a target="_blank" rel="nofollow" href="http://jkunst.com/htmlwidgets/replicating-nyt-weather-app/highchart_nidtayp.html">open</a></p>
<p>We’re good.</p>
<h2>Precipitation Data</h2>
<p>A nice feture of the NYTs app is and the chart is show the precipitaion by<br>
month. This data is in other axis. So we need to create a list with 2 axis<br>
using the <code>create_yaxis</code> helper and the adding this axis to the chart.</p>
<div>
<pre><code><span>axis</span><span> </span><span>&lt;-</span><span> </span><span>create_yaxis</span><span>(</span><span>
</span><span>naxis</span><span> </span><span>=</span><span> </span><span>2</span><span>,</span><span>
</span><span>heights</span><span> </span><span>=</span><span> </span><span>c</span><span>(</span><span>3</span><span>,</span><span>1</span><span>),</span><span>
</span><span>sep</span><span> </span><span>=</span><span> </span><span>0.05</span><span>,</span><span>
</span><span>turnopposite</span><span> </span><span>=</span><span> </span><span>FALSE</span><span>,</span><span>
</span><span>showLastLabel</span><span> </span><span>=</span><span> </span><span>FALSE</span><span>,</span><span>
</span><span>startOnTick</span><span> </span><span>=</span><span> </span><span>FALSE</span><span>)</span><span>
</span></code></pre>
</div>
<p>Manually add titles (I know this can be more elegant) and options.</p>
<div>
<pre><code><span>axis</span><span>[[</span><span>1</span><span>]]</span><span>$</span><span>title</span><span> </span><span>&lt;-</span><span> </span><span>list</span><span>(</span><span>text</span><span> </span><span>=</span><span> </span><span>&quot;Temperature&quot;</span><span>)</span><span>
</span><span>axis</span><span>[[</span><span>1</span><span>]]</span><span>$</span><span>labels</span><span> </span><span>&lt;-</span><span> </span><span>list</span><span>(</span><span>format</span><span> </span><span>=</span><span> </span><span>&quot;{value}?F&quot;</span><span>)</span><span>
</span><span>axis</span><span>[[</span><span>2</span><span>]]</span><span>$</span><span>title</span><span> </span><span>&lt;-</span><span> </span><span>list</span><span>(</span><span>text</span><span> </span><span>=</span><span> </span><span>&quot;Precipitation&quot;</span><span>)</span><span>
</span><span>axis</span><span>[[</span><span>2</span><span>]]</span><span>$</span><span>min</span><span> </span><span>&lt;-</span><span> </span><span>0</span><span>
</span><span>hc</span><span> </span><span>&lt;-</span><span> </span><span>hc_yAxis_multiples</span><span>(</span><span>hc</span><span>,</span><span> </span><span>axis</span><span>)</span><span>
</span><span>hc</span><span>
</span></code></pre>
</div>
<p><iframe src="http://jkunst.com/htmlwidgets/replicating-nyt-weather-app/highchart_iyewkoc.html"></iframe></p>
<p><a target="_blank" rel="nofollow" href="http://jkunst.com/htmlwidgets/replicating-nyt-weather-app/highchart_iyewkoc.html">open</a></p>
<p>The 2 axis are ready, now we need add the data. We will add 12 series<br>
-one for each month- but we want to asociate 1 legend for all these 12<br>
series, so we need to use <code>id</code> and <code>linkedTo</code> parameters and obviously.<br>
That’s why the <code>id</code> will be a <code>'p'</code> for the firt element and then NA<br>
to the other 11. And then linked this 11 to the first series (<code>id = 'p'</code>).</p>
<div>
<pre><code><span>precip</span><span> </span><span>&lt;-</span><span> </span><span>select</span><span>(</span><span>data</span><span>,</span><span> </span><span>dt</span><span>,</span><span> </span><span>precip_value</span><span>,</span><span> </span><span>month</span><span>)</span><span>
</span><span>hc</span><span> </span><span>&lt;-</span><span> </span><span>hc</span><span> </span><span>%>%</span><span>
</span><span>hc_add_series</span><span>(</span><span>precip</span><span>,</span><span> </span><span>type</span><span> </span><span>=</span><span> </span><span>&quot;area&quot;</span><span>,</span><span> </span><span>hcaes</span><span>(</span><span>dt</span><span>,</span><span> </span><span>precip_value</span><span>,</span><span> </span><span>group</span><span> </span><span>=</span><span> </span><span>month</span><span>),</span><span>
</span><span>name</span><span> </span><span>=</span><span> </span><span>&quot;Precipitation&quot;</span><span>,</span><span> </span><span>color</span><span> </span><span>=</span><span> </span><span>&quot;#008ED0&quot;</span><span>,</span><span> </span><span>lineWidth</span><span> </span><span>=</span><span> </span><span>1</span><span>,</span><span>
</span><span>yAxis</span><span> </span><span>=</span><span> </span><span>1</span><span>,</span><span> </span><span>fillColor</span><span> </span><span>=</span><span> </span><span>&quot;#EBEAE2&quot;</span><span>,</span><span> </span><span>id</span><span> </span><span>=</span><span> </span><span>c</span><span>(</span><span>&quot;p&quot;</span><span>,</span><span> </span><span>rep</span><span>(</span><span>NA</span><span>,</span><span> </span><span>11</span><span>)),</span><span> </span><span>linkedTo</span><span> </span><span>=</span><span> </span><span>c</span><span>(</span><span>NA</span><span>,</span><span> </span><span>rep</span><span>(</span><span>&quot;p&quot;</span><span>,</span><span> </span><span>11</span><span>)))</span><span>
</span></code></pre>
</div>
<p>The same way we’ll add the normal precipitations by month.</p>
<div>
<pre><code><span>precipnormal</span><span> </span><span>&lt;-</span><span> </span><span>data</span><span> </span><span>%>%</span><span> </span><span>select</span><span>(</span><span>dt</span><span>,</span><span> </span><span>precip_normal</span><span>,</span><span> </span><span>month</span><span>)</span><span> </span><span>%>%</span><span> </span><span>group_by</span><span>(</span><span>month</span><span>)</span><span> </span><span>%>%</span><span> </span><span>filter</span><span>(</span><span>row_number</span><span>()</span><span> </span><span>%in%</span><span> </span><span>c</span><span>(</span><span>1</span><span>,</span><span> </span><span>n</span><span>()))</span><span> </span><span>%>%</span><span>
</span><span>ungroup</span><span>()</span><span> </span><span>%>%</span><span> </span><span>fill</span><span>(</span><span>precip_normal</span><span>)</span><span>
</span><span>hc</span><span> </span><span>&lt;-</span><span> </span><span>hc</span><span> </span><span>%>%</span><span> </span><span>hc_add_series</span><span>(</span><span>precipnormal</span><span>,</span><span> </span><span>&quot;line&quot;</span><span>,</span><span> </span><span>hcaes</span><span>(</span><span>x</span><span> </span><span>=</span><span> </span><span>dt</span><span>,</span><span> </span><span>y</span><span> </span><span>=</span><span> </span><span>precip_normal</span><span>,</span><span> </span><span>group</span><span> </span><span>=</span><span> </span><span>month</span><span>),</span><span>
</span><span>name</span><span> </span><span>=</span><span> </span><span>&quot;Normal Precipitation&quot;</span><span>,</span><span> </span><span>color</span><span> </span><span>=</span><span> </span><span>&quot;#008ED0&quot;</span><span>,</span><span> </span><span>yAxis</span><span> </span><span>=</span><span> </span><span>1</span><span>,</span><span>
</span><span>id</span><span> </span><span>=</span><span> </span><span>c</span><span>(</span><span>&quot;np&quot;</span><span>,</span><span> </span><span>rep</span><span>(</span><span>NA</span><span>,</span><span> </span><span>11</span><span>)),</span><span> </span><span>linkedTo</span><span> </span><span>=</span><span> </span><span>c</span><span>(</span><span>NA</span><span>,</span><span> </span><span>rep</span><span>(</span><span>&quot;np&quot;</span><span>,</span><span> </span><span>11</span><span>)),</span><span>
</span><span>lineWidth</span><span> </span><span>=</span><span> </span><span>1</span><span>)</span><span>
</span></code></pre>
</div>
<h2>Volia</h2>
<p>Curious how the chart looks? Me too! Nah, I saw the chart before this post.</p>
<div>
<pre><code><span>hc</span><span>
</span></code></pre>
</div>
<p><iframe src="http://jkunst.com/htmlwidgets/replicating-nyt-weather-app/highchart_nbmedoh.html"></iframe></p>
<p><a target="_blank" rel="nofollow" href="http://jkunst.com/htmlwidgets/replicating-nyt-weather-app/highchart_nbmedoh.html">open</a></p>
<p>With R you can create a press style chart with some wrangling and charting.<br>
Now with a little of love we can make the code resuable to make a shiny app.</p>
<p><iframe height="750px" width="100%" src="https://jbkunst.shinyapps.io/shiny-nyt-temp/"></iframe></p>
<h2>Homework</h2>
<p>Someone put the grid lines for the 2 axis as the original NYT app please to<br>
these charts! I will grateful if someone code that details.</p>
<p>See you :B!</p>
<p><img alt="giphy gif" src="https://i0.wp.com/media.giphy.com/media/xT0GqGrvB5PgQYSKGc/giphy.gif?w=456&ssl=1" data-recalc-dims="1"> <a target="_blank" rel="nofollow" href="https://www.instagram.com/p/BGVGtVJvi5X/?taken-by=napkinapocalypse&hl=en">source</a></p>
<p><div><div><div><div data-width="55" data-show-faces="false" data-send="true" data-layout="box_count" data-height="62" data-href="https://www.r-bloggers.com/replicating-nyt-weather-app/"></div></div><div><a data-url="https://www.r-bloggers.com/replicating-nyt-weather-app/" data-counturl="https://www.r-bloggers.com/replicating-nyt-weather-app/" data-count="vertical" data-text="Replicating NYT Weather App" class="twitter-share-button" data-via="rbloggers" href="https://twitter.com/share"></a></div><div></div></div><div></div></div>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="http://jkunst.com/r/replicating-nyt-weather-app/"> Jkunst - R category</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 title="The R Project for Statistical Computing" rel="nofollow" href="https://www.r-project.org/">R</a> news and <a title="R tutorials" rel="nofollow" href="https://www.r-bloggers.com/?s=tutorial">tutorials</a> on topics such as: <a title="Data science" rel="nofollow" href="https://www.r-bloggers.com/?s=data%20science">Data science</a>, <a title="Big Data" rel="nofollow" href="https://www.r-bloggers.com/?s=Big%20Data">Big Data, <a title="R jobs" rel="nofollow" href="https://www.r-users.com/">R jobs</a>, visualization (<a title="ggplot and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/?s=ggplot2">ggplot2</a>, <a title="Boxplots using lattice and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/?s=boxplot">Boxplots</a>, <a title="Maps and gis" rel="nofollow" href="https://www.r-bloggers.com/?s=map">maps</a>, <a title="Animation in R" rel="nofollow" href="https://www.r-bloggers.com/?s=animation">animation</a>), programming (<a title="RStudio IDE for R" rel="nofollow" href="https://www.r-bloggers.com/?s=RStudio">RStudio</a>, <a title="Sweave and literate programming" rel="nofollow" href="https://www.r-bloggers.com/?s=sweave">Sweave</a>, <a title="LaTeX in R" rel="nofollow" href="https://www.r-bloggers.com/?s=LaTeX">LaTeX</a>, <a title="SQL and databases" rel="nofollow" href="https://www.r-bloggers.com/?s=SQL">SQL</a>, <a title="Eclipse IDE for R" rel="nofollow" href="https://www.r-bloggers.com/?s=eclipse">Eclipse</a>, <a title="git and github, Version Control System" rel="nofollow" href="https://www.r-bloggers.com/?s=git">git</a>, <a title="Large data in R using Hadoop" rel="nofollow" href="https://www.r-bloggers.com/?s=hadoop">hadoop</a>, <a title="Web Scraping of google, facebook, yahoo, twitter and more using R" rel="nofollow" href="https://www.r-bloggers.com/?s=Web+Scraping">Web Scraping</a>) statistics (<a title="Regressions and ANOVA analysis tutorials" rel="nofollow" href="https://www.r-bloggers.com/?s=regression">regression</a>, <a title="principal component analysis tutorial" rel="nofollow" href="https://www.r-bloggers.com/?s=PCA">PCA</a>, <a title="Time series" rel="nofollow" href="https://www.r-bloggers.com/?s=time+series">time series</a>, <a title="finance trading" rel="nofollow" href="https://www.r-bloggers.com/?s=trading">trading</a>) and more...
<img height="1" alt="" width="1" src="http://feeds.feedburner.com/~r/RBloggers/~4/QI7bqkstQ3o"></a></div>