Demonstrating Hindsight Bias

Using juxtapose to visually demonstrate the sense-making process of hindsight bias.

Credit

Step 1: add the CSS to the frontmatter

Need to include link to css sheet in YAML header:

```{yaml}
format: 
  html:
    css: "https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css"
```

Step 2: Importing the module

Let’s try it out. JuxtaposeJS is on jsDelivr, so we can just import it! It’s a little stubborn, but requiring the individual file, rather than just the package name, seems to work (thanks, Observable Module Require Debugger!). It produces an error but seems to work, so I just catch the error and ignore it:

Step 3: Write the Juxtapose!

And here’s the Juxtapose code! Once the library’s loaded, you can just write it with HTML, as per the README:

Nice! I’ve added a bit of extra margin-bottom to it so that this text clears it properly too.

Back to top