<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/how-to-format-numbers-dates-and-time-using-in-d3-htmlwidgets-in-r/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="https://www.displayr.com/how-to-format-numbers-dates-and-time-using-in-d3-htmlwidgets-in-r/?utm_medium=Feed&utm_source=Syndication"> R – Displayr</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p>If you have ever spent any time investigating where the cool kids play in the data visualization world you will know it is all about <a rel="nofollow" href="https://d3js.org/" target="_blank">D3</a>. For most of us, D3 is a bit too hard to use directly. It is a JavaScript library, which means that to use it you need to be a half-decent programmer.</p>
<p>Fortunately, we get to use it in all the cool <a rel="nofollow" href="http://gallery.htmlwidgets.org/" target="_blank">htmlwidgets</a> that have been built for R, such as <span>plotly</span>. However, a practical challenge when using these htmlwidgets is that they require you to know enough D3 in order to provide formatting instructions for numbers, dates, and times. This post provides a cheat sheet explaining how to do this.</p>
<hr>
<h2><span>Formatting Numbers</span></h2>
<p>The general structure of a D3 number format is <code>[,][.precision][type].</code> The square brackets are not part of the format but signify 3 distinct parts:</p>
<ol>
<li>The first character is an optional comma. This determines whether to separate groups of 3 digits (before the decimal place) by commas.</li>
<li>Second, there is a dot followed by an integer (which I labeled as “precision” in the above). The integer usually sets the number of decimal places. There are exceptions, where the integer sets the number of significant digits.</li>
<li>The final part is a single character code, with meanings and examples as described in the table below.</li>
</ol>
<table>
<thead>
<tr>
<th>Type</th>
<th>Description</th>
<th>Example: 1/17 with precision = 3 </th>
<th>Example: 123456789 with precision = 1 and comma separation</th>
</tr>
</thead>
<tbody>
<tr>
<td>f</td>
<td>Fixed number of decimal places</td>
<td>0.059</td>
<td>123,456,789.0</td>
</tr>
<tr>
<td>%</td>
<td>Multiplied by 100 with % symbol and fixed number of decimal places </td>
<td>5.882%</td>
<td>12,345,678,900.0%</td>
</tr>
<tr>
<td>e</td>
<td>Scientific (exponential) notation. A coefficient with a fixed number of decimal places, multiplied by a power of 10.</td>
<td>5.882e-2</td>
<td>1.2e+8</td>
</tr>
<tr>
<td>s</td>
<td>Metric (SI) units suffix with a fixed number of significant digits.</td>
<td>58.8m</td>
<td>100M</td>
</tr>
</tbody>
</table>
<p></p>
<p>There is a lot more to D3 number formats than I have just shown. If you want to know more about alignment, handling negative signs and bases then <a rel="nofollow" href="https://github.com/d3/d3-format/blob/master/README.md#format" target="_blank">click here</a>.</p>
<hr>
<h2><span>Formatting Dates and Times</span></h2>
<p>“May 15 2017 3pm” could also be written as “15/5/17 15:00”. Many people and organizations have their own conventions for dates. It is frustrating not to be able to show a date in the format you want, which is where D3’s flexibility comes in.</p>
<p>The general structure of a date or time format is a sequence of <em>directives</em>, each of which is a letter preceded by the percentage sign. Each directive specifies a unit of time. For example, <span>“</span>%Y %b %d<span>” means 4 digit year followed by 3 letter month followed by 2 digit day, such as “2016 Dec 25”. A list of useful directives is shown below:</span></p>
<ul>
<li><code>%a</code> – abbreviated weekday name</li>
<li><code>%A</code> – full weekday name</li>
<li><code>%b</code> – abbreviated month name</li>
<li><code>%B</code> – full month name</li>
<li><code>%d</code> – zero-padded day of the month as a decimal number [01,31]</li>
<li><code>%H</code> – hour (24-hour clock) as a decimal number [00,23]</li>
<li><code>%I</code> – hour (12-hour clock) as a decimal number [01,12]</li>
<li><code>%m</code> – month as a decimal number [01,12]</li>
<li><code>%M</code> – minute as a decimal number [00,59]</li>
<li><code>%p</code> – either AM or PM</li>
<li><code>%S</code> – second as a decimal number [00,59]</li>
<li><code>%y</code> – year without century as a decimal number [00,99]</li>
<li><code>%Y</code> – year with century as a decimal number</li>
</ul>
<p>A more complex example would be “%m/%d/%y %I:%M %p”, which produces output such as “02/28/17 03:35 PM”. Note that here I have used the colon and forward slash as separators. In the previous example, the separator was the space.</p>
<p>As with numbers, a lot more options are available for dates and times which are <a rel="nofollow" href="https://github.com/d3/d3-time-format/blob/master/README.md#timeFormat" target="_blank">listed here</a>.</p>
<hr>
<h2><span>Conclusion</span></h2>
<p>D3 is a powerful and concise way to specify the format that you want. You can use D3 within the R charting packages <a rel="nofollow" href="https://plot.ly/r/" target="_blank">plotly</a> and <a rel="nofollow" href="https://github.com/Displayr/flipChart" target="_blank">flipChart</a>.</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://www.displayr.com/how-to-format-numbers-dates-and-time-using-in-d3-htmlwidgets-in-r/?utm_medium=Feed&utm_source=Syndication"> R – Displayr</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 width="1" alt="" src="http://feeds.feedburner.com/~r/RBloggers/~4/BXo2wzxpBzc" height="1"></a></div>