lots of small changes

README.md

@@ -23,4 +23,25 @@ Run lint and image-gen server
 
 ```
 yarn serve
-``
+```
+
+
+We expect that datasets fully cover or describe phenomena of interest. However, structural, political, and societal biases can result in over- or under-sampling of populations or problems of importance. This mismatch in coverage can hide crucial concerns about the possible scope of our analyses.
+
+Systems often assume that we have one and only one entry for each datum. However, errors in data entry or integration can result in missing or repeated values that may result in inaccurate aggregates or groupings (see Fig. XXXXX).
+
+Data-encoded colors can collide with semantically meaningful colors, such as green on a map indicating a forest. This collision can cause readers to mistake the rendered data for associated with that color-connection.
+
+Mistake base rate for data signal rate, such as in maps which purport to show data but in fact just show population.
+
+Visualizations comparing rates are often assumed show the relative rate, rather than the absolute rate. Yet, many displays give prominence to these absolute or base rates (such as population in choropleth maps) rather than encoded variable, causing the reader to understand this base rate as the data rate.
+
+
+Chosen domain hides outliers, impending the reader from accurate extrema detection.
+
+Charts are often assumed to show the full extent of their input data. A chosen domain might exclude meaningful outliers, causing some trends in the data to be invisible to the reader.
+
+
+Some mark types, such as line series, are vulnerable to all of their data converging to a single point in visual space (as might occur in a parallel coordinates chart). Without graphical intervention readers can face an ambiguity in discerning paths in visual space.
+
+Multiple line series appearing on a common axis are often read as being related through an objective scaling. Yet, when y-axes are superimposed the relative selection of scaling is arbitrary, which can cause readers to misunderstand the magnitudes of relative trends.

paper-scripts/prepare-mirage-table.js

@@ -4,7 +4,9 @@ const {getFile, writeFile} = require('hoopoe');
 //   `& ${isGray ? '\\rowcolor{Gray}' : ''} ${row.Error} & ${row['Taxonomy (Mirage)']} ${row.Citations}`;
 const toRow = (colorSuffix, name) => (row, idx, rows) => {
   const rotater = `\\multirow{${rows.length}}{0em}{\\hspace{-0.6cm}\\rotatebox{90}{\\normalsize{${name}}}}`;
-  const mirage = `${row.Error} & ${row['mirage-error']} ${row.Citations}`;
+  const rowTitle = row.Error.split('(checked)')[0];
+  const rowContent = row['mirage-error'];
+  const mirage = `${rowTitle} & ${rowContent} ${row.Citations}`;
   return ` \\rowcolor{color${colorSuffix}${idx % 2 ? '-opaque' : ''}}${
     idx ? '' : rotater
   }${mirage}`;

src/image-manipulation.js

@@ -9,6 +9,8 @@ const toBuffer = img =>
   new Buffer.from(img.replace(/^data:image\/\w+;base64,/, ''), 'base64');
 /* eslint-enable */
 
+export const toPng = buff => PNG.sync.read(toBuffer(buff));
+
 // always give back an image
 export function concatImages(images) {
   const pngs = images.map(buff => PNG.sync.read(toBuffer(buff)));
@@ -111,6 +113,26 @@ export function padImageToSize(png, padHeight, padWidth) {
   return outputImage;
 }
 
+export function makeBlank(height, width, color = [255, 255, 255, 1]) {
+  /* eslint-disable max-depth */
+  const outputImage = new PNG({height, width});
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const idx = 4 * (width * y + x);
+      for (let cdx = 0; cdx < 4; cdx++) {
+        outputImage.data[idx + cdx] = color[color];
+      }
+    }
+  }
+  /* eslint-enable max-depth */
+  return {
+    data: `data:image/png;base64,${PNG.sync
+      .write(outputImage)
+      .toString('base64')}`,
+    dims: {height, width}
+  };
+}
+
 /**
  * Create a pixelmatch based difference between two input data streams
  */

src/index.js

@@ -7,7 +7,9 @@ import {
 import {
   buildPixelDiff,
   concatImages,
-  overlayImages
+  overlayImages,
+  makeBlank,
+  toPng
 } from './image-manipulation';
 import lintRules from './rules';
 import {SPEC_NOT_SUPPORTED, CRASH, OK} from './codes';
@@ -118,6 +120,7 @@ function evaluateStylisticRule(rule, spec, dataset, oldView) {
 }
 
 function prepOverlayOutput(allRenderings, oldRendering) {
+  const oldPng = toPng(oldRendering);
   const toImg = ({newRendering}) => newRendering;
   const opacity = 0.9 - 1 / allRenderings.length;
 
@@ -129,7 +132,7 @@ function prepOverlayOutput(allRenderings, oldRendering) {
   const allOverlays = overlayImages(allRenderings.map(toImg), opacity);
 
   const imagesToConcat = [allOverlays, passedOverlays, failingOverlays]
-    .map(d => d.data)
+    .map(d => d.data || makeBlank(oldPng.height, oldPng.width).data)
     .filter(d => d);
   return {
     type: 'raster',
@@ -162,7 +165,6 @@ function generateMorphEval(rule, dataset, spec, oldView, oldRendering) {
   };
 }
 
-// DO WE MAYBE WANT TO STACK ALL OF THE CASES ON TOP OF EACH OTHER TO SHOW THE VARIABLITY?
 function evaluateStatisticalAlgebraicRule(rule, spec, dataset, oldView) {
   const {generateNumberOfIterations, statisticalEval} = rule;
   return generateVegaRendering(spec, 'raster').then(oldRendering => {