Skip to content

Instantly share code, notes, and snippets.

@samirak93

samirak93/index.html

Last active July 17, 2017 16:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save samirak93/9a13f2abffe949f77efccb8f4c2f980b to your computer and use it in GitHub Desktop.
Save samirak93/9a13f2abffe949f77efccb8f4c2f980b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-10">
<title>Node-Link Tree</title>
<link href="interactive_tree.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.2"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.27.2"></script>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
var w = 800,
h = 1500,
i = 0,
duration = 500,
root;
var tree = d3.layout.tree()
.size([h, w - 160]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var vis = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(40,0)");
d3.json("math_map_compact.json", function(json) {
json.x0 = 800;
json.y0 = 0;
update(root = json);
});
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse();
console.log(nodes)
// Update the nodes…
var node = vis.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
var nodeEnter = node.enter().append("svg:g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; });
//.style("opacity", 1e-6);
// Enter any new nodes at the parent's previous position.
nodeEnter.append("svg:circle")
//.attr("class", "node")
//.attr("cx", function(d) { return source.x0; })
//.attr("cy", function(d) { return source.y0; })
.attr("r", 4.5)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
.on("click", click);
nodeEnter.append("svg:text")
.attr("x", function(d) { return d._children ? -8 : 8; })
.attr("y", 3)
//.attr("fill","#ccc")
//.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
.text(function(d) { return d.name; });
// Transition nodes to their new position.
nodeEnter.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
.style("opacity", 1)
.select("circle")
//.attr("cx", function(d) { return d.x; })
//.attr("cy", function(d) { return d.y; })
.style("fill", "lightsteelblue");
node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
.style("opacity", 1);
node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.style("opacity", 1e-6)
.remove();
/*
var nodeTransition = node.transition()
.duration(duration);
nodeTransition.select("circle")
.attr("cx", function(d) { return d.y; })
.attr("cy", function(d) { return d.x; })
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeTransition.select("text")
.attr("dx", function(d) { return d._children ? -8 : 8; })
.attr("dy", 3)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#5babfc"; });
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit();
nodeExit.select("circle").transition()
.duration(duration)
.attr("cx", function(d) { return source.y; })
.attr("cy", function(d) { return source.x; })
.remove();
nodeExit.select("text").transition()
.duration(duration)
.remove();
*/
// Update the links…
var link = vis.selectAll("path.link")
.data(tree.links(nodes), function(d) { return d.target.id; });
// Enter any new links at the parent's previous position.
link.enter().insert("svg:path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
})
.transition()
.duration(duration)
.attr("d", diagonal);
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
d3.select(self.frameElement).style("height", "2000px");
</script>
</body>
</html>
Raw
interactive_tree.css
circle {
cursor: pointer;
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
text {
font-size:10px;
}
path.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
Raw
math_map_compact.json
{
"name": "Cognitive 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"}
]
}
]
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment