How To Create A Venn Diagram Using JavaScript

How To Create A Venn Diagram Using JavaScript

Learn what a Venn diagram is and how to create such an interactive data visualization for the Web using JavaScript. These 4 steps to build a beautiful JavaScript chart of literally any kind, including a Venn diagram: Create an HTML page for the chart, Include the necessary JavaScript files, Add the data, Write the JS code for the diagram.

Learn what a Venn diagram is and how to create such an interactive data visualization for the Web using JavaScript, in a special tutorial.

A Venn diagram is a form of data visualization that uses shapes, generally circles, to show the relationships among groups of things. In this chart type, overlapping areas show commonalities while circles that do not overlap show the traits that are not shared.

Introduced by John Venn, an English mathematician, logician, and philosopher, Venn diagrams are also called set diagrams or logic diagrams since they show possible logical relations between elements of different sets. When drawing such charts, we will most probably be dealing with two or three overlapping circles, since having only one circle would be boring, and having four or more circles quickly becomes really complicated.

Not only are these diagrams good visualizations as a concept, but they also provide a great opportunity to represent qualitative data and a bit of graphic humor. Basically, they are easy and fun to build and use. I’ll show you right now!

Read this tutorial to learn how to easily create a visually appealing and informative Venn diagram for your website or app with the help of JavaScript. All the code used and demonstrated along the tutorial will be freely available for you to play with.

During the ongoing coronavirus pandemic, with working from home and avoiding food from outside, many of us have become amateur chefs. So, let us use a JS-based Venn diagram to find out what kind of recipe would be the best to try out on a working day — this is going to be a delightful use case to explore!

Spoiler: Venn Diagram To Be Developed

Before we begin, I decided to stimulate your appetite for a cool data visualization and learning experience and show you how the final interactive JavaScript Venn diagram will look.

Check it out and follow the charting tutorial!

Image for post

4 Simple Steps to a Basic JS Venn Diagram

Venn diagrams are a treat for the visualizers and the audience — they provide great value and quick insights while being straightforward to make and understand.

Let us see how we can make a Venn diagram using JavaScript (HTML5). It may not be as easy as creating circles on a paper napkin with different colored sketch pens (to compare dogs and cats maybe!). But believe me, it is almost that simple and definitely more exciting when you are doing things right.

We’ll start with a very basic Venn diagram and then customize it.

Actually, you should follow these 4 steps to build a beautiful JavaScript chart of literally any kind, including a Venn diagram:

  • Create an HTML page for the chart.
  • Include the necessary JavaScript files.
  • Add the data.
  • Write the JS code for the diagram.

1. Create an HTML page

Create a basic HTML page with a block-level element where the Venn diagram will be rendered. This div element will hold the chart and is given a unique id to reference it later.

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Venn Diagram</title>
    <style type="text/css">
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>  
    <div id="container"></div>
  </body>
</html>

The width and height of the container are set to 100% so that the chart fills the whole screen. You can set other values to change the size of the graphic as necessary.

2. Include the necessary JavaScript files

To create a JavaScript chart, it is necessary to link the appropriate JS scripts that are going to be used to develop it. These files have to be included inside the <script> tag in the <head> section of the HTML page.

Feel free to choose a JS library for data visualization as there are plenty of them out there and the approach is quite universal. In this tutorial, I will be using AnyChart. It is a flexible and powerful JavaScript charting library which makes it quite easy and fast to visualize data in robust graphs, so even beginners will be fine. For the Venn diagram, we will only need its core library module that is necessary for all charts and the dedicated module for creating this specific chart type.

You can download the required scripts and add them to the HTML page or include the CDN links as we do here for simplicity.

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Venn Diagram</title>
    <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-venn.min.js"></script>
    <style type="text/css">
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      // All the code for the chart will come here
    </script>
  </body>
</html>

Note: We add a script tag in the body where we will write our code for creating the chart.

3. Add the data

Data is what makes the chart, and therefore, it’s an essential aspect of the visualization. A great advantage of AnyChart is that it provides various ways to add data. In this Venn diagram, we are using simple data so we can directly include the data into our page.

Every chart renders data in a specific form so it is important to make sure that we have the data in the way that makes sense for rendering the Venn diagram. It is very intuitive so nothing to be scared of.

Our data is about the 3 facets that we consider while choosing a recipe to try out during these work-from-home times. A perfect recipe is one that has all the 3 favorable characteristics.

We list out the 3 attributes in consideration as 3 data points and the intersections of 2 combinations as well as all 3 of them as other separate data points.

The Venn diagram accepts an array of data so we structure the data likewise.

data = [
  {
    x: 'A',
    value: 100,
    name: 'TIME \n Can be quickly made'
  },
  {
    x: 'B',
    value: 100,
    name: 'INGREDIENTS \n Key elements available'
  },
  {
    x: 'C',
    value: 100,
    name: 'COMPLEXITY \n Manageable level'
  },
  {
    x: ['A', 'C'],
    value: 25,
    name: 'Add to \n wishlist'
  },
  {
    x: ['A', 'B'],
    value: 25,
    name: 'Possibility \n of disaster'
  },
  {
    x: ['B', 'C'],
    value: 25,
    name: 'Try on a \n holiday'
  },
  {
    x: ['A', 'B', 'C'],
    value: 25,
    name: 'The perfect \n recipe'
  }
]

The data points are given a value to indicate the amount of overlapping and non-overlapping. Since our data is qualitative, we have given each overlap the same value. The name indicates the description of each data point. The \n symbol seen in the description is a newline character that inserts a line break.

4. Write the JS code for the Venn diagram

Now that everything is in place, we are ready to see the magic happen! With just a few lines of code, we will have our basic Venn diagram ready.

All the JavaScript code is placed inside the <script> tag in the body of our HTML page. The first thing we do is add a function enclosing all the code, which makes sure that the code will only execute once the page is ready.

<script type="text/javascript">
  anychart.onDocumentReady(function() {
    // All the code for drawing the chart will come here
  });
</script>

Next, we add the data and create the chart using that data. Then we set the container to reference our previously added HTML element and draw the chart.

anychart.onDocumentReady(function () {
  var data = [{data}];

  // create venn diagram
  var chart = anychart.venn(data);

  // set container id for the chart
  chart.container('container');

  // initiate chart drawing
  chart.draw();
}

Our Venn diagram is drawn but we add just 2 more lines of code to give the chart a title and format the labels to represent the intersecting data text instead of values since that makes more sense for our subjective data.

// set chart title
chart.title('The perfect recipe to try while working from home');

// set labels settings
chart.labels().format('{%Name}');

Have a look at the result:

Image for post

Check out this basic Venn diagram with the full JS/CSS/HTML code on Playground or CodePen.

Isn’t it a delight to see a fully functional, good looking, interactive Venn diagram created with JavaScript in so few lines of code?

data-science data-visualization javascript programming web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Data Science Course in Dallas

Become a data analysis expert using the R programming language in this [data science](https://360digitmg.com/usa/data-science-using-python-and-r-programming-in-dallas "data science") certification training in Dallas, TX. You will master data...

50 Data Science Jobs That Opened Just Last Week

Data Science and Analytics market evolves to adapt to the constantly changing economic and business environments. Our latest survey report suggests that as the overall Data Science and Analytics market evolves to adapt to the constantly changing economic and business environments, data scientists and AI practitioners should be aware of the skills and tools that the broader community is working on. A good grip in these skills will further help data science enthusiasts to get the best jobs that various industries in their data science functions are offering.

Applications Of Data Science On 3D Imagery Data

The agenda of the talk included an introduction to 3D data, its applications and case studies, 3D data alignment and more.

Learn Web Development (For Data Science)

Web development requires HTML for the structure and CSS for the visual design. Javascript adds functionality and is what most web frameworks like Angular and React are written in. TensorFlow also released their popular machine learning library in Javascript so you can integrate it straight into your site.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...