Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <head>
  <meta charset="UTF-8">
  <title>Cognitive Errors</title>
  <style type="text/css" media="screen">
      body {
        background-color: #F7F9FB;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      }

      #chartdiv {
        background-color: #F7F9FB;
        padding-left: 5%;
        padding-right: 5%;
        /* width: 95%; */
        height:800px;
      }

      .graph-description {
        background-color: #F7F9FB;
        font-family: Verdana, sans-serif;
        line-height: 22px;
        padding-top: 20px;
        padding-left: 10%;
        padding-right: 10%;
        }

        .copyright {
        background-color: #F7F9FB;
        font-family: Verdana, sans-serif;
        padding-left: 2%;
        }

    </style>

</head>
<body>

<!-- partial:index.partial.html -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/plugins/forceDirected.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/material.js"></script>
<div id="chartdiv"></div>
<!-- partial -->
  <script>
    /**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_material);
// Themes end

var chart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);

var networkSeries = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries())
networkSeries.dataFields.linkWith = "linkWith";
networkSeries.dataFields.name = "name";
networkSeries.dataFields.id = "id";
networkSeries.dataFields.value = "value";
networkSeries.dataFields.children = "children";

networkSeries.nodes.template.label.text = "{name}"
networkSeries.fontSize = 12;


var nodeTemplate = networkSeries.nodes.template;
nodeTemplate.tooltipText = "{name}: {hoverText}";
nodeTemplate.fillOpacity = 0.75;
nodeTemplate.label.hideOversized = true;
nodeTemplate.label.truncate = true;

networkSeries.links.template.tooltipText = "{name}";
networkSeries.links.template.interactionsEnabled = true;


var linkTemplate = networkSeries.links.template;
linkTemplate.strokeWidth = 1;
var linkHoverState = linkTemplate.states.create("hover");
linkHoverState.properties.strokeOpacity = 1;
linkHoverState.properties.strokeWidth = 2;

nodeTemplate.events.on("over", function (event) {
    var dataItem = event.target.dataItem;
    dataItem.childLinks.each(function (link) {
        link.isHover = true;
    })
})

nodeTemplate.events.on("out", function (event) {
    var dataItem = event.target.dataItem;
    dataItem.childLinks.each(function (link) {
        link.isHover = false;
    })
})

networkSeries.events.on("inited", function() {
    networkSeries.animate({
      property: "velocityDecay",
      to: 0.98
    }, 3000);
  })

// chart.legend = new am4charts.Legend();
// chart.legend.maxHeight = 150;
// chart.legend.scrollable = true;
networkSeries.manyBodyStrength = -20;
networkSeries.links.template.distance = 1;
networkSeries.links.template.strength = 1;


networkSeries.colors.list = [
  am4core.color("#458b00"),
  am4core.color("#d2691e"),
  am4core.color("#6495ed"),
  am4core.color("#8b6508"),
  am4core.color("#68228b"),
  am4core.color("#9932cc"),
  am4core.color("#8b0a50"),
  am4core.color("#8b7d6b"),
  am4core.color("#cd9b1d"),
  am4core.color("#20b2aa"),
  am4core.color("#db7093"),
  am4core.color("#8b8989"),
  am4core.color("#6c7b8b")
];

networkSeries.nodes.template.events.on("hit", function(event) {
  chart.zoomToDataItem(event.target.dataItem, 3, true)
});

networkSeries.data = [
  {
      "id": 3,
      "name": "Clustering Illusion",
      "hoverText": "We are oversensitive to pattern recognition. The human brain seeks patterns and rules.",
      "linkWith":[17, 24, 37],
      "value": 3
  },
  {
      "id": 5,
      "name": "Sunk Cost Fallacy",
      "linkWith":[12, 68, 23, 60, 32, 20],
      "value": 6
  },
  {
      "id": 7,
      "name": "Confirmation Bias",
      "hoverText": "Tendency to interpret new information so that it becomes compatible with our existing theories, beliefs and conviction.",
      "linkWith":[11, 95, 24, 64, 88, 67, 83, 50, 64, 99],
      "value": 10
  },
  {
      "id": 15,
      "name": "Overconfidence Effect",
      "hoverText": "We systematically overestimate our knowledge and our ability to predict- on a massive scale. The overconfidence effect does not deal with whether single estimates are correct or not. Rather, as Taleb puts it, it measures the difference between what people actually know and how much they think they know.",
      "linkWith":[94, 40, 89, 18, 45],
      "value": 5
  }, 
  {
      "id": 19,
      "name": "Regression to Mean",
      "hoverText": "Extreme cases are interspersed with less extreme ones.",
      "linkWith":[55, 10, 12, 24, 29],
      "value": 5
  },
  {
      "id": 24,
      "name": "Coincidence",
      "hoverText": " Improbable coincidences are precisely that: rare but very possible events. It's not surprising when they finally happen.",
      "linkWith":[37, 7, 19, 17, 3],
      "value": 5
  },
  {
      "id": 25,
      "name": "Groupthink",
      "hoverText": " this is where a group of smart people makes reckless decisions because everyone aligns their opinions with the supposed consensus. Thus, motions are passed that each individual group member would have rejected if no peer pressure had been involved. Groupthink is a special branch of social proof.",
      "linkWith":[4, 33, 79, 91],
      "value": 4
  },
  {
      "id": 26,
      "name": "Neglect of Probability",
      "hoverText": "We respond to the expected magnitude of an event, but not to its likelihood. To us, 0% risk seems infinitely better than a (highly improbable) 1% risk.",
      "linkWith":[11, 28, 55, 1, 17, 34, 80],
      "value": 7
  },
  {
      "id": 28,
      "name": "Base-Rate Neglect",
      "hoverText": "A disregard of fundamental distribution levels",
      "linkWith":[1, 26, 29, 41, 55, 59, 80],
      "value": 7
  },
  {
      "id": 29,
      "name": "Gambler's Fallacy",
      "hoverText": "The gambler's fallacy leads us to believe that something must change.",
      "linkWith":[55, 28, 92, 19, 63],
      "value": 5
  },
  {
      "id": 31,
      "name": "Induction",
      "hoverText": "The inclination to draw universal certainties from individual observations.",
      "linkWith":[37, 1],
      "value": 2
  },
  {
      "id": 34,
      "name": "Exponential Growth",
      "linkWith":[63, 26, 61],
      "value": 3
  },
  {
      "id": 37,
      "name": "False Causality",
      "linkWith":[24, 48, 3, 13, 31, 49],
      "value": 6
  },
  {
      "id": 40,
      "name": "Forecast Illusion",
      "linkWith":[62, 91, 9, 14, 15, 17, 46, 75],
      "value": 8
  },
  {
      "id": 48,
      "name": "Association Bias",
      "linkWith":[54, 37, 49, 11, 66],
      "value": 5
  },
  {
      "id": 52,
      "name": "Because Justification",
      "hoverText": "When you justify your behavior, you encounter more tolerance and helpfulness.",
      "linkWith":[50, 13, 97],
      "value": 3
  },
  {
      "id": 55,
      "name": "the Problem with Averages",
      "hoverText": "A single outlier may radically alter the picture.",
      "linkWith":[28, 63, 19, 26, 29],
      "value": 5
  },
  {
      "id": 59,
      "name": "Information Bias",
      "hoverText": "The delusion that more information guarantees better decisions.",
      "linkWith":[90, 99, 28],
      "value": 3
  },
  {
      "id": 60,
      "name": "Effort Justification",
      "hoverText": "(A special case of cognitive dissonance) When you put a lot of energy into a task, you tend to overvalue the result.",
      "linkWith":[5, 50],
      "value": 1
  },
  {
      "id": 61,
      "name": "the Law of Small Numbers",
      "linkWith":[34, 58],
      "value": 2
  },
  {
      "id": 73,
      "name": "Primacy And Recency Effects",
      "linkWith":[88, 70, 83],
      "value": 3
  },
  {
      "id": 75,
      "name": "the Black Swan",
      "linkWith":[80, 40, 39, 62],
      "value": 4
  },
  {
      "id": 77,
      "name": "False-Consensus Effect",
      "hoverText": "We frequently overestimate unanimity with others, believing that everyone else thinks and feels exactly like we do.",
      "linkWith":[4, 74],
      "value": 2
  },
  {
      "id": 80,
      "name": "Ambiguity Aversion",
      "linkWith":[75, 26, 28, 11, 39],
      "value": 5
  },
  {
      "id": 91,
      "name": "Planning Fallacy",
      "hoverText": "You systematically take on too much. More than that, your plans are absurdly ambitious.",
      "linkWith":[85, 40, 93, 25],
      "value": 4
  },
  {
      "id": 92,
      "name": "Deformation Professionnelle",
      "hoverText": "If your only tool is happer, all your problems will be nails.",
      "linkWith":[65, 76, 29],
      "value": 3
  },
  {
      "id": 93,
      "name": "Zeigarnik Effect",
      "hoverText": "We seldom forget uncompleted tasks; they persist in our consciousness and do not let up, until we give them our attention. Once we've completed a task and checked it off our mental list, it is erased from memory.",
      "linkWith":[85, 91],
      "value": 2
  },
  {
      "id": 95,
      "name": "Feature-Positive Effet",
      "hoverText": "Absense is much harder to detect than presence. We place greate emphasis on what is present than on what is absent.",
      "linkWith":[64, 7, 47, 11, 88],
      "value": 5
  },
  {
      "id": 96,
      "name": "Cherry-Picking",
      "hoverText": "Showcasing the most attractive fatures and hiding the rest.",
      "linkWith":[13, 45],
      "value": 1
  },
  {
      "id": 97,
      "name": "Fallacy of the Single Cause",
      "linkWith":[52, 78, 14, 36],
      "value": 4
  },
  {
      "id": 98,
      "name": "Intention-To-Treat Error",
      "hoverText": "In the survivorship bias you only see the survivors, not the failed projects. But in this error, the failed projects show up prominently, just in the wrong category.",
      "linkWith":[1, 58],
      "value": 2
  },
  {
      "id": 20,
      "name": "Outcome Bias",
      "hoverText": "(aka the historian error) We tend to evaluate decisions based on the result rather than on the decision process.",
      "linkWith":[5, 2, 14, 94],
      "value": 4
  },
  {
      "id": 36,
      "name": "Fundamental Attribution Error",
      "hoverText": "The tendency to overestimate individuals' influence and underestimate external, situational factors.",
      "linkWith":[13, 2, 83, 99, 38, 97],
      "value": 6
  },
  {
      "id": 47,
      "name": "Self-Selection Bias",
      "hoverText": "Whenever we complain about bad luck, we must vary of this bias.",
      "linkWith":[39, 95, 2],
      "value": 3
  },
];
  </script>

</body>


              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console