tutorial on how to create R-independent infographiq

[bbest]

Open infographiq.Rproj to launch RStudio in that working directory. Then create a vignette, aka article via:

# create article (once)
usethis::use_vignette("standalone-html", "Building a Standalone HTML Infographiq")

# knit articles (iteratively)
pkgdown::build_articles()

# build all (once before commit)
pkgdown::build_site()

Also see the devtools cheatsheet, noting that many functions have moved from devtools:: to usethis::.

[bbest]

Hi @7yl4r,

Here's a proposed example R-independent interactive infographic, aka infogaraphiq, aka "intelligent infographic", from @superjai's Test infographic | Test Drupal Site (see view-source) and notes | iea-auto - Google Docs on Github repo reorganization:

<!-- infographiq: layout -->
<div class="container-fluid">
  <div class="row">
    <div class="col-md-9">
      <div id="svg"/>
    </div>
    <div class="col-md-3">
      <div id="toc"/>
    </div>
  </div>
</div>

<!-- infographiq: css & js dependencies -->
<script src="https://marinebon.github.io/infographiqJS/libs/bootstrap_v3/bootstrap.min.js"></script>
<link  href="https://marinebon.github.io/infographiqJS/libs/bootstrap_v3/bootstrap.min.css" rel="stylesheet" />
<link  href="https://marinebon.github.io/infographiqJS/libs/font-awesome_v4/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://marinebon.github.io/infographiqJS/libs/d3_v5/js/d3.v5.min.js"></script>
<script src="https://marinebon.github.io/infographiqJS/libs/infographiq_v1.0/js/infographiq.js"></script>
<link  href="https://marinebon.github.io/infographiqJS/libs/infographiq_v1.0/css/infographiq.css" rel="stylesheet" />

<!-- infographiq: link_svg() -->
<script>
  link_svg({
    svg: "https://noaa-iea.github.io/fk-esr-info/assets/svg/FKIEA_Ecosystem.svg", 
    csv: "https://docs.google.com/spreadsheets/d/e/2PACX-1vSAROGVpYB58Zkr8P0iwJdTMRPNLZtJ07IyUn-dQ62C2HMuCEScyl8x7urCD7QbRXQYSIJwDn_wku9G/pub?gid=0&single=true&output=csv",
    svg_id: "svg", 
    toc_id: "toc",
    toc_style: "accordion",
    modal_url_pfx: "http://noaa-iea.github.io/fk-esr-info/modals/"});
</script>

Note the revised JS/CSS source URLs according to these Github repo tweaks:

1. +infographiqJS simple JS lib core to all,
2. +infographiqR optional R functions for Rmd websites and similar,
3. ∆infographiq as bookdown documentation core site describing interoperable elements

I also tweaked the arguments to link_svg().

[bbest]

@7yl4r, also check out @superjai's awesome infographiq demo showing effect of different arguments to JS function link_svg():

https://marinebon.org/infographiq/infographiq-demonstration.html

[7yl4r]

I think @superjai 's excellent docs have covered this well and I have neglected this issue. If there is still a blindspot please reopen and let me know how to help.