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:

Simple Example

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

Changes

To see the latest changes, check out the:

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:

infographiq-elements

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>

Parameters for the link_svg() JavaScript function:

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>

Parameters for the link_table() JavaScript function:

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
  5. Git commit and push changes