knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>"
)

I have always loved this post Tufte in R, so I thought with it would be a great example for our new data-ui sparkline abilities.

library(dataui)
library(htmltools)
library(dplyr)
library(tidyr)
library(scales)
library(RCurl)

I get the data as the post suggest but change the code to use readr and adjust for new tidyr and dplyr API.

# recreate http://motioninsocial.com/tufte/ in dataui

# get data and make it long form
dd <- readr::read_csv(
  paste0(
    "http://gist.githubusercontent.com/GeekOnAcid/da022affd36310c96cd4/",
    "raw/9c2ac2b033979fcf14a8d9b2e3e390a4bcc6f0e3/us_nr_of_crimes_1960_2014.csv"
  )
) %>%
  pivot_longer(
    cols = 2:(ncol(dd)),
    names_to = "Crime.Type",
    values_to = "Crime.Rate"
  )
# source  "http://gist.githubusercontent.com/GeekOnAcid/da022affd36310c96cd4/raw/9c2ac2b033979fcf14a8d9b2e3e390a4bcc6f0e3/us_nr_of_crimes_1960_2014.csv"
dd <- structure(list(Year = c(1960, 1960, 1960, 1960, 1960, 1960, 1960, 
1960, 1960, 1960, 1961, 1961, 1961, 1961, 1961, 1961, 1961, 1961, 
1961, 1961, 1962, 1962, 1962, 1962, 1962, 1962, 1962, 1962, 1962, 
1962, 1963, 1963, 1963, 1963, 1963, 1963, 1963, 1963, 1963, 1963, 
1964, 1964, 1964, 1964, 1964, 1964, 1964, 1964, 1964, 1964, 1965, 
1965, 1965, 1965, 1965, 1965, 1965, 1965, 1965, 1965, 1966, 1966, 
1966, 1966, 1966, 1966, 1966, 1966, 1966, 1966, 1967, 1967, 1967, 
1967, 1967, 1967, 1967, 1967, 1967, 1967, 1968, 1968, 1968, 1968, 
1968, 1968, 1968, 1968, 1968, 1968, 1969, 1969, 1969, 1969, 1969, 
1969, 1969, 1969, 1969, 1969, 1970, 1970, 1970, 1970, 1970, 1970, 
1970, 1970, 1970, 1970, 1971, 1971, 1971, 1971, 1971, 1971, 1971, 
1971, 1971, 1971, 1972, 1972, 1972, 1972, 1972, 1972, 1972, 1972, 
1972, 1972, 1973, 1973, 1973, 1973, 1973, 1973, 1973, 1973, 1973, 
1973, 1974, 1974, 1974, 1974, 1974, 1974, 1974, 1974, 1974, 1974, 
1975, 1975, 1975, 1975, 1975, 1975, 1975, 1975, 1975, 1975, 1976, 
1976, 1976, 1976, 1976, 1976, 1976, 1976, 1976, 1976, 1977, 1977, 
1977, 1977, 1977, 1977, 1977, 1977, 1977, 1977, 1978, 1978, 1978, 
1978, 1978, 1978, 1978, 1978, 1978, 1978, 1979, 1979, 1979, 1979, 
1979, 1979, 1979, 1979, 1979, 1979, 1980, 1980, 1980, 1980, 1980, 
1980, 1980, 1980, 1980, 1980, 1981, 1981, 1981, 1981, 1981, 1981, 
1981, 1981, 1981, 1981, 1982, 1982, 1982, 1982, 1982, 1982, 1982, 
1982, 1982, 1982, 1983, 1983, 1983, 1983, 1983, 1983, 1983, 1983, 
1983, 1983, 1984, 1984, 1984, 1984, 1984, 1984, 1984, 1984, 1984, 
1984, 1985, 1985, 1985, 1985, 1985, 1985, 1985, 1985, 1985, 1985, 
1986, 1986, 1986, 1986, 1986, 1986, 1986, 1986, 1986, 1986, 1987, 
1987, 1987, 1987, 1987, 1987, 1987, 1987, 1987, 1987, 1988, 1988, 
1988, 1988, 1988, 1988, 1988, 1988, 1988, 1988, 1989, 1989, 1989, 
1989, 1989, 1989, 1989, 1989, 1989, 1989, 1990, 1990, 1990, 1990, 
1990, 1990, 1990, 1990, 1990, 1990, 1991, 1991, 1991, 1991, 1991, 
1991, 1991, 1991, 1991, 1991, 1992, 1992, 1992, 1992, 1992, 1992, 
1992, 1992, 1992, 1992, 1993, 1993, 1993, 1993, 1993, 1993, 1993, 
1993, 1993, 1993, 1994, 1994, 1994, 1994, 1994, 1994, 1994, 1994, 
1994, 1994, 1995, 1995, 1995, 1995, 1995, 1995, 1995, 1995, 1995, 
1995, 1996, 1996, 1996, 1996, 1996, 1996, 1996, 1996, 1996, 1996, 
1997, 1997, 1997, 1997, 1997, 1997, 1997, 1997, 1997, 1997, 1998, 
1998, 1998, 1998, 1998, 1998, 1998, 1998, 1998, 1998, 1999, 1999, 
1999, 1999, 1999, 1999, 1999, 1999, 1999, 1999, 2000, 2000, 2000, 
2000, 2000, 2000, 2000, 2000, 2000, 2000, 2001, 2001, 2001, 2001, 
2001, 2001, 2001, 2001, 2001, 2001, 2002, 2002, 2002, 2002, 2002, 
2002, 2002, 2002, 2002, 2002, 2003, 2003, 2003, 2003, 2003, 2003, 
2003, 2003, 2003, 2003, 2004, 2004, 2004, 2004, 2004, 2004, 2004, 
2004, 2004, 2004, 2005, 2005, 2005, 2005, 2005, 2005, 2005, 2005, 
2005, 2005, 2006, 2006, 2006, 2006, 2006, 2006, 2006, 2006, 2006, 
2006, 2007, 2007, 2007, 2007, 2007, 2007, 2007, 2007, 2007, 2007, 
2008, 2008, 2008, 2008, 2008, 2008, 2008, 2008, 2008, 2008, 2009, 
2009, 2009, 2009, 2009, 2009, 2009, 2009, 2009, 2009, 2010, 2010, 
2010, 2010, 2010, 2010, 2010, 2010, 2010, 2010, 2011, 2011, 2011, 
2011, 2011, 2011, 2011, 2011, 2011, 2011, 2012, 2012, 2012, 2012, 
2012, 2012, 2012, 2012, 2012, 2012, 2013, 2013, 2013, 2013, 2013, 
2013, 2013, 2013, 2013, 2013, 2014, 2014, 2014, 2014, 2014, 2014, 
2014, 2014, 2014, 2014), Crime.Type = c("Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft", "Total", "Violent", "Property", 
"Murder", "Rape", "Robbery", "Aggravated-Assault", "Burglary", 
"Larceny-Theft", "Vehicle-Theft"), Crime.Rate = c(1887.2, 160.9, 
1726.3, 5.1, 9.6, 60.1, 86.1, 508.6, 1034.7, 183, 1906.1, 158.1, 
1747.9, 4.8, 9.4, 58.3, 85.7, 518.9, 1045.4, 183.6, 2019.8, 162.3, 
1857.5, 4.6, 9.4, 59.7, 88.6, 535.2, 1124.8, 197.4, 2180.3, 168.2, 
2012.1, 4.6, 9.4, 61.8, 92.4, 576.4, 1219.1, 216.6, 2388.1, 190.6, 
2197.5, 4.9, 11.2, 68.2, 106.2, 634.7, 1315.5, 247.4, 2449, 200.2, 
2248.8, 5.1, 12.1, 71.7, 111.3, 662.7, 1329.3, 256.8, 2670.8, 
220, 2450.9, 5.6, 13.2, 80.8, 120.3, 721, 1442.9, 286.9, 2989.7, 
253.2, 2736.5, 6.2, 14, 102.8, 130.2, 826.6, 1575.8, 334.1, 3370.2, 
298.4, 3071.8, 6.9, 15.9, 131.8, 143.8, 932.3, 1746.6, 393, 3680, 
328.7, 3351.3, 7.3, 18.5, 148.4, 154.5, 984.1, 1930.9, 436.2, 
3984.5, 363.5, 3621, 7.9, 18.7, 172.1, 164.8, 1084.9, 2079.3, 
456.8, 4164.7, 396, 3768.8, 8.6, 20.5, 188, 178.8, 1163.5, 2145.5, 
459.8, 3961.4, 401, 3560.4, 9, 22.5, 180.7, 188.8, 1140.8, 1993.6, 
426.1, 4154.4, 417.4, 3737, 9.4, 24.5, 183.1, 200.5, 1222.5, 
2071.9, 442.6, 4850.4, 461.1, 4389.3, 9.8, 26.2, 209.3, 215.8, 
1437.7, 2489.5, 462.2, 5298.5, 487.8, 4810.7, 9.6, 26.3, 220.8, 
231.1, 1532.1, 2804.8, 473.7, 5287.3, 467.8, 4819.5, 8.7, 26.6, 
199.3, 233.2, 1448.2, 2921.3, 450, 5077.6, 475.9, 4601.7, 8.8, 
29.4, 190.7, 247, 1419.8, 2729.9, 451.9, 5140.4, 497.8, 4642.5, 
9, 31, 195.8, 262.1, 1434.6, 2747.4, 460.5, 5565.5, 548.9, 5016.6, 
9.8, 34.7, 218.4, 286, 1511.9, 2999.1, 505.6, 5950, 596.6, 5353.3, 
10.2, 36.8, 251.1, 298.5, 1684.1, 3167, 502.2, 5858.2, 594.3, 
5263.8, 9.8, 36, 258.7, 289.7, 1649.5, 3139.7, 474.7, 5603.7, 
571.1, 5032.5, 9.1, 34, 238.9, 289.1, 1488.8, 3084.9, 458.9, 
5175, 537.7, 4637.3, 8.3, 33.7, 216.5, 279.2, 1337.7, 2869, 430.8, 
5031.3, 539.2, 4492.1, 7.9, 35.7, 205.4, 290.2, 1263.7, 2791.3, 
437.1, 5207.1, 556.6, 4650.5, 8, 37.1, 208.5, 302.9, 1287.3, 
2901.2, 462, 5480.4, 620.1, 4881.8, 8.6, 38.1, 226, 347.4, 1349.8, 
3022.1, 509.8, 5550, 609.7, 4940.3, 8.3, 37.4, 212.7, 351.3, 
1329.6, 3081.3, 529.5, 5664.2, 637.2, 5027.1, 8.4, 37.6, 220.9, 
370.2, 1309.2, 3134.9, 582.9, 5741, 663.1, 5077.9, 8.7, 38.1, 
233, 383.4, 1276.3, 3171.3, 630.4, 5820.3, 731.8, 5088.5, 9.4, 
41.2, 257, 424.1, 1235.9, 3194.8, 657.8, 5897.8, 758.1, 5139.7, 
9.8, 42.3, 272.7, 433.3, 1252, 3228.8, 658.9, 5660.2, 757.5, 
4902.7, 9.3, 42.8, 263.6, 441.8, 1168.2, 3103, 631.5, 5484.4, 
746.8, 4737.7, 9.5, 41.1, 255.9, 440.3, 1099.2, 3032.4, 606.1, 
5373.5, 713.6, 4660, 9, 39.3, 237.7, 427.6, 1042, 3026.7, 591.3, 
5274.9, 684.5, 4591.3, 8.2, 37.1, 220.9, 418.3, 987.1, 3043.8, 
560.4, 5087.6, 636.6, 4451, 7.4, 36.3, 201.9, 390.9, 945, 2980.3, 
525.7, 4927.3, 611, 4316.3, 6.8, 35.9, 186.1, 382.1, 919.6, 2891.8, 
505.7, 4615.5, 566.4, 4049.1, 6.3, 34.4, 165.2, 360.5, 862, 2728.1, 
459, 4266.5, 523, 3743.6, 5.7, 32.8, 150.1, 334.3, 770.4, 2550.7, 
422.5, 4124.8, 506.5, 3618.3, 5.5, 32, 145, 324, 728.8, 2477.3, 
412.2, 4162.6, 504.5, 3658.1, 5.6, 31.8, 148.5, 318.6, 741.8, 
2485.7, 430.5, 4125, 494.4, 3630.6, 5.6, 33.1, 146.1, 309.5, 
747, 2450.7, 432.9, 4067, 475.8, 3591.2, 5.7, 32.3, 142.5, 295.4, 
741, 2416.5, 433.7, 3977.3, 463.2, 3514.1, 5.5, 32.4, 136.7, 
288.6, 730.3, 2362.3, 421.5, 3900.5, 469, 3431.5, 5.6, 31.8, 
140.8, 290.8, 726.9, 2287.8, 416.8, 3808.1, 473.6, 3334.5, 5.7, 
30.9, 149.4, 287.5, 729.4, 2206.8, 398.4, 3730.4, 466.9, 3263.5, 
5.6, 30, 147.6, 283.8, 722.5, 2177.8, 363.3, 3669, 457.5, 3211.5, 
5.4, 29.7, 145.7, 276.7, 732.1, 2167, 314.7, 3465.5, 431.9, 3036.1, 
5, 29.1, 133.1, 264.7, 717.7, 2064.5, 259.2, 3350.4, 404.5, 2945.9, 
4.8, 27.7, 119.3, 252.8, 701, 2005.8, 239.1, 3292.5, 387.1, 2905.4, 
4.7, 27, 113.9, 241.5, 701.3, 1974.1, 230, 3255.8, 387.8, 2868, 
4.7, 27.1, 113.1, 242.8, 672.2, 1965.4, 230.4, 3112.4, 379.1, 
2733.3, 4.5, 25.9, 109, 229.6, 610.4, 1901.6, 221.3, 2971.8, 
375.7, 2596.1, 4.5, 26.4, 102.2, 232.5, 542.5, 1837.3, 216.2)), row.names = c(NA, 
-550L), class = c("tbl_df", "tbl", "data.frame"))

This is the easiest and quickest way to get some colors for our plots. I think a splash of color will liven up the sparklines a little bit. However, normally I would spend a little more time selecting colors.

# color by type
colscale <- scales::brewer_pal(palette="Set3")(11)[-2]

Now for our graphics pipeline intentionally done in one long pipe. To accomplish a chart similar to the original would have required much less code. Since we have interactivity and some additional options, I wanted to put them to use. Drag your mouse over the chart to see what it can do.

dd %>%
  group_by(Crime.Type) %>%
  summarise(
    # get our band line values
    quart1 = quantile(Crime.Rate, 0.25),
    quart2 = quantile(Crime.Rate, 0.75),
    rate_last = tail(Crime.Rate, 1),
    # create our sparkline
    spk = list(dui_sparkline(
      # ugly but will make this better soon
      data = mapply(
        function(year,rate) {list(year = year, rate = rate)},
        Year, Crime.Rate,
        SIMPLIFY = FALSE
      ),
      height = 120,
      margin = list(top = 40, bottom = 20, right = 150, left = 30),
      # tell sparkline to get rate for y values
      valueAccessor = htmlwidgets::JS("(d) => d.rate"),
      # label is easier but tooltip omore flexible
      renderTooltip = htmlwidgets::JS(htmltools::HTML("
    function (_ref) {
      var datum = _ref.datum;
      return React.createElement(
          'div',
          {style: {margin: 0, padding: 0}},
          datum.year && React.createElement(
            'div',
            {style: {
              backgroundColor: 'black', color: 'white',
              padding: '4px 0px', margin: 0, textAlign: 'center'
            }},
            datum.year
          ),
          React.createElement(
            'div',
            {style: {fontWeight: 'bold', fontSize: '1.2em', padding: '6px 0'}},
            datum.y ? datum.y.toLocaleString(undefined, {maximumFractionDigits: 0}) : \"--\"
          )
      );
    }
      ")),
      components = list(
        dui_sparkpatternlines(
          id = "band_pattern",
          height = 4,
          width = 4,
          stroke = "#aaa",
          strokeWidth = 1,
          orientation = "diagonal"
        ),
        dui_sparkbandline(
          band = list(from = list(y=quart1[[1]]), to = list(y=quart2[[1]])),
          fill = "url(#band_pattern)"
        ),
        dui_sparklineseries(
          stroke = colscale[cur_group_id()]
        ),
        # let JavaScript data-ui determine min/max
        dui_sparkpointseries(
          points = list("min","max"),
          fill = colscale[cur_group_id()],
          renderLabel = htmlwidgets::JS("
            (d) => d.toLocaleString(undefined, {maximumFractionDigits: 0})
          ")
        ),
        dui_sparklabel(
          label = Crime.Type[[1]],
          x = 5,
          y = -20,
          anchor = "begin",
          fill = colscale[cur_group_id()],
          fillOpacity = 1
        ),
        dui_tooltip(
          components = list(
            dui_sparkverticalrefline(strokeDasharray="4,4"),
            dui_sparkpointseries(fill = "#fff", stroke = colscale[cur_group_id()])
          )
        )
      )
    ))
  ) %>%
  arrange(desc(rate_last)) %>%
  pull(spk) %>%
  tagList() # %>%
  # browsable() %>%
  # print()


timelyportfolio/dataui documentation built on July 15, 2020, 12:03 p.m.