pkiage/research-contribution-semantic-strategies-viz

Visualization of semantic strategies used to claim academic research contribution

Semantic Strategies Used in Claiming Academic Contribution

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 SVG from web page using software (SVGExport.io, SVG Gobbler etc.)

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.)

Inspiration

Concept

Cognitive Bias Codex designed by John Manoogian III (jm3) and organized by Buster Benson

• Cognitive bias cheat sheet: An organized list of cognitive biases because thinking is hard by Buster Benson
• Cognitive Bias Codex Poster
• The Cognitive Bias Codex - Behance by John Manoogian III (jm3)

Implementation

• jm3 Github Gist
• Rayraegah bias-viz Github Repository

Data: Semantic Strategies

• What do introduction sections tell us about the intent of scholarly work: A contribution on contributions

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

├── .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
└── svgexport-raw-example.svg             ### Raw export of SVG extrated from browser - edited further to improve presentation