How to Create a Venn Diagram in JS (with Some Help of Tolkien)
Tags: javascript, datascience, webdev, tutorial
Published: 2023-03-13 16:09:00

Humans are [visual beings](https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/data-visualization-for-human-perception), and [charts](https://www.anychart.com/chartopedia/usage-type/) are widely used to boost the UX when it comes to showing a lot of information. Take **Venn diagrams**, for example, which are great at displaying [commonalities and differences](https://en.wikipedia.org/wiki/Venn_diagram) between several sets of items. And it’s possible to create a nice interactive one for a web page or app without much hassle.

Scrolling through Twitter before Christmas, I [came across](https://twitter.com/TeawithTolkien/status/1601432667438055430) a cool Venn diagram comparing Santa Claus, Sauron, Gandolf, and Tom Bombadil. For fun, I reproduced it using JavaScript. That appeared to be easy enough to give me an idea of a tutorial on how to quickly build JS-based Venn diagrams, which I hoped could be helpful to both designers and developers.

So, here I am with the article! The original graphic by Tea with Tolkien that inspired me is used as an illustrative example — let’s build this Venn diagram in JavaScript step by step right now!

## Building JavaScript Venn Diagram

Creating a Venn diagram with JS is pretty straightforward. Generally speaking, there are four basic steps you should take. These are:
1. Create an HTML container
2. Include the JavaScript files to be used
3. Add the data to be visualized
4. Code the diagram

### 1. Create an HTML container

Create a basic HTML page or use an existing one. Add a `<div>` element as the container for your Venn diagram and give it a unique identifier. You can specify the size of the container to be 100% so that the chart fills the entire page, or adjust the style settings as you see fit.

Here is an example:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Venn Diagram</title>
  </head>
  <body> 
    <div id="container" style="width: 100%; height: 100%"></div>
  </body>
</html>
```
2. Include the JavaScript files to be used

I will show you here how to use a JavaScript library to create a Venn diagram. JS charting libraries provide a basic setup to build data visualizations quickly with a minimum amount of code. There are some good ones out there that you can quickly find on Google. Here, I am using the [AnyChart](https://www.anychart.com/) JS library.

To use any JavaScript charting library, you have to link the appropriate JS scripts necessary to create your data graphic. For a Venn diagram in this case, the "core" and "venn" [modules](https://docs.anychart.com/Quick_Start/Modules) are needed. These files are to be placed in the `<script>` tag of the `<head>` section of your HTML page.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Venn Diagram</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-venn.min.js"></script>
  </head>
  <body> 
    <div id="container" style="width: 100%; height: 100%"></div>
    <script>
      // All the JS Venn diagramming code comes here.
    </script>
  </body>
</html>
```
### 3. Add the data to be visualized
For this Venn diagram, the data is quite simple. So it can be added as a dataset organized as an array of objects. I took the data directly from the original visualization, and here is what I ended up with:

```javascript
let data = [
  {
    x: "A",
    value: 100,
    name: "TOM BOMBADIL\n\nhomebody,\nblue jacket,\nboots yellow"
  },
  {
    x: "B",
    value: 100,
    name: "SANTA CLAUS\n\nwears red,\nho ho ho,\nsleigh"
  },
  {
    x: "C",
    value: 100,
    name: "GANDALF\n\nwizard,\nfireworks"
  },
  {
    x: "D",
    value: 100,
    name: "DARK LORD SAURON\n\n cute, evil,\nbabygirl, slay"
  },
  {
    x: ["A", "C"],
    value: 40,
    name: "special hat,\nlikes hobbits"
  },
  {
    x: ["A", "B"],
    value: 40,
    name: "merry fellow,\nwife guy"
  },
  {
    x: ["C", "D"],
    value: 40,
    name: "irritable,\nemo maia\nno wife,\nweirdly flirty with\nGaladriel in\nadaptations,\nwould rather not\nspeak to Celeborn"
  },
  {
    x: ["B", "D"],
    value: 40,
    name: "teaches Elves to\nmake things,\nhas flying servants"
  },
  {
    x: ["A", "B", "C"],
    value: 30,
    name: "benevolent,\nbig beard"
  },
  {
    x: ["B", "C", "D"],
    value: 30,
    name: "giver of gifts,\nis coming to town\nbling bling"
  },
  {
    x: ["A", "B", "D"],
    value: 30,
    name: "loves to sing,\nsees you"
  },
  {
    x: ["A", "C", "D"],
    value: 30,
    name: "lives in\nmiddle-earth"
  },
  {
    x: ["A", "B", "C", "D"],
    value: 5,
    name: "ancient,\npowerful,\nmysterious,\nmany names"
  }
];
```
The main stage is all set. Now, let me show you the last step to making the JS Venn diagram come to life!

### 4. Code the diagram

You will need to write just a few lines of JavaScript code to create a Venn diagram visualization of the ready dataset. Remember to place all of it inside the `<script>` tags in the body of your page.

The foremost thing you should do is include a function that ensures that the code will execute only after the web page has fully loaded:

```html
<script>
  anychart.onDocumentReady(function() {
    // The following JavaScript charting code comes here.
  });
</script>
```
Now inside this function, copy the data from the previous step.

Then create a Venn diagram instance out of that data:

```javascript
let chart = anychart.venn(data);
```
Since the Venn diagram needs to show the text value and not the figure value, configure the label settings accordingly:

```javascript
chart.labels().format("{%Name}");
```
You can also give a title to the chart to make sure everyone understands what your Venn diagram is all about:

```javascript
chart.title("Tolkien Venn Diagram");
```
Finally, reference the previously added HTML block element (see the first step) and draw the chart:

```javascript
сhart.container("container");
chart.draw();
```
There you go, a basic JavaScript Venn diagram is up and running! Check it out with the entire code below and on [CodePen](https://codepen.io/shacheeswadia/pen/dyjXaoE) [or on [AnyChart Playground](https://playground.anychart.com/IvdzUQj5)].


![A Venn diagram built with JS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zm5jldahdk980d00siu3.png)

```html
<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Venn Diagram</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-venn.min.js"></script>
  </head>
  <body>  
    <div id="container" style="width: 100%; height: 100%"></div>
    <script>
      anychart.onDocumentReady(function() {
        // adding data
        let data = [
          {
            x: "A",
            value: 100,
            name: "TOM BOMBADIL\n\nhomebody,\nblue jacket,\nboots yellow"
          },
          {
            x: "B",
            value: 100,
            name: "SANTA CLAUS\n\nwears red,\nho ho ho,\nsleigh"
          },
          {
            x: "C",
            value: 100,
            name: "GANDALF\n\nwizard,\nfireworks"
          },
          {
            x: "D",
            value: 100,
            name: "DARK LORD SAURON\n\n cute, evil,\nbabygirl, slay"
          },
          {
            x: ["A", "C"],
            value: 40,
            name: "special hat,\nlikes hobbits"
          },
          {
            x: ["A", "B"],
            value: 40,
            name: "merry fellow,\nwife guy"
          },
          {
            x: ["C", "D"],
            value: 40,
            name: "irritable,\nemo maia\nno wife,\nweirdly flirty with\nGaladriel in\nadaptations,\nwould rather not\nspeak to Celeborn"
          },
          {
            x: ["B", "D"],
            value: 40,
            name: "teaches Elves to\nmake things,\nhas flying servants"
          },
          {
            x: ["A", "B", "C"],
            value: 30,
            name: "benevolent,\nbig beard"
          },
          {
            x: ["B", "C", "D"],
            value: 30,
            name: "giver of gifts,\nis coming to town\nbling bling"
          },
          {
            x: ["A", "B", "D"],
            value: 30,
            name: "loves to sing,\nsees you"
          },
          {
            x: ["A", "C", "D"],
            value: 30,
            name: "lives in\nmiddle-earth"
          },
          {
            x: ["A", "B", "C", "D"],
            value: 5,
            name: "ancient,\npowerful,\nmysterious,\nmany names"
          }
        ];
        // creating a venn diagram with the data
        let chart = anychart.venn(data);
        // setting the labels
        chart.labels().format("{%Name}");
        // setting the chart title
        chart.title("Tolkien Venn Diagram");
        // setting the container id
        chart.container("container");
        // drawing the diagram
        chart.draw();
      });
    </script>
  </body>
</html>
```

## Customizing JavaScript Venn Diagram
1. Disable the legend
2. Tune the labels
3. Set custom colors
4. Enhance the title
5. Improve the tooltip
6. Add an extra character

**FOR A WALKTHROUGH OF THESE JS SCATTER CHART CUSTOMIZATIONS, [CONTINUE READING HERE](https://www.anychart.com/blog/2023/03/02/venn-diagram-js/).**