Today, we’re going to fiddle with our WordPress site a bit to try to get it looking as nice as possible. Specifically, we’d like to make our visualziation embeds fit as nicely as possible in our page. There are three primary items that affect this:
- The technique that you use to embed,
- Your WordPress theme, and
- Any extra customizations that you might have made.
We’ll talk about the first two here today.
Embedding examples
There are four different embedded visualizations shown below:
- Javascript code generated by Datawrapper,
- An iframe containing Datawrapper embed code,
- Javascript code generated by Observable, and
- An iframe containing Observable embed code.
Javascript code and iframe embeds each have their own advantages and disadvantages:
- IFrames are sandboxed. Thus, an iframe essentially displays a completely different webpage running in its own environment. It’s styles and javascript code are independent of the containing page. The visualization will tend to look just as it does where it was created.
- Javascript manipulates a visualization that lives within the webpage. That visualization will likely inherit any applicable styles that are defined for the larger page.
Datawrapper script
Datawrapper iframe
Observable script
Observable iframe
Your WordPress theme
Just how big a difference the embedding technique makes depends on your WordPress theme. The default theme for all wp.unca.edu sites, and the one that most of you are using, is Twenty Twenty-One. My site uses Astra, partly because I think Astra renders the embeds much more nicely. It's easy to switch back and forth, though; I'll show you how in class!