Git Product home page Git Product logo

infographiqr's Introduction

infographiq

pkgdown

infographiqR

R library for supporting... creation of interactive infographics for data-driven storytelling. This tool will help you build your own interactive infographics website from only csv files and svg images. Please contact us by opening an issue if you need help getting started with this tool.

[ TODO: fix below to integrate with new infographiq, infographiqJS ]

Demos

The following regional infographics were generated using the infographiq package:

New Architecture

  • knit_modals(): iterate over unique modal_id to render parameterized rmd
    • knit_modal_plots(): iterate over plots within modal

Usage overview

  1. Define your infographic by creating the following files:
  • ./svg_elements.csv
  • ./plot_indicators.csv
  • ./svg/*.svg

For example files see the info-demo repository, or one of the examples cited above.

  1. Use infographiq from an R console to generate the website:

Install the infographiq R package and those it depends on. You only need to do this once.

# install required packages
install.packages(c("tidyverse", "stringr", "rmarkdown", "dygraphs", "xts", "lubridate", "geojsonio", "RColorBrewer", "leaflet", "crosstalk", "servr", "roxygen2", "futile.logger"))

# install infographiq from Github
if (!require('devtools')) install.packages('devtools')
devtools::install_github('marinebon/infographiqR')

Load the library and create the site.

# load
library(infographiqR)

# run i.e.
create_info_site(site_title = "Monterey Bay Infographics", render_modals = T)

Developer workflow

We developed this R package using the excellent devtools package. If you are actively changing your local copy of the infographiq package, ie functions contained in it, you can reload with:

library('devtools')
install_local('../infographiqR')

# or
install('../infographiqR")

To build documentation (using roxygen2, and assuming working directory is in 'infographiq')...

document()

More Background

We will be actively developing this package (2017-11 to 2018-04), so please check back for updates. Here is some more background material that we will more seamlessly fold into documentation here at some point:

Dependencies

pkgs <- c(
  "brew", "dygraphs", "futile.logger", "lubridate", "rmarkdown", "servr", "stringr",
  "tidyverse", "tools", "xts")
for (p in pkgs){
  devtools::use_package(p)
}

Updating website

To update the website for the R package, update documentation and regenerate the website outputs into the docs/ folder:

devtools::document()
pkgdown::deploy_to_branch()

Then to view the site from RStudio, switch to branch gh-pages in the Git pane and in the Files pane click on index.html to View in Web Browser.

Vignettes

devtools::use_vignette("quick-start")

Automatic website update

Setup Github Action to build pkgdown website with the following:

usethis::use_github_action("pkgdown")

The use_github_action() injects pkgdown.yaml and displays:

✓ Setting active project to '/Users/bbest/github/infographiq'
✓ Creating '.github/'
✓ Adding '^\\.github$' to '.Rbuildignore'
✓ Adding '*.html' to '.github/.gitignore'
✓ Creating '.github/workflows/'
✓ Writing '.github/workflows/pkgdown.yaml'

infographiqr's People

Contributors

7yl4r avatar bbest avatar mspector13 avatar reikopm avatar superjai avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

infographiqr's Issues

new plot function for streamgraphs

Breaking this issue out from #21

@reikopm is wants a plotter for eDNA data and provides R code for creating a stacked bar graph:

txt = "urlstr='https://raw.githubusercontent.com/reikopm/info-mb/master/prep/data/phytoplankton/efm_taxa_structure_means.csv'
dat <- read.csv(url(urlstr))
dat$Season <- factor(dat$Season, levels = c("Spring", "Summer", "Fall", "Winter"))

library(plotly)

t <- list(
family = 'helvetica',
size = 24,
color = 'black')

p1 <- plot_ly(dat, x = ~Season, y = ~asyn, type = 'bar', name = 'Synechococcus',width=2040, height=1080) %>%
add_trace(y = ~arfp, name = 'Red Fluorescing Picoplankton') %>%
add_trace(y = ~aprym, name = 'Haptophyte') %>%
add_trace(y = ~aaflag, name = 'Autotrophic Flagellate') %>%
add_trace(y = ~aadino, name = 'Autotrophic Dinoflagellate') %>%
add_trace(y = ~acryp, name = 'Cryptomonad') %>%
add_trace(y = ~aprasy, name = 'Prasinophyte') %>%
add_trace(y = ~aphaeo, name = 'Phaeocystsis') %>%
add_trace(y = ~apen, name = 'Pennate Diatom') %>%
add_trace(y = ~acen, name = 'Centric Diatom') %>%
add_trace(y = ~ahdino, name = 'Heterotrophic Dinoflagellate') %>%
add_trace(y = ~ahflag, name = 'Heterotrophic Flagellate') %>%
add_trace(y = ~achoano, name = 'Choanoflagellate') %>%
add_trace(y = ~ahcryp, name = 'Leucocryptos') %>%
add_trace(y = ~ahcil, name = 'Heterotrophic Ciliate') %>%
add_trace(y = ~aacil, name = 'Autotrophic Ciliate') %>%
layout(font=t,yaxis = list(title = 'mg C m-3'),barmode = 'stack') %>%
layout(font=t,title = 'Q10:Taxonomic Structure', margin = 1)
print(p1)"

image

This is also a good use-case for a streamgraph, so perhaps we should include a new plot-function option (ie a new .rmd.brew file in ./inst/plotting_functions/)

duplicate js in ./inst/site_template/

_svg.Rmd and d3-infographiq.js have some duplicate js. I believe d3-infographiq.js is what is actually being run. Is _svg.Rmd deprecated? Can we remove it?

`modal_after` caption markdown headers not working

example:

## Seaside sparrows (*Ammodramus maritimus*)

Seaside sparrows are the most saltmarsh-dependent songbird species in North America. They are considered a species of conservation concern across their range due to coastal land loss. Louisiana populations are year-round saltmarsh residents, where they eat seeds, insects, and even small crabs. They nest in *Spartina alterniflora* and other marsh grasses, and their nests sometimes flood during high spring tides or storm events. 

Should render with the header, but:
image

cleverly handle csv files from github

eg if user is trying to use something like https://github.com/mhepner90/LUMCON_ODOTCOMM18/blob/master/prep/data/snapper_nmfs.csv, we should auto-correct to https://raw.githubusercontent.com/mhepner90/LUMCON_ODOTCOMM18/master/prep/data/snapper_nmfs.csv

difference is just removing /blob and replacing github.com with raw.githubusercontent.com

non-group svg element silhouettes not activated

Some of the svg silhouettes are not activating, i.e. when I try to click on them nothing happens. I've checked the svg_id codes in svg_elements.csv and they appear to correspond with the id codes in pelagic.svg. For example Phytoplankton works, pinnipeds does not. pinnipeds.html does exist.

Processing ran without errors but issued two warnings,
Warning messages:
1: In if (!is.na(modal_caption)) { :
the condition has length > 1 and only the first element will be used
2: In if (!is.na(modal_caption)) { :
the condition has length > 1 and only the first element will be used

In info-mb I have updated the files, svg_elements.csv and plot_indicators.csv

Should I try to reset the element ids in pelagic.svg?

+ google analytics

google analytics would be good to add to these, but what is the best way to do that?

rework std deviation view

Rather than showing limits for std dev, areas of the lines could be color-ized or highlighted where they go outside of a threshold. @mceachronfwc noted in our meeting that this would be a more elegant (but admittedly more complicated) approach.

Are we happy with the current display or do we want to re-work it?

rm `/inst/example_fk/`

I think these demo files can be removed, since the info-demo repo now fills their role and I think they are already outdated.

ability to add text to home page

By "home page" I mean the index.html with the list of infographics.

Probably need to add a markdown insert like I did for the scene text (marinebon/infographiq/903b01c) or else allow overriding site templates (might be a more elegant (but also difficult to implement) solution).

rm error msg in modal with no plots

Jennifer wanted text and a link to the SB LTER site for the kelp canopy icon, so there is no graph. I added the text to the modal caption which appears with error messages. Can these be removed?
kelp_canopy_errors

[security] need to sanitize `plot_indicators.csv$plotting_function_call`

The addition of custom plotter functions currently evals the cell contents directly or code from an arbitrary brew file (see R/get_plotting_function_brew.R).

The risk here is that running create_info_site without carefully inspecting plot_indicators.csv and any .brew templates referenced therein might lead one to execute unexpected R code. It's no worse than copy-pasting an R script from the internet in the first place, but it's worth noting that we could improve this by sanitizing the input or running it in some sort of sandbox.

`there is no package called ‘...’` on install

This is weird, and unfortunately '...' is difficult to google for:

library('devtools')
> install_local('~/infographiq')
Installing infographiq
'/usr/lib/R/bin/R' --no-site-file --no-environ --no-save --no-restore --quiet  \
  CMD INSTALL '/tmp/RtmpIG6mLl/file6d667bb81f3f/infographiq'  \
  --library='/home/tylar/R/x86_64-pc-linux-gnu-library/3.4' --install-tests 

* installing *source* packageinfographiq...
** R
** inst
** preparing package for lazy loading
Error in loadNamespace(i, c(lib.loc, .libPaths()), versionCheck = vI[[i]]) : 
  there is no package called...ERROR: lazy loading failed for packageinfographiq* removing/home/tylar/R/x86_64-pc-linux-gnu-library/3.4/infographiq* restoring previous/home/tylar/R/x86_64-pc-linux-gnu-library/3.4/infographiqInstallation failed: Command failed (1)

I also see this error when trying to build docs:

> pkgdown::build_site()
══ Building pkgdown site ═══════════════════════════════════════════════════════
Reading from: '/home/tylar/infographiq'
Writing to:   '/home/tylar/infographiq/docs'
── Initialising site ───────────────────────────────────────────────────────────
── Building home ───────────────────────────────────────────────────────────────
Reading 'TODO.md'
Writing 'index.html'
── Building function reference ─────────────────────────────────────────────────
Updating infographiq documentation
Loading infographiq
Error in loadNamespace(i, c(lib.loc, .libPaths()), versionCheck = vI[[i]]) : 
  there is no package called...Calls: withCallingHandlers ... withRestarts -> withOneRestart -> doWithOneRestart -> <Anonymous>
Execution halted
Error in loadNamespace(i, c(lib.loc, .libPaths()), versionCheck = vI[[i]]) : 
  there is no package called...

Questions

update: Apologies, I'm a bit confused. Originally I cloned cr-metrics. Now I see that there are some new repositories. I think I need info-mb.

I have the data as csv files, and I've written R code to generate the graphs I want. I've cloned the repository to create the web page for the infographiq. Can I just upload my phytoplankton html file? or In the indicators.csv file there is a column called image_url. Can I put the url to my graphs there?

I'm looking for an easy way to do this without making changes to the master.
</ignore this>

support multiple plot types?

include plotting_function_call column in indicators.csv:

plot_series(title="my title")

raw_html_passthrough or img_wrapper could be functions that could be called too.

AZ order of list

Arrange list on right by AZ order OR maybe by theme (e.g. Trophic group, keystone, focal, etc.)

automatch taxonomy (WoRMS id) with species silhouette

Ideally, a WoRMS id code could automatically be associated with silhouette descriptions. Many available here:

Inspiration / Endorsement from Tobias W Spears:

I was wondering how many infographics your team has created to date. It would be useful to have the infographics linked to taxonomic classifications in an ontology. I think this type of resource could be used to automate some of the portrayal.

remove copyright

CJ: I don't think you can claim the copyright on bottom, should remove

adding data citations

Noted again during today's presentation: citations to the data being used need to be added.

Where would be the best place for these?

  1. in the modal dialog
  2. main page
  3. infographic view
  4. all three?

"take home message" on plot window?

How would you feel about a brief text "take home message" that goes at the top of the infographic plot window?

I'm thinking about the non-science audience, i.e. decision makers. Instead of leaving it up to the viewer to interpret the graphs, we give them the message we want them to hear, the sound bite.

So, for instance, say that sea urchins are abundant, which may not be a good thing. Or that the graph indicates that the urchin population is falling, which may be a good thing. It could be confusing because urchins are destructive but they are also a commercial product. We could even point them to a link, such as http://sanctuarysimon.org/news/2017/07/urchins-continue-to-dominate-parts-of-monterey-bay/

increase x-axis tickmark density

image

dygraphs seems to be defaulting to 2 tickmarks on the x-axis (1 every 10 years). It would probably look better with a few more.

biomass, percent coverage, abundance

Our phytoplankton measurements are converted to mg carbon m-3, which we have referred to as biomass.

How do you calculate your biomass and percent coverage?

Should I be calling our phytoplankton measurements 'abundance'?

fix links in captions in modals

links within modal captions don't work. I think this is b/c the modal is an iframe. There's probably an easy fix for this.

per-plot summary / text

As Frank suggested last week I think it is going to be important to add a small amount of text below each plot to give information about

  1. what the plot shows
  2. where the data is coming from
  3. links for more information?

I would like to get enough information together to mockup a single modal before deciding how to implement this technically.

some TODOs up for claiming:

  1. identify which modal (aka one silhouette within the corals page) we want to use to explore this concept
  2. write the text for inclusion in this modal
  3. prep some mockups of how we would do the display

new plot function for maps

I'm breaking this out from #21

using leaflet cluster markers

txt = "library(tidyverse)
library(leaflet)

leaflet(quakes) %>% 
  addTiles() %>% 
  addMarkers(
    clusterOptions = markerClusterOptions())"

eval(parse(text=txt))

or ddgridR

I'm not sure how this might change the shape of plot_indicators.csv though...

getting started with function create_site

I'm new to R and GitHub so please excuse my questions if they are naive. It looks to me that the function create_site creates new infographiq *.html for every entry in the csv_indicators.csv file with an entry in the csv_url column. I don't want to overwrite someone else's infographiq *.html

Am I supposed to edit the csv_indicators.csv to only create infographiq *.htmls for my indicator? And only pull my *.html to github?

I see there is a column in the csv_indicators.csv files for an image, but I don't see that it is used in the create_site code.

Thanks, -Reiko (MBARI)

rename `csv_url` to `data_url`?

In addressing #21 I found it easiest to abuse the csv_url column for non-csv data urls. Examples:

  • the new plotter embed_html uses the csv_url column for a link to the html
  • the new plotter include_graphic uses csv_url for a link to the image

This is a little confusing because the column name csv_url implies that the link is the csv data.
Ways we could resolve this:

  1. rename the column csv_url to data_url
  2. use a different (additional) column for embed_html and include_graphic

Short Slideshow for GEO PLEN

We should prepare ~2 slides to share w/ Frank & potentially use at the GEO PLEN that highlight how attendees can build on top of the demo by forking info-demo, info-fk, or info-mb and using infographiq to make their own infographics.

multiple columns on one plot

from @eqmh : We'd like to put two columns of data for instance: Mean SST and Climatology from the GHRSST data.

This might fall under #21 , but it may be fairly easy to modify the existing plot function to handle a list of col_y names in plot_indicators instead of implementing a whole new plotter.

inkscape w & h in .svg breaks dynamic-sizing within browser

Inkscape adds width & height attributes to svg files, which tends to override dynamic sizing from bootstrap.

example from info-mb/pelagic.svg:

<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="svg7302" version="1.1" inkscape:version="0.91 r13725" xml:space="preserve" width="990" height="765" viewBox="0 0 990 765" sodipodi:docname="pelagic.svg">

image

We need to do something to regain control of the size of the svg image. Options:

  1. rm the width & height from the svg file during site-build
  2. somehow tell the browser to ignore it?

Error in brew...: No valid input

I'm tring to build info_fk so this could be an issue over there or this might be my unfamiliarity with installing R packages, but I'm trying to make sense of this error when trying to run create_info_site():

> create_info_site()
Loading tidyverse: ggplot2
Loading tidyverse: tibble
Loading tidyverse: tidyr
Loading tidyverse: readr
Loading tidyverse: purrr
Loading tidyverse: dplyr
Conflicts with tidy packages ---------------------------------------------------
filter(): dplyr, stats
lag():    dplyr, stats
Parsed with column specification:
cols(
  svg = col_character(),
  svg_id = col_character(),
  label = col_character(),
  status_text = col_character(),
  status_color = col_character()
)
Error in brew(scene_brew, file.path(path_rmd, rmds[i])) : No valid input

This is after loading infographiq from my local repo using devtools (> load_all('../infographiq')).

Also uhhh... I think this is the traceback:

> traceback()
3: stop("No valid input")
2: brew(scene_brew, file.path(path_rmd, rmds[i])) at create_info_site.R#133
1: create_info_site()

Program crashes

Intermittently with this error message:
Error in file.copy(from = file.path(input, files), to = output_dir, recursive = TRUE) :
more 'from' files than 'to' files
In addition: There were 12 warnings (use warnings() to see them)

warnings()
Warning messages:
1: In dir.create(output_dir) :
cannot create dir 'C:\Users\reiko\Documents\gitrepos\info-mb\rmd..\docs', reason 'Permission denied'
2: In dir.create(output_lib_dir) :
cannot create dir 'C:\Users\reiko\Documents\gitrepos\info-mb\rmd..\docs\site_libs', reason 'No such file or directory'
3: In file.copy(file.path(lib_dir, lib), output_lib_dir, ... :
'recursive' will be ignored as 'to' is not a single existing directory
4: In file.create(to[okay]) :
cannot create file 'C:\Users\reiko\Documents\gitrepos\info-mb/rmd/../docs/site_libs', reason 'No such file or directory'

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.