Humans are visual beings, and charts 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 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 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:
- Create an HTML container
- Include the JavaScript files to be used
- Add the data to be visualized
- 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:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Venn Diagram</title>
</head>
<body>
<div id="container" style="width: 100%; height: 100%"></div>
</body>
</html>
- 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 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 are needed. These files are to be placed in the <script> tag of the <head> section of your HTML page.
<!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:
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:
<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:
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:
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:
chart.title("Tolkien Venn Diagram");
Finally, reference the previously added HTML block element (see the first step) and draw the chart:
с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 [or on AnyChart Playground].
<!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
- Disable the legend
- Tune the labels
- Set custom colors
- Enhance the title
- Improve the tooltip
- Add an extra character
FOR A WALKTHROUGH OF THESE JS SCATTER CHART CUSTOMIZATIONS, CONTINUE READING HERE.
Top comments (0)