Javascript for R Chapman & Hall/CRC The R Series Series Editors John M. Chambers, Department of Statistics, Stanford University, California, USA Torsten Hothorn, Division of Biostatistics, University of Zurich, Switzerland Duncan Temple Lang, Department of Statistics, University of California, Davis, USA Hadley Wickham, RStudio, Boston, Massachusetts, USA Recently Published Titles Statistical Inference via Data Science: A ModernDive into R and the Tidyverse Chester Ismay and Albert Y. Kim Reproducible Research with R and RStudio, Third Edition Christopher Gandrud Interactive Web-Based Data Visualization with R, plotly, and shiny Carson Sievert Learn R: As a Language Pedro J. Aphalo Using R for Modelling and Quantitative Methods in Fisheries Malcolm Haddon R For Political Data Science: A Practical Guide Francisco Urdinez and Andres Cruz R Markdown Cookbook Yihui Xie, Christophe Dervieux, and Emily Riederer Learning Microeconometrics with R Christopher P. Adams R for Conservation and Development Projects: A Primer for Practitioners Nathan Whitmore Using R for Bayesian Spatial and Spatio-Temporal Health Modeling Andrew B. Lawson Engineering Production-Grade Shiny Apps Colin Fay, Sébastien Rochette, Vincent Guyader, and Cervan Girard Javascript for R John Coene Advanced R Solutions Malte Grosser, Henning Bumann, and Hadley Wickham For more information about this series, please visit: https://www.crcpress.com/ Chapman--HallCRC-The-R-Series/book-series/CRCTHERSER Javascript for R John Coene First edition published 2021 by CRC Press 6000 Broken Sound Parkway NW, Suite 300, Boca Raton, FL 33487-2742 and by CRC Press 2 Park Square, Milton Park, Abingdon, Oxon, OX14 4RN © 2021 John Coene CRC Press is an imprint of Taylor & Francis Group, LLC The right of John Coene to be identified as author of this work has been asserted by him in accor- dance with sections 77 and 78 of the Copyright, Designs and Patents Act 1988. Reasonable efforts have been made to publish reliable data and information, but the author and pub- lisher cannot assume responsibility for the validity of all materials or the consequences of their use. The authors and publishers have attempted to trace the copyright holders of all material reproduced in this publication and apologize to copyright holders if permission to publish in this form has not been obtained. If any copyright material has not been acknowledged please write and let us know so we may rectify in any future reprint. Except as permitted under U.S. Copyright Law, no part of this book may be reprinted, reproduced, transmitted, or utilized in any form by any electronic, mechanical, or other means, now known or hereafter invented, including photocopying, microfilming, and recording, or in any information stor- age or retrieval system, without written permission from the publishers. For permission to photocopy or use material electronically from this work, access www.copyright.com or contact the Copyright Clearance Center, Inc. (CCC), 222 Rosewood Drive, Danvers, MA 01923, 978-750-8400. For works that are not available on CCC please contact [email protected] Trademark notice: Product or corporate names may be trademarks or registered trademarks and are used only for identification and explanation without intent to infringe. Library of Congress Cataloging‑in‑Publication Data ISBN: 9780367680640 (hbk) ISBN: 9780367680633 (pbk) ISBN: 9781003134046 (ebk) DOI: 10.1201/9781003134046 Typeset in Latin Modern font by KnowledgeWorks Global Ltd. Contents List of Figures xv Preface xix I Basics and Roadmap 1 1 Overview 3 1.1 Rationale . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1.2 Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 1.2.1 V8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 1.2.2 htmlwidgets . . . . . . . . . . . . . . . . . . . . . . . . 7 1.2.3 Shiny . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 1.3 Methods Amiss . . . . . . . . . . . . . . . . . . . . . . . . . 8 1.3.1 reactR & vueR . . . . . . . . . . . . . . . . . . . . . 8 1.3.2 r2d3 . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 2 Prerequisites 11 2.1 R Package Development . . . . . . . . . . . . . . . . . . . . . 11 2.1.1 Creating a Package. . . . . . . . . . . . . . . . . . . 12 2.1.2 Metadata . . . . . . . . . . . . . . . . . . . . . . . . 14 2.1.3 R code. . . . . . . . . . . . . . . . . . . . . . . . . . 15 2.1.4 Documentation . . . . . . . . . . . . . . . . . . . . . 16 2.1.5 Installed files . . . . . . . . . . . . . . . . . . . . . . 18 2.1.6 Build, load, and install. . . . . . . . . . . . . . . . . 18 2.2 JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 2.2.1 Serialising . . . . . . . . . . . . . . . . . . . . . . . . 19 v vi Contents 2.2.2 Tabular Data . . . . . . . . . . . . . . . . . . . . . . . 21 2.3 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 2.3.1 Developer Tools . . . . . . . . . . . . . . . . . . . . 23 2.3.2 Variable Declaration and Scope . . . . . . . . . . . . 24 2.3.3 Document Object Model. . . . . . . . . . . . . . . . . 27 2.4 Shiny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 2.4.1 Serving Static Files. . . . . . . . . . . . . . . . . . . 29 2.4.2 Htmltools . . . . . . . . . . . . . . . . . . . . . . . . 33 2.4.3 Serving vs. htmltools . . . . . . . . . . . . . . . . . . 36 II Data Visualisation 39 3 Introduction to Widgets 41 3.1 Plotly package . . . . . . . . . . . . . . . . . . . . . . . . . . 41 3.2 DT package . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 3.3 Crosstalk . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 3.4 Wrap-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 4 Basics of Building Widgets 49 4.1 Read and Study . . . . . . . . . . . . . . . . . . . . . . . . 49 4.2 Candidate Libraries . . . . . . . . . . . . . . . . . . . . . . 50 4.2.1 Plotly.js . . . . . . . . . . . . . . . . . . . . . . . . . 50 4.2.2 Highchart.js . . . . . . . . . . . . . . . . . . . . . . . . 51 4.2.3 Chart.js . . . . . . . . . . . . . . . . . . . . . . . . . 53 4.3 How It Works . . . . . . . . . . . . . . . . . . . . . . . . . . 54 5 Your First Widget 57 5.1 The Scaffold . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 5.2 The HTML Output . . . . . . . . . . . . . . . . . . . . . . 59 5.3 JavaScript Files . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Contents vii 6 A Realistic Widget 67 6.1 Dependencies . . . . . . . . . . . . . . . . . . . . . . . . . . 68 6.2 Implementation . . . . . . . . . . . . . . . . . . . . . . . . . 70 6.3 HTML Element . . . . . . . . . . . . . . . . . . . . . . . . . 75 7 The Full Monty 77 7.1 Dependencies . . . . . . . . . . . . . . . . . . . . . . . . . . 78 7.2 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 7.3 Working with Data . . . . . . . . . . . . . . . . . . . . . . . 82 7.4 Transforming Data . . . . . . . . . . . . . . . . . . . . . . . 85 7.4.1 Using JavaScript . . . . . . . . . . . . . . . . . . . . 85 7.4.2 Modify Serialiser . . . . . . . . . . . . . . . . . . . . 86 7.4.3 Replace Serialiser . . . . . . . . . . . . . . . . . . . . . 87 7.4.4 Modify the Data . . . . . . . . . . . . . . . . . . . . 88 7.4.5 Pros and Cons . . . . . . . . . . . . . . . . . . . . . 88 7.5 On Print Method . . . . . . . . . . . . . . . . . . . . . . . . 89 8 Advanced Topics 93 8.1 Shared Variables . . . . . . . . . . . . . . . . . . . . . . . . 93 8.1.1 Sizing . . . . . . . . . . . . . . . . . . . . . . . . . . 94 8.1.2 Sizing Policy . . . . . . . . . . . . . . . . . . . . . . 96 8.2 Resizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 8.3 Pre Render Hooks and Security . . . . . . . . . . . . . . . . 99 8.4 JavaScript Code . . . . . . . . . . . . . . . . . . . . . . . . 100 8.5 Prepend and Append Content . . . . . . . . . . . . . . . . . . 101 8.6 Dependencies . . . . . . . . . . . . . . . . . . . . . . . . . . 103 8.7 Compatibility . . . . . . . . . . . . . . . . . . . . . . . . . . 108 8.8 Unit Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 8.9 Performances . . . . . . . . . . . . . . . . . . . . . . . . . . 109 viii Contents 9 Linking Widgets 113 9.1 Crosstalk Examples . . . . . . . . . . . . . . . . . . . . . . 113 9.2 Crosstalk Requirements . . . . . . . . . . . . . . . . . . . . . 117 9.3 How it Works . . . . . . . . . . . . . . . . . . . . . . . . . . 118 9.3.1 Keys . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 9.3.2 Communication Lines . . . . . . . . . . . . . . . . . 119 9.3.3 Groups . . . . . . . . . . . . . . . . . . . . . . . . . 120 9.4 Crosstalk with Gio . . . . . . . . . . . . . . . . . . . . . . . 120 9.5 R code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 9.6 JavaScript Code . . . . . . . . . . . . . . . . . . . . . . . . 124 9.6.1 Send Selected Keys . . . . . . . . . . . . . . . . . . . 124 9.6.2 Set Selected Keys. . . . . . . . . . . . . . . . . . . . 125 9.7 Using Crosstalk with Gio . . . . . . . . . . . . . . . . . . . . 127 10 Final Revisions 131 10.1 Htmlwidgets and Data . . . . . . . . . . . . . . . . . . . . . . 131 10.2 Plethora of Options . . . . . . . . . . . . . . . . . . . . . . 133 10.3 Interface Design . . . . . . . . . . . . . . . . . . . . . . . . 135 10.4 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 III Web Development with Shiny 137 11 Bidirectional Communication 139 11.1 WebSocket an Shiny . . . . . . . . . . . . . . . . . . . . . . 139 11.2 Sessions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 11.3 Alerts, an example . . . . . . . . . . . . . . . . . . . . . . . 142 11.3.1 Explore . . . . . . . . . . . . . . . . . . . . . . . . . 142 11.3.2 From R to JavaScript . . . . . . . . . . . . . . . . . 144 11.3.3 Serialisation . . . . . . . . . . . . . . . . . . . . . . . 148 11.3.4 JavaScript to R . . . . . . . . . . . . . . . . . . . . . 150 Contents ix 12 A Complete Integration 155 12.1 Discover . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 12.2 Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 12.3 Dependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 12.4 Static Files . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 12.5 Skeleton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 12.6 From R to JavaScript . . . . . . . . . . . . . . . . . . . . . . 161 12.7 From JavaScript to R . . . . . . . . . . . . . . . . . . . . . 163 12.8 Input handler . . . . . . . . . . . . . . . . . . . . . . . . . . 166 12.9 As a Package . . . . . . . . . . . . . . . . . . . . . . . . . . 169 12.9.1 Dependencies . . . . . . . . . . . . . . . . . . . . . . 170 12.9.2 Trigger classification . . . . . . . . . . . . . . . . . . . 171 12.9.3 JavaScript code . . . . . . . . . . . . . . . . . . . . . 172 12.9.4 Input handler . . . . . . . . . . . . . . . . . . . . . . 173 12.9.5 Test . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 13 Tips and Tricks 177 13.1 Shiny Events . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 13.2 Table Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . 180 13.3 jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 14 Custom Outputs 187 14.1 Inner-workings . . . . . . . . . . . . . . . . . . . . . . . . . 188 14.2 Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 14.3 Output R Function . . . . . . . . . . . . . . . . . . . . . . . 190 14.4 Generate Output HTML . . . . . . . . . . . . . . . . . . . . 190 14.5 Output Renderer . . . . . . . . . . . . . . . . . . . . . . . . 193 14.6 JavaScript Output Binding . . . . . . . . . . . . . . . . . . 194 14.6.1 Boxxy Title . . . . . . . . . . . . . . . . . . . . . . . 195 14.6.2 Boxxy Value . . . . . . . . . . . . . . . . . . . . . . 196 14.6.3 Boxxy Background Color . . . . . . . . . . . . . . . . 197