POPULARITY
What makes a great Shiny app? Anything that helps your users explore and find answers from data. And it helps when your apps is beautiful and fast. It is now easier than ever for Shiny developers to create these beautiful, dynamic, quick-reacting, multipage shiny apps. In this episode of the Shiny Developer Serie -- the first of two parts -- Eric Nantz hosts Herman Sontrop and Kenton Russell as they introduce the tools behind their Movie Vue R Shiny application. They submitted this application to the 2021 Shiny Contest and have shared the code and documentation with the Shiny developer community. Part 1 is a high-level tour of what is inside the Movie Vue R Shiny application and how the Vue javascript framework is used to offer R and Shiny components really nice user interface elements.Resources mentioned in the episodeMovie Vue R Shiny App: friss.shinyapps.io/shiny-vue-rContest Submission Post on RStudio CommunityApp GitHub repository: github.com/FrissAnalytics/shiny-vue-rDiscussion slides available at this linkVue.js - Progressive JavaScript framework: vuejs.orgVuetify - Material design framework for Vue: vuetifyjs.comHTML templates article: shiny.rstudio.com/articles/templates.htmlMaterial design icons: materialdesignicons.comhttp-vue-loader - load .vue files from your HTML/JS: github.com/FranckFreiburger/http-vue-loaderVuex getting started guide: vuex.vuejs.org/guideVue Router - The official router for Vue.js: router.vuejs.orgUI component for Globe Data Visualization using ThreeJS/WebGL: globe.glLodash - A modern JavaScript utility library delivering modularity, performance & extras: lodash.comd3.js - Data-Driven Documents: d3js,orgMitt - Tiny 200b functional event emitter / pubsub: github.com/developit/mittOverlay Scrollbars - A javascript scrollbar plugin which hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling: kingsora.github.io/OverlayScrollbarsKent's listviewer HTML widget for viewing lists: cran.r-project.org/package=listviewerplumber - Turn your R code into a web API: www.rplumber.ioEpisode Timestamps00:00:00 Episode Introduction 00:01:00 Introduction to Herman Sontrop 00:06:10 Introduction to Kenton Russell 00:10:00 High-level walkthrough of Movie Vue R 00:19:25 Diving into the code that drives Movie Vue R 00:22:35 Overview and motivation behind Vue 00:38:30 Vue instance example 00:40:00 Vue reactivty examples 00:46:10 Vue.js components are like Shiny modules 00:49:50 Single file components 00:54:16 Breaking down a Vue component into useful parts; props, data, methods, computed, and watch 00:57:20 Vuetify, tap into many pre-built components, styles, and more 01:10:00 Covid Globe Example in Shiny app 01:12:40 Rendering a ggplot 01:15:15 Summarizing parts of the Movie Vue R app 01:19:10 A look at template.html. A detailed walk through the organization of the app's HTML and files 01:26:30 Where R and Shiny are added to a Vue app. And how your app can send messages back to Shiny and R 01:31:20 Loading images and ggplots 01:38:00 Episode wrapup
What makes a great Shiny app? Anything that helps your users explore and find answers from data. And it helps when your apps is beautiful and fast. It is now easier than ever for Shiny developers to create these beautiful, dynamic, quick-reacting, multipage shiny apps. In this episode of the Shiny Developer Serie -- the first of two parts -- Eric Nantz hosts Herman Sontrop and Kenton Russell as they introduce the tools behind their Movie Vue R Shiny application. They submitted this application to the 2021 Shiny Contest and have shared the code and documentation with the Shiny developer community. Part 1 is a high-level tour of what is inside the Movie Vue R Shiny application and how the Vue javascript framework is used to offer R and Shiny components really nice user interface elements. Resources mentioned in the episode Movie Vue R Shiny App: friss.shinyapps.io/shiny-vue-r (https://friss.shinyapps.io/shiny-vue-r/) Contest Submission Post (https://community.rstudio.com/t/movie-vue-r-shiny-contest-submission/104905) on RStudio Community App GitHub repository: github.com/FrissAnalytics/shiny-vue-r (https://github.com/FrissAnalytics/shiny-vue-r) Discussion slides available at this link (https://shinydevseries-assets.us-east-1.linodeobjects.com/ShinyMovieVueR.pptx) Vue.js - Progressive JavaScript framework: vuejs.org (https://vuejs.org) Vuetify - Material design framework for Vue: vuetifyjs.com (https://vuetifyjs.com/en) HTML templates article: shiny.rstudio.com/articles/templates.html (https://shiny.rstudio.com/articles/templates.html) Material design icons: materialdesignicons.com (https://materialdesignicons.com/) http-vue-loader - load .vue files from your HTML/JS: github.com/FranckFreiburger/http-vue-loader (https://github.com/FranckFreiburger/http-vue-loader) Vuex getting started guide: vuex.vuejs.org/guide (https://vuex.vuejs.org/guide/) Vue Router - The official router for Vue.js: router.vuejs.org (https://router.vuejs.org/) UI component for Globe Data Visualization using ThreeJS/WebGL: globe.gl (https://globe.gl/) Lodash - A modern JavaScript utility library delivering modularity, performance & extras: lodash.com (https://lodash.com/) d3.js - Data-Driven Documents: d3js,org (https://d3js.org/) Mitt - Tiny 200b functional event emitter / pubsub: github.com/developit/mitt (https://github.com/developit/mitt) Overlay Scrollbars - A javascript scrollbar plugin which hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling: kingsora.github.io/OverlayScrollbars (https://kingsora.github.io/OverlayScrollbars) Kent's listviewer HTML widget for viewing lists: cran.r-project.org/package=listviewer (https://cran.r-project.org/package=listviewer) plumber - Turn your R code into a web API: www.rplumber.io (https://www.rplumber.io/) Episode Timestamps 00:00:00 (https://youtube.com/watch?v=SkFLHbHrPD4&t=0s) Episode Introduction 00:01:00 (https://youtube.com/watch?v=SkFLHbHrPD4&t=60s) Introduction to Herman Sontrop 00:06:10 (https://youtube.com/watch?v=SkFLHbHrPD4&t=370s) Introduction to Kenton Russell 00:10:00 (https://youtube.com/watch?v=SkFLHbHrPD4&t=600s) High-level walkthrough of Movie Vue R 00:19:25 (https://youtube.com/watch?v=SkFLHbHrPD4&t=1165s) Diving into the code that drives Movie Vue R 00:22:35 (https://youtube.com/watch?v=SkFLHbHrPD4&t=1355s) Overview and motivation behind Vue 00:38:30 (https://youtube.com/watch?v=SkFLHbHrPD4&t=2310s) Vue instance example 00:40:00 (https://youtube.com/watch?v=SkFLHbHrPD4&t=2400s) Vue reactivty examples 00:46:10 (https://youtube.com/watch?v=SkFLHbHrPD4&t=2770s) Vue.js components are like Shiny modules 00:49:50 (https://youtube.com/watch?v=SkFLHbHrPD4&t=2990s) Single file components 00:54:16 (https://youtube.com/watch?v=SkFLHbHrPD4&t=3256s) Breaking down a Vue component into useful parts; props, data, methods, computed, and watch 00:57:20 (https://youtube.com/watch?v=SkFLHbHrPD4&t=3440s) Vuetify, tap into many pre-built components, styles, and more 01:10:00 (https://youtube.com/watch?v=SkFLHbHrPD4&t=4200s) Covid Globe Example in Shiny app 01:12:40 (https://youtube.com/watch?v=SkFLHbHrPD4&t=4360s) Rendering a ggplot 01:15:15 (https://youtube.com/watch?v=SkFLHbHrPD4&t=4515s) Summarizing parts of the Movie Vue R app 01:19:10 (https://youtube.com/watch?v=SkFLHbHrPD4&t=4750s) A look at template.html. A detailed walk through the organization of the app's HTML and files 01:26:30 (https://youtube.com/watch?v=SkFLHbHrPD4&t=5190s) Where R and Shiny are added to a Vue app. And how your app can send messages back to Shiny and R 01:31:20 (https://youtube.com/watch?v=SkFLHbHrPD4&t=5480s) Loading images and ggplots 01:38:00 (https://youtube.com/watch?v=SkFLHbHrPD4&t=5880s) Episode wrapup
The panel talks with Jay Hariani, CTO of GovTribe. GovTribe is an enterprise application built with Laravel and VueJS that provides government contractors with a centralized location for available government contract and grant information that is easily searchable and customizable. The discussion covers why GovTribe went with Laravel and Vue, what their strengths are, and other tools that GovTribe uses to get very good SEO results and customer satisfaction. Panel Lindsay Wardell Raymond Camden Steve Edwards Guest Jay Hariani Sponsors Dev Heroes Accelerator Links GovTribe GitHub | vuejs/laravel-elixir-vue-2 GitHub | GoogleChrome/rendertron D3.js - Data-Driven Documents Chart.js | Open source HTML5 Charts for your website D3 in Depth | In depth information on D3.js Picks Jay- AirPods Max Lindsay- Youtube | Rene Ritchie Lindsay- Saffron Raymond- Tenet (2020) Steve- Scrooged (1988)
The panel talks with Jay Hariani, CTO of GovTribe. GovTribe is an enterprise application built with Laravel and VueJS that provides government contractors with a centralized location for available government contract and grant information that is easily searchable and customizable. The discussion covers why GovTribe went with Laravel and Vue, what their strengths are, and other tools that GovTribe uses to get very good SEO results and customer satisfaction. Panel Lindsay Wardell Raymond Camden Steve Edwards Guest Jay Hariani Sponsors Dev Heroes Accelerator Links GovTribe GitHub | vuejs/laravel-elixir-vue-2 GitHub | GoogleChrome/rendertron D3.js - Data-Driven Documents Chart.js | Open source HTML5 Charts for your website D3 in Depth | In depth information on D3.js Picks Jay- AirPods Max Lindsay- Youtube | Rene Ritchie Lindsay- Saffron Raymond- Tenet (2020) Steve- Scrooged (1988)
Panel: Joe Eames Cory House Aimee Knight Special Guests: Ben Clinkinbeard In this episode, the JavaScript Jabber panelists talk about D3.js with Ben Clinkinbeard. D3.js is a JavaScript library that has you use declarative code to tell it what you want and then it figures out all of the browser inconsistencies and creates the notes for you. He talks about the two main concepts behind D3, scales and selections, which once you understand make D3 a lot more user friendly. He then touches on SPGs and discusses his Learn D3 in 5 Days course. In particular, we dive pretty deep on: What is D3.js? Stands for Data Driven Documents JavaScript How much of the learning curve is attributed to learning D3? SPG 2 main concepts behind D3: scales and selections Is learning about SPGs a prerequisite to leaning D3? How serious are you talking when saying idiosyncrasies? SPG tag Understanding positioning in SPG Positions with CSS transforms Are you required to use SPG? Not required to use SPG with D3 Canvas SPG is vector based SPG utility function Responseivefy Learn D3 in 5 Days course Is there and overlap with D3 and React? And much, much more! Links: D3.js JavaScript Responsivefy Learn D3 in 5 Days course React @bclinkinbeard Ben’s GitHub Picks: Cory React cheat sheet “Why software engineers disagree about everything” by Haseeb Qureshi Joe Eames “JavaScript vs. TypeScript vs. ReasonML” by Dr. Axel Rauschmayer Aimee “How To Use Technical Debt In Your Favor” Neuroscience News Twitter Ben ComLink
Panel: Joe Eames Cory House Aimee Knight Special Guests: Ben Clinkinbeard In this episode, the JavaScript Jabber panelists talk about D3.js with Ben Clinkinbeard. D3.js is a JavaScript library that has you use declarative code to tell it what you want and then it figures out all of the browser inconsistencies and creates the notes for you. He talks about the two main concepts behind D3, scales and selections, which once you understand make D3 a lot more user friendly. He then touches on SPGs and discusses his Learn D3 in 5 Days course. In particular, we dive pretty deep on: What is D3.js? Stands for Data Driven Documents JavaScript How much of the learning curve is attributed to learning D3? SPG 2 main concepts behind D3: scales and selections Is learning about SPGs a prerequisite to leaning D3? How serious are you talking when saying idiosyncrasies? SPG tag Understanding positioning in SPG Positions with CSS transforms Are you required to use SPG? Not required to use SPG with D3 Canvas SPG is vector based SPG utility function Responseivefy Learn D3 in 5 Days course Is there and overlap with D3 and React? And much, much more! Links: D3.js JavaScript Responsivefy Learn D3 in 5 Days course React @bclinkinbeard Ben’s GitHub Picks: Cory React cheat sheet “Why software engineers disagree about everything” by Haseeb Qureshi Joe Eames “JavaScript vs. TypeScript vs. ReasonML” by Dr. Axel Rauschmayer Aimee “How To Use Technical Debt In Your Favor” Neuroscience News Twitter Ben ComLink
Panel: Joe Eames Cory House Aimee Knight Special Guests: Ben Clinkinbeard In this episode, the JavaScript Jabber panelists talk about D3.js with Ben Clinkinbeard. D3.js is a JavaScript library that has you use declarative code to tell it what you want and then it figures out all of the browser inconsistencies and creates the notes for you. He talks about the two main concepts behind D3, scales and selections, which once you understand make D3 a lot more user friendly. He then touches on SPGs and discusses his Learn D3 in 5 Days course. In particular, we dive pretty deep on: What is D3.js? Stands for Data Driven Documents JavaScript How much of the learning curve is attributed to learning D3? SPG 2 main concepts behind D3: scales and selections Is learning about SPGs a prerequisite to leaning D3? How serious are you talking when saying idiosyncrasies? SPG tag Understanding positioning in SPG Positions with CSS transforms Are you required to use SPG? Not required to use SPG with D3 Canvas SPG is vector based SPG utility function Responseivefy Learn D3 in 5 Days course Is there and overlap with D3 and React? And much, much more! Links: D3.js JavaScript Responsivefy Learn D3 in 5 Days course React @bclinkinbeard Ben’s GitHub Picks: Cory React cheat sheet “Why software engineers disagree about everything” by Haseeb Qureshi Joe Eames “JavaScript vs. TypeScript vs. ReasonML” by Dr. Axel Rauschmayer Aimee “How To Use Technical Debt In Your Favor” Neuroscience News Twitter Ben ComLink
John Lindquist interviews Ben Clinkinbeard, a veteran developer and egghead instructor. He currently works as a consultant, focusing on data visualization. Ben discusses his career path, the benefits of having a mentor, and the importance of Data Driven Documents.Ben talks about how he worked on a multi-year project for the Colorado Department of Education where he was visualizing aggregate standardized testing data. He discusses his experience there and how it left a long lasting enjoyment of the craft. He also talks about why he chose D3 for his data visualization work, and how he feels that it's the best option in the JS space.A lot of companies have D3 as a "nice to have" but not many devs have that skill. There is a lot of demand but not enough supply. Seeing this, Ben created a screencast for egghead as our very first instructor! His interest in info-products sparked and he talks about his experience and the challenges he faced building his email course and then a full-fledged D3 and SVG book.Transcript"Data Viz using D3 with Ben Clinkinbeard" TranscriptResourcesD3 in 5 DaysBen ClinkinbeardEggheadGithubTwitterJohn LindquistTwitteregghead.ioGithubWebsite
Frog House - バンクーバーのクリエイター専用シェアハウス | Frog appear.in – one click video conversations Docker - Wikipedia Nuxt.js - ユニバーサル Vue.js アプリケーション zeit/next.js: Framework for server-rendered or statically-exported React apps Vue.js Support? · Issue #77 · zeit/next.js D3.js - Data-Driven Documents Gallery · d3/d3 Wiki 現代的JavaScriptおれおれAdvent Calendar2017やります。ひとりで。 | Ginpen.com 超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus) ポケ - Wikipedia
Dan Shultz is using d3.js, dc.js, and other tools to visualize data. Show notes: d3js.org - Data Driven Documents dc.js - Dimensional Charting Highcharts / AnyChart Parallel Coordinate Chart - I found an interesting example at Columbia.edu. Dashing D3 - newsletter, training, tutorials Dan's blog: Dan vs Machine Dan's employer: Clarivoy Dan Shultz is on Twitter He has some apps in the various markets, check them out: Microsoft Amazon Google Play Want to be on the next episode? You can! All you need is the willingness to talk about something technical. Theme music is "Crosscutting Concerns" by The Dirty Truckers, check out their music on Amazon or iTunes.
Ben talks to developer Joanne Cheng about lessons learned from the conference circuit, as well as the subject of her latest conf talk, Data-Driven-Documents within JavaScript, and trends in dashboard design. D3 Interactive Data Visualization for the Web Edward Tufte Why Most Dashboards Fail- Stephen Few FlowingData Overtone Let's Talk About Dials Joanne on Twitter AirConf