refactor Semiotic examples

Author: timelyportfolio

inst/examples/semiotic.R

@@ -1,5 +1,6 @@
 library(htmltools)
 library(reactR)
+library(tidyr)
 
 #cat(
 #  babel_transform(
@@ -8,43 +9,39 @@ library(reactR)
 #  file = "../semiotic/dotplot.js"
 #)
 
+# for now use temporarily build standalone from my github
+#  but hope this gets resolved with
+#  https://github.com/emeeks/semiotic/issues/70
 semiotic <- htmlDependency(
   name = "semiotic",
   version = "1.2.4",
   src = c(href = "https://rawgit.com/timelyportfolio/semiotic/standalone/dist"),
   script = "semiotic.js"
 )
 
+# original data was in wide format
+dotwide <- data.frame(
+  region = c("Developed regions", "Developing regions", "Northern Africa", "Sub-Saharan Africa", "Latin America and the Caribbean", "Caucasus and Central Asia", "Eastern Asia", "Eastern Asia excluding China", "Southern Asia", "Southern Asia excluding India", "South-eastern Asia", "Western Asia", "Oceania", "World"),
+  y1990 = c(7.6, 36.4, 30, 45.5, 22.1, 25.7, 24.5, 11.6, 50.6, 49.3, 27.4, 27.5, 26.3, 33.3),
+  y2013 = c(3.4, 22, 13.3, 31.1, 9.2, 14.8, 7.7, 7.5, 29.5, 30.1, 14.4, 13.7, 21.3, 20),
+  stringsAsFactors = FALSE
+)
+
+# convert to long format in R rather than JavaScript
+dotlong <- gather(dotwide, type, value, -region)
+
 dotplot <- tags$script(HTML(babel_transform(
-'
+sprintf('
 const colors = {
   y1990: "#00a2ce",
   y2013: "#4d430c"
 };
 
 const dotRadius = 8;
 
-const baseData = [
-  { region: "Developed regions", y1990: 7.6, y2013: 3.4 },
-  { region: "Developing regions", y1990: 36.4, y2013: 22 },
-  { region: "Northern Africa", y1990: 30, y2013: 13.3 },
-  { region: "Sub-Saharan Africa", y1990: 45.5, y2013: 31.1 },
-  { region: "Latin America and the Caribbean", y1990: 22.1, y2013: 9.2 },
-  { region: "Caucasus and Central Asia", y1990: 25.7, y2013: 14.8 },
-  { region: "Eastern Asia", y1990: 24.5, y2013: 7.7 },
-  { region: "Eastern Asia excluding China", y1990: 11.6, y2013: 7.5 },
-  { region: "Southern Asia", y1990: 50.6, y2013: 29.5 },
-  { region: "Southern Asia excluding India", y1990: 49.3, y2013: 30.1 },
-  { region: "South-eastern Asia", y1990: 27.4, y2013: 14.4 },
-  { region: "Western Asia", y1990: 27.5, y2013: 13.7 },
-  { region: "Oceania", y1990: 26.3, y2013: 21.3 },
-  { region: "World", y1990: 33.3, y2013: 20 }
-];
-
-const data = [
-  ...baseData.map(d => ({ region: d.region, type: "y1990", value: d.y1990 })),
-  ...baseData.map(d => ({ region: d.region, type: "y2013", value: d.y2013 }))
-];
+const baseData = %s
+
+const data = %s;
 
 const lineAnnotations = baseData.map(d => Object.assign({ type: "range" }, d));
 
@@ -95,7 +92,10 @@ const dotplot =
 />
 
 ReactDOM.render(dotplot, document.body)
-'
+',
+  jsonlite::toJSON(dotwide, dataframe="rows"),
+  jsonlite::toJSON(dotlong, dataframe="rows")
+)
 )))
 
 browsable(