HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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>
Also see: Tab Triggers