Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 27, 2021 07:22 pm GMT

Creating a JS Polar Chart in 4 Steps

Polar charts often look impressive, which makessome people think that creating them is a tricky process demanding plenty of skills and expertise. Well, I am going to debunk this myth right now! Let me show you how to easily visualize data in a beautiful interactive JavaScript Polar Chart.

Fundamentally, apolar chart is a variation ofa circular graph drawn with polar coordinates. Itcan also workwellto visualize some sorts of categorical data for comparisons, which is exactly the case I want to demonstrate now. In this tutorial, I will build a column polar chart, with the bars growing from the center of the diagram to represent values with their length.

Data Visualization Society (DVS) conducts anannual State ofthe Industrysurvey of data viz practitioners, andI thought it could be a great opportunity to play with some of itslatest data. In particular, I wanted to look at themost popular technologies used for data visualization based on the responses. Sohere, I will produce a JS polar chartthat plots the top15 ones, making up a cool illustrative real-world example.

It will be fun come along, everyone!

JS Polar Chart Preview

Take a sneak peek at what the final JavaScript polar chart will look like:

The final JavaScript Polar Chart of the tutorial in a preview

Building a JavaScript Polar Chart in 4 Simple Steps

To createa polar chart here, I will use a JavaScript charting library. Such libraries are equipped with pre-written code for basic functions, which makes it easier and quicker to create a data visualization.

For this tutorial, Ivepickedthe AnyChart JavaScript library since it issimpletouse, flexible, and free for non-commercial use. Also, it is a great library to start with because of a lot of examples and good documentation.

Generally speaking, it is possible to split the entire process of creating any JSgraph including a polar chart into four fundamental steps orstages. They are:

  1. Create a basicweb page in HTML.
  2. Reference the requiredJavaScript files.
  3. Addthe data.
  4. Write some JS code to draw the chart.

Join me in following these steps tomake an awesome interactive JavaScript-based polar chart visualization!

1. Create a basic web page in HTML

To begin with, I create a basic HTML page and a block element that will hold the polar chart:

<html>  <head>    <title>JavaScript Polar Chart</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>

As you see the <div> element is given an id so that I can referto it later in the code. Also, the width and height of the <div>block are specified as 100% to make thepolar chart render over the whole page.

2.Reference the required JavaScript files

Next, in the <head> section of the page, Ireference the specific scripts of the charting library being used.

Here, I amworking with AnyChart, so I willinclude the required files from itsCDN. The libraryis modular, and for the polar chart, all I need is the handycore and polar modules.

<html>  <head>    <title>JavaScript Polar Chart</title>    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-polar.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 JS polar chart code will come here.    </script>  </body></html>

3.Add the data

To get a dataset for my future polar chart, I filtered DVS's Data Visualization Census Survey 2020 data and identified the 15 most commonly used technologies as answered by the respondents.

Now, toproperly addthis datato the chart, I create an arraywith the category name as the x parameter, as we are plotting on the X-axis, and the measure of each of the categories as the value parameter.

// add data as an array of objectsvar data = [  { x: 'Excel', value: 44.7 },  { x: 'Tableau', value: 36.1 },  { x: 'Pen & Paper', value: 27.1 },  { x: 'R', value: 25 },  { x: 'Python', value: 24.1 },  { x: 'D3.js', value: 21.2 },  { x: 'Illustrator', value: 20.3 },  { x: 'ggplot2', value: 19.8 },  { x: 'Power BI', value: 18.7 },  { x: 'Plotly', value: 11.8 },  { x: 'Matplotlib', value: 10.58 },  { x: 'Mapbox', value: 9.28 },  { x: 'QGIS', value: 9.22 },  { x: 'ArcGIS', value: 7.18 },  { x: 'React', value: 7.4 }];

The preparations are all done and it is time now to make the JavaScript-based polar chart show up on the canvas!

4. Write some JS code to draw the polar chart

The first thing I do here is add a function enclosing all the JS polar chart code. This ensures that everything inside it will execute only after the web page is ready.

Making a polar chart in JavaScript is pretty much straightforward. I just write one line of code to createit, then add the data arrayprepared in the previous step, and connect the data to the chart creating a column series.

anychart.onDocumentReady(function () {  // create a polar chart  var chart = anychart.polar();  // add data as an array of objects  var data = [    { x: 'Excel', value: 44.7 },    { x: 'Tableau', value: 36.1 },    { x: 'Pen & Paper', value: 27.1 },    { x: 'R', value: 25 },    { x: 'Python', value: 24.1 },    { x: 'D3.js', value: 21.2 },    { x: 'Illustrator', value: 20.3 },    { x: 'ggplot2', value: 19.8 },    { x: 'Power BI', value: 18.7 },    { x: 'Plotly', value: 11.8 },    { x: 'Matplotlib', value: 10.58 },    { x: 'Mapbox', value: 9.28 },    { x: 'QGIS', value: 9.22 },    { x: 'ArcGIS', value: 7.18 },    { x: 'React', value: 7.4 }  ];  // connect the data creating a column series  var columnSeries = chart.column(data);});

The data is categorical,consisting of discrete values.So I specify the X-scale as ordinal. I alsoset the Y-axis as 'false' toavoid displayingthe corresponding values.

// set the x-scalechart.xScale('ordinal');// disable the y-axischart.yAxis(false);

It is always important to name the chart so that the viewer has no problemquickly understanding whatis shown. So, I set the polar chart title:

// set the chart titlechart  .title('Top 15 Technologies for Data Visualization (DVS Survey 2020)');

Finally, I reference the previously added <div> container and command to display the resulting polar chart.

// set the chart container idchart.container('container');// initiate the chart displaychart.draw();

Initial Polar Chart Result

Lo and behold, an interactive JavaScript-based polar chart is ready with these few lines of code!

Check out this initial version here and feel free to play around with it on AnyChart Playground or CodePen.

<html>  <head>    <title>JavaScript Polar Chart</title>    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-polar.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>      anychart.onDocumentReady(function () {        // create a polar chart        var chart = anychart.polar();        // add data as an array of objects        var data = [          { x: 'Excel', value: 44.7 },          { x: 'Tableau', value: 36.1 },          { x: 'Pen & Paper', value: 27.1 },          { x: 'R', value: 25 },          { x: 'Python', value: 24.1 },          { x: 'D3.js', value: 21.2 },          { x: 'Illustrator', value: 20.3 },          { x: 'ggplot2', value: 19.8 },          { x: 'Power BI', value: 18.7 },          { x: 'Plotly', value: 11.8 },          { x: 'Matplotlib', value: 10.58 },          { x: 'Mapbox', value: 9.28 },          { x: 'QGIS', value: 9.22 },          { x: 'ArcGIS', value: 7.18 },          { x: 'React', value: 7.4 }        ];        // connect the data creating a column series        var columnSeries = chart.column(data);        // set the x-scale        chart.xScale('ordinal');        // disable the y-axis        chart.yAxis(false);        // set the chart title        chart          .title('Top 15 Technologies for Data Visualization (DVS Survey 2020)');        // set the chart container id        chart.container('container');        // initiate the chart display        chart.draw();      });    </script>  </body></html>

The basic JavaScript Polar Chart

Such a polargraph picture makes it clearly seen that, according to the latest DVS survey, Microsoft Excel is the mostpopular technology for data visualization, followed by Tableau, pen & paper, and R.

Actually, this is justa basic version. And there are so many things that we can add. Follow along as I demonstrate how this (and basically any other)JS polar chart can be customized for a more functional and funkier representation!

Customizing the JS Polar Chart

There are various ways how you can customize a polar chart like this. Keep reading to learn how to make some quick, yet effective tweaks.

A. Modify the width of the points
B. Improve the tooltip and the title
C. Add a second series
D. Change the colors
E. Enhance the labels, tooltip, and title

FOR A WALKTHROUGH OF THESE JS POLAR CHART CUSTOMIZATIONS, CONTINUE READING HERE.


Original Link: https://dev.to/andreykh1985/creating-a-js-polar-chart-in-4-steps-21h5

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To