Bias.Wiki

An interactive visualization of cognitive biases based on the famous Cognitive Bias Codex. This project transforms the static diagram into an explorable experience, allowing users to better understand the various biases that affect human thinking and decision-making.

Overview

Bias.Wiki provides an intuitive interface to explore the Cognitive Bias Codex where users can:

• Pan and zoom to navigate the entire visualization
• Click or tap on individual biases to learn detailed information
• Experience a responsive design optimized for both desktop and mobile devices
• View the visualization with helpful interactive tooltips

Features

• Interactive Exploration: Seamless pan and zoom functionality for navigating the visualization
• Detailed Information: Modal windows with comprehensive descriptions when clicking on biases
• Mobile Optimization: Touch gesture support including pinch-to-zoom and pan
• Responsive Design: Automatically adjusts for optimal viewing on any device
• Visual Highlighting: Biases highlight on hover for improved usability

Live Demo

Visit Bias.Wiki to see the visualization in action.

Installation

To run this project locally:

# Clone the repository
git clone https://github.com/kocijan/bias-wiki.git

# Navigate to the project directory
cd bias-wiki

# Open index.html in your browser
# No build process required - pure HTML, CSS, and JavaScript

Usage

Desktop:

• Pan: Click and drag to move around the visualization
• Zoom: Use mouse wheel to zoom in and out
• View Bias Details: Click on any bias to open information modal

Mobile:

• Pan: Drag with one finger to navigate
• Zoom: Pinch with two fingers to zoom in and out
• View Bias Details: Tap on any bias to open information modal

Implementation Details

This project is built with:

• HTML5, CSS3, and vanilla JavaScript
• SVG for the visualization
• Custom pan and zoom implementation
• Modal and tooltip system for bias information
• GitHub Pages for hosting with custom domain

Background

The Cognitive Bias Codex organizes nearly 200 cognitive biases by their practical implications, providing a visual map of how these biases affect our thinking. The original codex was created as a visual representation of Wikipedia's list of cognitive biases.

Credits

• Original Cognitive Bias Codex: Created by Buster Benson and designed by John Manoogian III
• Development: Built and maintained by kocijan
• Source Code: Available on GitHub

Contributing

Contributions are welcome! If you'd like to improve this project:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-improvement)
3. Commit your changes (git commit -m 'Add amazing improvement')
4. Push to the branch (git push origin feature/amazing-improvement)
5. Open a Pull Request

License

This project has dual licensing:

• Source Code: Licensed under the GNU General Public License v3.0 (GPL-3.0). This is a strong copyleft license that requires any modified or derivative code to also be released under the same license terms[6][7].

• Cognitive Bias Codex Visualization: The original visualization is licensed under CC BY-SA 4.0, created by Buster Benson and John Manoogian III[1].

This dual licensing ensures that both the code and the visual content maintain their respective open licenses while acknowledging the different origins and creators of each component.