Skip to content

Instantly share code, notes, and snippets.

@tmsss

tmsss/.block

Last active October 14, 2021 05:35
Show Gist options
  • Save tmsss/8cab5a0c39c2435ae1be990226492936 to your computer and use it in GitHub Desktop.
Save tmsss/8cab5a0c39c2435ae1be990226492936 to your computer and use it in GitHub Desktop.
Download ZIP
Cognitive Bias Codex, 2016
Raw
.block
height: 950
border: no
Raw
README.md
Raw
data.json
{
"name": "biases",
"children": [
{
"name": "1. Too Much Information",
"children": [
{
"name": "We notice things already primed in memory or repeated often.",
"children": [
{"name": "Availability heuristic"},
{"name": "Attentional bias"},
{"name": "Illusory truth effect"},
{"name": "Mere exposure effect"},
{"name": "Context effect"},
{"name": "Cue-dependent forgetting"},
{"name": "Mood-congruent memory bias"},
{"name": "Frequency illusion"},
{"name": "Baader-Meinhof Phenomenon"},
{"name": "Empathy gap"},
{"name": "Omission bias"},
{"name": "Base rate fallacy"}
]
},
{
"name": "Bizarre/funny/visually-striking/anthropomorphic things stick out more than non-bizarre/unfunny things.",
"children": [
{"name": "Bizarreness effect"},
{"name": "Humor effect"},
{"name": "Von Restorff effect"},
{"name": "Picture superiority effect"},
{"name": "Self-relevance effect"},
{"name": "Negativity bias"}
]
},
{
"name": "We notice when something has changed.",
"children": [
{"name": "Anchoring"},
{"name": "Conservatism"},
{"name": "Contrast effect"},
{"name": "Distinction bias"},
{"name": "Focusing effect"},
{"name": "Framing effect"},
{"name": "Money illusion"},
{"name": "Weber–Fechner law"}
]
},
{
"name": "We are drawn to details that confirm our own existing beliefs",
"children": [
{"name": "Confirmation bias"},
{"name": "Congruence bias"},
{"name": "Post-purchase rationalization"},
{"name": "Choice-supportive bias"},
{"name": "Selective perception"},
{"name": "Observer-expectancy effect"},
{"name": "Experimenter's bias"},
{"name": "Observer effect"},
{"name": "Expectation bias"},
{"name": "Ostrich effect"},
{"name": "Subjective validation"},
{"name": "Continued influence effect"},
{"name": "Semmelweis reflex"}
]
},
{
"name": "We notice flaws in others more easily than flaws in ourselves.",
"children": [
{"name": "Bias blind spot"},
{"name": "Naïve cynicism"},
{"name": "Naïve realism"}
]
}
]
},
{
"name": "2. Not Enough Meaning",
"children": [
{
"name": "We find stories and patterns even in sparse data",
"children": [
{"name": "Confabulation"},
{"name": "Clustering illusion"},
{"name": "Insensitivity to sample size"},
{"name": "Neglect of probability"},
{"name": "Anecdotal fallacy"},
{"name": "Illusion of validity"},
{"name": "Masked man fallacy"},
{"name": "Recency illusion"},
{"name": "Gambler's fallacy"},
{"name": "Hot-hand fallacy"},
{"name": "Illusory correlation"},
{"name": "Pareidolia"},
{"name": "Anthropomorphism"}
]
},
{
"name": "We fill in characteristics from stereotypes, generalities, and prior histories",
"children": [
{"name": "Group attribution error"},
{"name": "Ultimate attribution error"},
{"name": "Stereotyping"},
{"name": "Essentialism"},
{"name": "Functional fixedness"},
{"name": "Moral credential effect"},
{"name": "Just-world hypothesis"},
{"name": "Argument from fallacy"},
{"name": "Authority bias"},
{"name": "Automation bias"},
{"name": "Bandwagon effect"},
{"name": "Placebo effect"}
]
},
{
"name": "We imagine things and people we're familiar with or fond of as better",
"children": [
{"name": "Out-group homogeneity bias"},
{"name": "Cross-race effect"},
{"name": "In-group bias"},
{"name": "Halo effect"},
{"name": "Cheerleader effect"},
{"name": "Positivity effect"},
{"name": "Not invented here"},
{"name": "Reactive devaluation"},
{"name": "Well-traveled road effect"}
]
},
{
"name": "We simplify probabilities and numbers to make them easier to think about",
"children": [
{"name": "Mental accounting"},
{"name": "Appeal to probability fallacy"},
{"name": "Normalcy bias"},
{"name": "Murphy's Law"},
{"name": "Zero sum bias"},
{"name": "Survivorship bias"},
{"name": "Subadditivity effect"},
{"name": "Denomination effect"},
{"name": "Magic number 7+-2"}
]
},
{
"name":"We think we know what other people are thinking",
"children": [
{"name": "Illusion of transparency"},
{"name": "Curse of knowledge"},
{"name": "Spotlight effect"},
{"name": "Extrinsic incentive error"},
{"name": "Illusion of external agency"},
{"name": "Illusion of asymmetric insight"}
]
},
{
"name": "We project our current mindset and assumptions onto the past and future",
"children": [
{"name": "Telescoping effect"},
{"name": "Rosy retrospection"},
{"name": "Hindsight bias"},
{"name": "Outcome bias"},
{"name": "Moral luck"},
{"name": "Declinism"},
{"name": "Impact bias"},
{"name": "Pessimism bias"},
{"name": "Planning fallacy"},
{"name": "Time-saving bias"},
{"name": "Pro-innovation bias"},
{"name": "Projection bias"},
{"name": "Restraint bias"},
{"name": "Self-consistency bias"}
]
}
]
},
{
"name": "3. Need To Act Fast",
"children": [
{
"name": "To act, we must be confident we can make an impact and feel what we do is important",
"children": [
{"name": "Overconfidence effect"},
{"name": "Social desirability bias"},
{"name": "Third-person effect"},
{"name": "False consensus effect"},
{"name": "Hard-easy effect"},
{"name": "Lake Wobegone effect"},
{"name": "Dunning-Kruger effect"},
{"name": "Egocentric bias"},
{"name": "Optimism bias"},
{"name": "Forer effect"},
{"name": "Barnum effect"},
{"name": "Self-serving bias"},
{"name": "Actor-observer bias"},
{"name": "Illusion of control"},
{"name": "Illusory superiority"},
{"name": "Fundamental attribution error"},
{"name": "Defensive attribution hypothesis"},
{"name": "Trait ascription bias"},
{"name": "Effort justification"},
{"name": "Risk compensation"},
{"name": "Peltzman effect"}
]
},
{
"name": "To stay focused, we favor the immediate, relatable thing in front of us",
"children": [
{"name": "Hyperbolic discounting"},
{"name": "Appeal to novelty"},
{"name": "Identifiable victim effect"}
]
},
{
"name": "To get anything done, we tend to complete things we've invested time & energy in.",
"children": [
{"name": "Sunk cost fallacy"},
{"name": "Irrational escalation"},
{"name": "Escalation of commitment"},
{"name": "Generation effect"},
{"name": "Loss aversion"},
{"name": "IKEA effect"},
{"name": "Unit bias"},
{"name": "Zero-risk bias"},
{"name": "Disposition effect"},
{"name": "Pseudocertainty effect"},
{"name": "Processing difficulty effect"},
{"name": "Endowment effect"},
{"name": "Backfire effect"}
]
},
{
"name": "To avoid mistakes, we tend to preserve our autonomy and group status, and avoid irreversible decisions.",
"children": [
{"name": "System justification"},
{"name": "Reverse psychology"},
{"name": "Reactance"},
{"name": "Decoy effect"},
{"name": "Social comparison bias"},
{"name": "Status quo bias"}
]
},
{
"name": "We favor options that appear simple or have more complete information over more complex, ambiguous options.",
"children": [
{"name": "Ambiguity bias"},
{"name": "Information bias"},
{"name": "Belief bias"},
{"name": "Rhyme as reason effect"},
{"name": "Bike-shedding effect"},
{"name": "Law of Triviality"},
{"name": "Delmore effect"},
{"name": "Conjunction fallacy"},
{"name": "Occam's razor"},
{"name": "Less-is-better effect"}
]
}
]
},
{
"name": "4. What Should We Remember?",
"children": [
{
"name": "We edit and reinforce some memories after the fact",
"children": [
{"name": "Misattribution of memory"},
{"name": "Source confusion"},
{"name": "Cryptomnesia"},
{"name": "False memory"},
{"name": "Suggestibility"},
{"name": "Spacing effect"}
]
},
{
"name": "We discard specifics to form generalities",
"children": [
{"name": "Implicit associations"},
{"name": "Implicit stereotypes"},
{"name": "Stereotypical bias"},
{"name": "Prejudice"},
{"name": "Negativity bias"},
{"name": "Fading affect bias"}
]
},
{
"name": "We reduce events and lists to their key elements",
"children": [
{"name": "Peak–end rule"},
{"name": "Leveling and sharpening"},
{"name": "Misinformation effect"},
{"name": "Serial recall effect"},
{"name": "List-length effect"},
{"name": "Duration neglect"},
{"name": "Modality effect"},
{"name": "Memory inhibition"},
{"name": "Primacy effect"},
{"name": "Recency effect"},
{"name": "Part-list cueing effect"},
{"name": "Serial position effect"},
{"name": "Suffix effect"}
]
},
{
"name": "We store memories differently based on how they were experienced",
"children": [
{"name": "Levels of processing effect"},
{"name": "Absent-mindedness"},
{"name": "Testing effect"},
{"name": "Next-in-line effect"},
{"name": "Google effect"},
{"name": "Tip of the tongue phenomenon"}
]
}
]
}
]
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Cognitive Bias Cheat Sheet</title>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
<style>
body {
font-family: "Inter";
color: #444;
}
body a {
color: #444;
}
.main {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.bias-title,
.biases,
.bias-text,
.brain-image {
position: absolute;
}
h1 {
position: absolute;
letter-spacing: 0.5em;
font-size: 1.2em;
color: #444;
text-transform: uppercase;
text-align: center;
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 0;
padding-bottom: 0;
}
.bias-title {
font-size: 0.9em;
font-weight: 700;
}
.footer {
position: absolute;
font-weight: 600;
font-size: 0.6em;
text-transform: uppercase;
text-align: center;
top: 95%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
padding-bottom: 0;
}
.main-circle {
stroke-width: 1;
stroke: #c2cbca;
}
.node-0 {
fill: #5d969f;
color: #5d969f;
}
.link-0 {
stroke: #5d969f;
}
.node-1 {
fill: #7da6d2;
color: #7da6d2;
}
.link-1 {
stroke: #7da6d2;
}
.node-2 {
fill: #7ab439;
color: #7ab439;
}
.link-2 {
stroke: #7ab439;
}
.node-3 {
fill: #8c9292;
color: #8c9292;
}
.link-3 {
stroke: #8c9292;
}
.bias {
font-size: 9px;
position: absolute;
}
.bias span {
background: white;
box-shadow: 5px 0 0px 0px white, -5px 0 0px 0px white;
}
.link {
fill: none;
stroke-width: 1px;
}
</style>
</head>
<body>
<div class="main">
<div class="biases"></div>
</div>
<!-- load the d3.js libraries -->
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-hierarchy.v1.min.js"></script>
<script>
// define helper functions
// get the angle between two points
var getAngle = function(anchor, point) {
var a = Math.atan2(point.y - anchor.y, point.x - anchor.x);
if (a < 0) a += 2 * Math.PI; //angle is now in radians
a -= Math.PI / 2; //shift by 90deg
//restore value in range 0-2pi instead of -pi/2-3pi/2
if (a < 0) a += 2 * Math.PI;
if (a < 0) a += 2 * Math.PI;
a = Math.abs(Math.PI * 2 - a); //invert rotation
a = (a * 180) / Math.PI; //convert to deg
return a;
};
// rotate a point
var radialPoint = function(x, y) {
return [(y = +y) * Math.cos((x -= Math.PI / 2)), y * Math.sin(x)];
};
// rotate a point scaling the radius
var nodePoint = function(x, y, scale) {
return [
y * Math.cos((x -= Math.PI / 2)) * scale,
y * Math.sin(x) * scale
];
};
// get the distance between two points
var getHypot = function(p1, p2) {
return Math.hypot(p2.x - p1.x, p2.y - p1.y);
};
// define variables
var w = window.innerWidth;
var h = window.innerHeight;
var margin = { top: 25, right: 80, bottom: 20, left: 80 },
width = w - margin.right - margin.left,
height = h - margin.top - margin.bottom;
var radius = (height / 2) * 0.8;
var center = { x: (w / 2) * 0.95, y: h / 2 };
var scale = 2.3;
var biasWidth = 210;
var biasTitleWidth = 150;
var biasTitlesPos = [
{ x: width - width / 4 + biasTitleWidth, y: height / 4 - 10 },
{
x: width - width / 4 + biasTitleWidth + 30,
y: height - height / 4 + 15
},
{ x: width / 4 - biasTitleWidth - 30, y: height - height / 4 },
{ x: width / 4 - biasTitleWidth - 50, y: height / 4 - 30 }
];
var footerText = `Webdev by <a href="https://github.com/tmsss" target="_blank">Tiago Santos</a> // Algorithmic layout + design by JM3 ‧ <a href="https://medium.com/@jm3" target="_blank">John Manoogian III</a> // concept + meticolous categorization by <a href="https://busterbenson.com/" target="_blank">buster benson</a> // deep research by wikipedians + far + wide`;
// initialize layout items
// initialize bias tree object
var tree = d3
.tree()
.size([2 * Math.PI, (radius / scale) * 1.6])
.separation(function(a, b) {
return (a.parent == b.parent ? 1 : 2) / a.depth;
});
// initialize svg object
var svg = d3
.select(".main")
.append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom);
// insert header
var header = d3
.select(".main")
.append("h1")
.text("Cognitive Bias Codex, 2016");
// place brain image
var brainImage = d3
.select(".main")
.append("img")
.attr(
"src",
"https://gist.githubusercontent.com/tmsss/8cab5a0c39c2435ae1be990226492936/raw/6df007d35fa5d7eaf5f3a1cd2b6a526677ffd298/brain.png"
)
.attr("class", "brain-image")
.attr("style", function() {
var width = 50 * scale * (radius / (radius * 0.8));
var height = 40 * scale * (radius / (radius * 0.8));
var left = center.x - width / 2;
var top = center.y - height / 2;
return `left: ${left}px; top: ${top}px; width: ${width}px; height: ${height}px`;
});
var footer = d3
.select(".main")
.append("div")
.html(footerText)
.attr("class", "footer");
// initialize svg group object
var g = svg
.append("g")
.attr("transform", "translate(" + center.x + "," + center.y + ")");
// load the external data
d3.json("data.json", function(error, data) {
root = data;
update(root);
});
function update(source) {
// update data array to include id
Array.from(root.children).forEach(function(problem, ix) {
problem["id"] = ix;
problem.children.forEach(function(bias) {
bias["id"] = ix;
bias.children.forEach(function(value) {
value["id"] = ix;
});
});
});
// declares a tree layout and assigns the size
let nodes = d3.hierarchy(root, d => d.children);
nodes = tree(nodes);
// define the tree links
var link = g
.selectAll(".link")
.data(nodes.links())
.enter()
.append("path")
.attr("class", function(d) {
return "link link-" + d.target.data.id;
})
.attr(
"d",
d3
.linkRadial()
.angle(function(d) {
return d.x;
})
.radius(function(d) {
return d.y;
})
);
g.append("circle")
.attr("r", function() {
var nodes2Tier = nodes
.descendants()
.filter(node => node.depth == 2);
var p1 = nodes2Tier[0];
var p2 = nodePoint(p1.x, p1.y, scale);
var rad = getHypot({ x: 0, y: 0 }, { x: p2[0], y: p2[1] });
return rad;
})
.style("fill", "none")
.attr("class", "main-circle");
// create node groups
var node = g
.selectAll(".node")
.data(nodes.descendants())
.enter()
.append("g")
.attr("class", function(d) {
return "node node-" + d.data.id;
})
.attr("transform", function(d) {
if (d.depth == 3) {
return "translate(" + radialPoint(d.x, d.y) + ")";
}
});
node
.append("circle")
.attr("r", function(d) {
if (d.depth == 3) {
return 2;
} else if (d.depth == 2) {
return 5;
} else {
return 0;
}
})
.attr("cx", function(d) {
if (d.depth == 2) {
var point = nodePoint(d.x, d.y, scale);
return point[0];
}
})
.attr("cy", function(d) {
if (d.depth == 2) {
var point = nodePoint(d.x, d.y, scale);
return point[1];
}
})
.attr("stroke", "white")
.attr("stroke-width", 1);
node
.append("text")
.attr("dy", "0.31em")
.attr("x", function(d) {
return d.x < Math.PI === !d.children ? 6 : -6;
})
.attr("text-anchor", function(d) {
return d.x < Math.PI === !d.children ? "start" : "end";
})
.attr("transform", function(d) {
return (
"rotate(" +
((d.x < Math.PI ? d.x - Math.PI / 2 : d.x + Math.PI / 2) * 180) /
Math.PI +
")"
);
})
.text(function(d) {
if (d.depth == 3) {
return d.data.name;
}
})
.style("font-size", function() {
var size = radius / (radius * scale);
return `${size.toFixed(2)}em`;
});
d3.select(".biases").attr("style", function() {
return "left: " + center.x + "px; top: " + center.y + "px;";
});
// insert bias text
var bias = d3
.select(".biases")
.selectAll(".bias")
.data(function() {
var nodesBiases = nodes
.descendants()
.filter(node => node.depth == 2);
return nodesBiases;
})
.enter()
.append("div")
.attr("class", "bias")
.attr("style", function(d) {
point = nodePoint(d.x, d.y, scale);
var stringLen = d.data.name.length;
var angle = getAngle({ x: 0, y: 0 }, { x: point[0], y: point[1] });
var align, left, top;
if (angle > 180 && angle < 360) {
align = "right";
left = point[0] - biasWidth - 15;
} else {
align = "left";
left = point[0] + 15;
}
if (stringLen > 50 && stringLen < 80) {
top = point[1] - 10;
} else if (stringLen > 80) {
top = point[1] - 15;
} else {
top = point[1] - 8;
}
return `left: ${left}px; top: ${top}px; text-align: ${align}; width: ${biasWidth}px;`;
})
.append("span")
.text(function(d) {
return d.data.name;
});
// insert bias titles
var biasTitle = d3
.select(".main")
.selectAll(".bias-title")
.data(function() {
var nodeTitles = nodes
.descendants()
.filter(node => node.depth == 1);
return nodeTitles;
})
.enter()
.append("div")
.attr("class", function(d) {
return "bias-title node-" + d.data.id;
})
.attr("style", function(d, ix) {
var stringLen = d.data.name.length;
if (stringLen < 20) {
biasTitleWidth = 90;
} else if (stringLen > 25) {
biasTitleWidth = 200;
}
return `left: ${
biasTitlesPos[ix].x
}px; top: ${biasTitlesPos[ix].y}px; width: ${biasTitleWidth}px;`;
})
.text(function(d) {
return d.data.name;
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment