marinebon / infographiqjs

Infographiq, ie intelligent interactive infographics, core JavaScript library

InfographiqJS

The core JavaScript library for Infographiq, an approach for intelligent interactive infographics. For a full tutorial on the Infographiq method, click here.

Part 1: Art + Data

Demonstration

To see the latest functionality, please try the:

• demo

Simple Example

Here is a simple infographic example, showing both Illustrator and Inkscape versions of the illustration, to walk through in the instructions:

• simple example
• download simple example

Changes

To see the latest changes, check out the:

• NEWS

Usage

This repository infographiqJS contains the core JavaScript component of "infographiq", ie intelligent interactive infographics, tying together the Art icons with a Table to find the Modal when clicked:

HTML

Here is an example of the raw HTML to paste into a page for rendering, including three basic components:

1. layout: the basic layout, possibly using Bootstrap grid layout options
2. css & js dependencies: Cascading Style Sheets (CSS) and JavaScript (JS) libraries
3. link_svg(): the core infographiqJS function; see below and demo for setting values of arguments.

<!-- define bootstrap layout that will contain the infographic -->
<div class="container-fluid">
  <div class="row">
    <div class="col-md-9">
      <div id = "svg1"></div>
    </div>
    <div class="col-md-3">
      <ul id="toc1"></ul>
    </div>
  </div>
</div>

<!-- infographiq: load css and javascript dependencies -->
<script src="https://code.jquery.com/jquery-1.9.1.min.js"
  integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" />

<!-- load infographiq v1.0 -->
<script src="https://marinebon.github.io/infographiqJS/libs/infographiq_latest/infographiq.js"></script>
<link  href="https://marinebon.github.io/infographiqJS/libs/infographiq_latest/infographiq.css" rel="stylesheet" />

<!--  run infographiq function to create clickable image -->
<script>
  link_svg({
    svg: "illustrator_example.svg", 
    csv: "icon_link.csv", 
    svg_id: "svg1", 
    toc_id: "toc1",
    toc_style: "accordion",
    text_toggle: "toggle_off",
    svg_filter: "illustrator_example.svg"});
</script>

link_svg()

Parameters for the link_svg() JavaScript function:

• Required parameters
  • svg: art (background + icons) in scalable vector graphics (*.svg) format.
  • csv: table in comma-seperated values (*.csv) format
• Optional parameters
  • svg_id: identifier of <div> tag for replacing with svg; default value of 'svg'.
  • toc_id: identifier of <div> tag for replacing with table of contents (toc) using csv; default value of 'toc'.
  • hover_color = 'yellow'
  • width = '100%'
  • height = '100%'
  • modal_url_pfx: base filepath of modal window hyperlinks
  • toc_style = "list"; table of contents (toc) style. Options are:
    • "accordion": Bootstrap accordion per header
    • "list": bulleted list
    • "sectioned_list": bulleted list with headers
    • "none": skip showing table of contents (toc)
  • colored_sections = false
  • section_colors = ['LightGreen', 'MediumOrchid', 'Orange']
  • text_toggle = false
  • svg_filter: value to filter the optional column svg by rows in the link table csv for subsetting the icons to link; default is NULL with all rows in the link table being used.
  • full_screen_button = true
  • button_text = "Full screen"
  • tooltip = true

Part 2: Responsive Tables

Demonstration

In this demonstration table, click on any row to see the associated figure.

HTML

Here is an example of the raw HTML to paste into a page for rendering:

<h1>Table</h1>
<table id="example" class = "display" width="100%" style = "cursor: pointer;"></table>
<div id="modal1" class="modal" >
  <div class="modal-content animate" >
    <div class = "container">
      <h3 style = "text-align: center;"><span id="title"></span></h3>
      <div id="img_target" ></div>
      <span id="caption"></span>
      <span id="datalink"></span>
      <span id="methodslink"></span>
    </div>
    <div class="container" >
      <button type="button"  onclick="document.getElementById('modal1').style.display='none'" class="closebtn">CLOSE</button>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.0/css/all.min.css">
<script src='https://marinebon.org/infographiqJS/libs/infographiq_latest/infographiq.js'></script>
<link rel="stylesheet" href="https://marinebon.org/infographiqJS/libs/infographiq_latest/infographiq_table.css"> 
<script>
    var csvLink1 = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS3WnWFSuZA3I6d16n9bJo33cd_3mL6_XVIf1CRbKzJM6NvLKs6B39-m6jfRfZyFr2lxGQ7dcN0MWxl/pub?gid=0&single=true&output=csv";
    link_table(csvLink1);
</script>

link_table()

Parameters for the link_table() JavaScript function:

• Required parameters
  • csvLink: string data type. URL of data (saved in csv format) to be displayed as a responsive table. Please see the full Infographiq tutorial for more information.

Contributing

To make changes:

1. Edit infographiq_latest/infographiq.js|css

2. Update README.md documentation and demo.html to reflect latest.

3. Copy infographiq_latest/ into incremental version number infographiq_v#/

4. Note changes in NEWS.md with header for incremental version number, eg:

infographiq_v1.0.1

Changed parameter names and supplemented documentation in README:

• svg_location -> svg_id
• csv_location -> toc_id
• text_style -> toc_style

1. Git commit and push changes

infographiqjs's Issues

specify jQuery version to work with IEA Drupal site

We want to embed infographiqJS instances, like info-fk-iea, into the Drupal IEA website, but they have multiple calls to JQuery there preventing it from properly loading.

Let's document the exact error messages from the Google Chrome JS Console here, and research ways of referencing jQuery to work.

Ideally we can surgically reference jQuery so we don't have to rebuild the whole Drupal IEA site.

Here's how I was previously able to get it working in jQuery, but apparently that broke their navigation menu:

---

From: Ben Best [email protected]
Date: Wed, Mar 24, 2021 at 3:11 PM
Subject: Re: Interactive pieces on IEA site
To: Avi Litwack - NOAA Federal [email protected]
Cc: Ellen Spooner - NOAA Affiliate [email protected], Jai Ranganathan [email protected]

Ok, that moved past the original error, then produced $ is not a function, which led me to this fix:

https://www.drupal.org/node/756722#using-jquery

(function ($) {
  // All your code here
}(jQuery));

And VOILA! The Infographiq-test works 🎉

consolidate functionality across infographic instances: ONMS, IEA, ...

The issue is:

infographiqJS

ONMS: one table for all svgs

Example noaa-onms/cinms:

• svg_links_cinms.csv
  
  

IEA: one table per svg

Example noaa-iea/fk-esr-info:

• icons to data | fk-esr-info - Google Sheets
  

CINMS fix to one table per svg

cinms fix to work like this for kelp-forest:

making protected Google Sheet content available via GitHub Actions

Hey @bbest. Here's an issue that I think is worth working on - using GitHub Actions to make protected Google Sheets content available for InfographiqJS.

So, the problem that we have faced is that NOAA-owned Google Sheets can't be made visible to the public. This issue has been addressed for Infographiq in the R context using InfographiqR::ocnms_get_sheet().

However, this solution won't work for Javascript-only versions of Infographiq, such as for the Florida Keys IEA or the responsive table. As a work around, we have been using Google Sheets not owned by NOAA for these instances, as we can make them visible to the public.

But I have a feeling that, if Infographiq is to get wide usage within NOAA, they are going to want to use NOAA-owned Google Sheets. So, how to do this?

One straightforward approach would be to use InfographiqR::ocnms_get_sheet (or a slightly altered version of it) within a GitHub Action. On some frequency (once a day/week/whatever), an Action could run that would copy the latest version of a desired protected Google Sheet into a csv that is URL-accessible. That csv could then be read by the Infographiq Javascript.

What do you think?

add `csv` documentation

Which fields are necessary? Which can be swapped out as arguments in link_svg()?

• svg:
• icon: only required field
• title:
• link:
• not_modal:

Tooltip position offset in fullscreen is too far right

Issue:
Tooltip shifted very far left when hovering over icons in fullscreen. Picture below shows issue:
Expected Behavior:

Tooltip is next to the mouse in a fixed location
Issue:

Possible causes:

• justify right when calculating position of tooltip during fullscreen is wrong.

Potential Fixes:

• separate calculation of tooltip position during fullscreen.