pkiage / data-experiments-traps-viz

Visualization of traps in data experiments: biases, fallacies, malpractice, and heuristics

Data Experiment Traps: Biases, Fallacies, Malpractice, and Heuristics

To Run

Tested on Ubuntu

# Optional but recommended
# Version lasted tested was node v16.16.0 (npm v8.11.0)
nvm use --lts

npm install # or npm i

npx parcel index.html

When done Ctrl+C in terminal

To Edit

Hint:

• Bulk of editing is in data.json and in vector graphic editor
• data.json editing will help give initial SVG for further editing
• SVG from just npx parcel index.html most likely requires further editing in vector graphic editor

Data used in Algorithmic Design

Change name and children in data.json

SVG

Obtain

Print

Print page (landscape layout) and open in application such as Adobe Illustrator

Browser Extention

Obtain SVG from web page using software (SVGExport.io, SVG Gobbler etc.)

Inspect Element

1. Inspect Element fn + f12
2. Copy SVG contained in body class main

SVG Further edits

For further edits export as SVG to edit in various vector graphic editors (Adobe Illustrator, BoxySVG, LibreOffice - Draw, Inkscape etc.)

Consider adding assets created/edited in other software (Adobe Creative Cloud, Canva, Figma, Microsoft Office etc.)

Tips

• Change colors from style.css or vector editing software
• If coloring in vector software e.g. Adobe Illustrator
  • For text and shapes fill
  • For lines fill stroke
  • To select multiple either in Adobe Illustrator either use direct selection tool or press shift while selecting
• Ctrl + or Ctrl - to zoom out and in respectively
• SVG from browswer extention preferable because from pdf tends to create letters to outlines rather than editable text (source)
• Bulk edit fonts in Adobe Illustrator
  • Font: Type > Find/Replace Font... > Change all

Inspiration

Concept & Implementation

• pkiage research-contribution-semantic-strategies-viz Github Repository

Accessibility

Color:

• Adobe Color
• Color Brewer 2.0
  • #7570b3
  • #d95f02
  • #1b9e77
• Colour me better: fixing figures for colour blindness
• Colorgorical
• i want hue

Font:

• Designing Effective Scientific Presentations
• Sans Serif font e.g. Trebuchet MS
• Bulk edit
  • Select text from layers (select multiple by press Ctrl while selecting)
  • Change position if necessary
  • Type > Size > (select ideal font size)

Data

DYOR :)

• Category:Cognitive biases
• Category:Heuristics
• List of cognitive biases
• List of fallacies
• Misuse of statistics

Fixes if "To Run" has errors

Update Node

curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -

sudo apt-get install -y nodejs

Install nvm

sudo apt-get install curl

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Close then open terminal for changes to reflect

Verify installation

# should return nvm
command -v nvm

# should return version
nvm --version

# should list versions of Node currently installed
nvm ls

Install current and stable LTS versions of Node.js

# list all versions of Node.js available
nvm ls-remote

# current stable LTS release of Node.js (production apps)
nvm install --lts

# current release of Node.js (testing latest features)
nvm install node

# install specific version
# nvm install version
# Example version = v17.0.0
nvm install v17.0.0

Verify installation

nvm ls

node --version # or which node

npm --version # or which npm

Specify version of Node to use

Current release of Node.js (testing latest features)

nvm use node

Current stable LTS release of Node.js (production apps)

nvm use --lts

Specify version

# nvm use version
# Example version = v17.0.0
nvm use v17.0.0

Fixes References

• How To Install Node.js on Ubuntu 20.04
• npm does not support Node.js v10.19.0
• Parcel js can't run same project on Ubuntu
• Solve - nvm: command not found error

Folder Structure

├── sample-edited                         ### Folder containing samples of raw SVG edited in vector processing software
|    ├── edited-sampleDocument.svg        ### Sample edited SVG saved as PDF (for best view in Github look at PNG since PDF might be distorted during rendering)
|    ├── edited-sampleImage.svg           ### Sample edited SVG exported as PNG with white background
|    └── edited-sampleSVG.svg             ### Sample edited SVG
├── sample-raw                            ### Folder containing samples of raw SVG obtained from running `npx parcel index.html`
|    ├── raw-browserExtentionExtract.svg  ### Raw export of SVG extrated from browser extension before further edits
|    ├── raw-PDFillustratorExtract.svg    ### Raw export of SVG obtained from saving PDF obtained from browser then opening in Adobe Illustrator then saving as SVG
|    └── raw-printPDF.svg                 ### Raw export of PDF printed from browser
|
├── .gitignore                            ### Files and directories to ignore from git history
├── data.json                             ### Data used in algorithmic design
├── data.txt                              ### data.json data provided in human readable format
├── index.html                            ### html to show SVG in browser
├── main.js                               ### Javascript that takes i) data.json as data, ii) style.css styling, and iii) d3 library for visualization to create SVG
├── package-lock.json                     ### [describes the exact tree that was generated after npm i](https://docs.npmjs.com/files/package-lock.json/)
├── package.json                          ### [project metadata](https://docs.npmjs.com/cli/v8/configuring-npm/package-json) (replace description and author)
└── style.css                             ### CSS styles for visualization