Archive for the Tips and Tricks

Creating Choropleth Map Data Visualization Using JavaScript, on COVID-19 Stats

May 6th, 2020 by Anastasia Zoumpliou

Creating a choropleth map data visualization using JavaScript (JS HTML5)These days you see choropleth maps in a variety of webpages and utilized for various subjects. Have you wondered how such data visualizations are built? Are you interested in making them by yourself? If so, stay with me through this JS charting tutorial, where I will show you how to create an interactive JavaScript choropleth map from scratch but with ease.

Basic knowledge of HTML5 and JS is always helpful, but even if you are a beginner in this field, understand these four simple steps and you will be able to quickly get a good-looking cross-platform interactive choropleth map data visualization for your app or website!

What exactly are choropleth maps? When you break down the word, you see that choro- (“choros”) means “area” and pleth- (“plethos”) means “multitude.” Exactly, these maps are used to visualize statistical data related to multiple geographic areas. Each area is colored or shaded differently according to the value of the given data, making it easy to grasp how a measurement varies across a territory.

For this JS mapping tutorial, I will use open COVID-19 data to show the distribution of confirmed cases and deaths around the world by country. I will start with a basic choropleth map that will graphically represent the confirmed cases. Then I will add a legend, customize the tooltip, and add bubbles to visualize the number of deaths.

Let’s get started!

Read the JS charting tutorial »

Creating JavaScript Column and Bar Charts on COVID-19 Data

April 6th, 2020 by Jay Stevenson

Laptop with a JavaScript chart visualizing the latest COVID-19 data illustrating a tutorial on how to create JavaScript column and bar chartsNeed compelling JS charts for your website or app? Start with the basics! Complete this quick data visualization tutorial and you’ll learn how to easily create JavaScript column and bar charts that will look great in any HTML5-based project, allowing for easy comparisons.

Chart examples to be built and demonstrated in this tutorial will be visualizing the latest novel coronavirus cases data from JHU CSSE as COVID-19 is the most topical issue nowadays.

Keep reading and you’ll see JS charting is actually very simple. Especially if you have at least a very basic understanding of programming (more than that is awesome but far from necessary).

Read the JS charting tutorial »

Making JS Candlestick Chart in Four Simple Steps

March 25th, 2020 by Anastasia Zoumpliou

A JS Candlestick Chart on the screen of a laptopDo you have trading data, looking for a way to effectively visualize it for your website or app project? If so, a JS candlestick chart could be your best pick. This tutorial will break down the process needed to create such a chart into simple steps and provide a detailed explanation of the code. Keep reading even if you are new to programming, because only a basic understanding is needed to follow along and master such a JavaScript (HTML5) based data visualization technique.

Also called a Japanese candlestick chart, this chart type is one of the most popular forms of financial and stock data visualization. Each candlestick represents information about the open, high, low, and close price of the day. Candlestick charts are widely used in technical analysis of price movement patterns.

Complete this tutorial and you will be able to create a compelling interactive candlestick chart in JavaScript real quick, with ease.

Read the JS charting tutorial »

How to Create JavaScript Bubble Chart — Tutorial for Web Developers

March 3rd, 2020 by Wayde Herman

Making a JS bubble chart is described step by step in this tutorial for web developersHave you ever wanted to create a bubble chart using JavaScript but did not know how? Then this tutorial is for you! Carry on reading to learn more about bubble charts and how we can build them quickly and painlessly.

Bubble charts are an extension of the scatter plot. Most commonly, they display three variables which are expressed as the horizontal distance of the point (x), the vertical distance of the point (y), and the size of the point (z). A bubble chart is a great visualization technique to let users compare data points. When designed well, it can be really eye-catching and engaging.

In this tutorial, I will teach you how to build your very own interactive JS bubble chart and bring it to life through customization. All examples will be available with the full code.

For this “getting started” guide, I have decided to explore the data of the top 30 grossing movies. Let’s look at the amount of money each movie has grossed, the budget, as well as the year of release. A bubble chart is a particularly good choice for the visualization of this dataset as it will allow us to easily compare these three numeric variables in an interesting and beautiful way.

Read the JS charting tutorial »

Creating Heat Map Chart Using JavaScript

February 26th, 2020 by Anastasia Zoumpliou

Creating Heat Map Chart Using JavaScript, a tutorial for web developers and data enthusiastsWant to learn how to quickly create an interactive heat map chart using JavaScript? This data visualization tutorial will guide you through the coding process step by step. Basic knowledge of HTML (HTML5) and some understanding of programming are more than enough to master this charting technique.

A heat map (or heatmap chart) is a two-dimensional, matrix-based data visualization in which colors represent values. It is often used to facilitate the analysis of complex data sets, revealing patterns in how variables change, correlate, and more.

Read this JS charting tutorial to the end and you will have no more problems with getting compelling heat maps up and running on your web sites and in your apps.

Read the JS charting tutorial »

Create Simple Gantt Chart Using JavaScript — Tutorial

September 4th, 2019 by Alfrick Opidi

Create Simple Gantt Chart Using JavaScript — Tutorial

Use a JavaScript library to create a Gantt chart and take your project management efforts to the next level.

Earlier this year, my team was looking for a project management tool that could assist us in charting the various tasks related to our app development project against some specific timelines. After doing some research, we finally settled on Gantt charts. However, some people think Gantts are complicated to create. Not true! Thanks to numerous JavaScript chart libraries, data visualization is now simple, flexible, and embeddable.

In our situation, we settled on AnyChart’s JS Charts library because of its ease of use, extensive documentation, flexible code playground for trying out stuff, and other powerful features.

In this tutorial, I’ll walk you through how to create a simple interactive Gantt chart using this data visualization library. Here’s what we’ll be making and you can get the entire code for creating such a Gantt chart at the end of the tutorial:

Gantt chart created along this JavaScript charting tutorial

Read the JS charting tutorial »

Creating Treemap Chart Using JavaScript

August 1st, 2019 by Douglas "Bugggster" Baxter

Creating Treemap Chart Using JavaScript, a tutorial for web developers and data enthusiastsTreemap is a popular chart type for hierarchical data visualization. I’ll show you how to create a cool interactive treemap chart using JavaScript in four simple steps right now. Join me on this quick tutorial for front-end web developers and data viz enthusiasts to understand the core principles of the process. Basically, I am sure everyone at least a little familiar with coding in HTML5 will love the presented, easy way to make beautiful JavaScript treemap charts that are perfectly suitable to be embedded into any web page or app.

In honor of World Wide Web Day celebrated today, August 1, I will develop a JS treemap visualizing data about the number of worldwide internet users as of January 2019, by region, available on Statista.

Read the JS charting tutorial »

Create Cool Interactive Sankey Diagram Using JavaScript — Tutorial

June 13th, 2019 by Alfrick Opidi

Create Cool Interactive Sankey Diagram Using JavaScript — TutorialSankey diagrams are becoming more and more popular in data visualization tasks. So, it’s essential for front-end web developers to know how to create charts of this type. Actually, it is quite a simple and straightforward process, especially if you are using one of the good JavaScript charting libraries.

In my tutorial, I’ll show you how to create beautiful, intuitive, interactive JS (HTML5) Sankey diagrams with no fuss.

Read the JS charting tutorial »

How to Create JavaScript Word Cloud Chart — Tutorial for Web Developers

April 30th, 2019 by Irina Maximova

Tutorial on how to create a JavaScript word cloud chart and customize it, for front-end web developers
Wondering how to make a beautiful interactive Word Cloud using JS? Then you’re in the right place! In this data visualization tutorial, I’ll guide you through the entire development process, demonstrating it’s easier to create a JavaScript word cloud chart for an HTML5 app or web page than you might think!

Also known as tag clouds, word clouds represent a popular visual technique designed to reveal how often tags (or basically, any words) are mentioned in a given text body. Essentially, the word cloud chart type leverages diverse colors and sizes to display at a glance different levels of relative prominence.

Now that we’ve got an idea of what a word cloud is, let’s get down to learning how to quickly code one using JavaScript!

Read the JS charting tutorial »

How to Code JS Column Chart with Multi-Level X-Axis — Challenge AnyChart!

April 17th, 2019 by Irina Maximova

How to code an interactive JS column chart with a wulti-level X-axis using the AnyChart JavaScript charting library, in the Challenge AnyChart! blog featureWe continue to update the Challenge AnyChart! section of our blog with new data visualization tutorials. They nicely demonstrate how powerful our JavaScript charting library is, which our Support Team is always eager to prove to everyone. In one of the first challenges, we already told you how to create a JS chart with nested axes. Since our customers keep showing interest in such forms of data presentation, now we’ll show you how to build another interesting chart with a different appearance but quite similar code — an interactive JS column chart with a multi-level X-axis.

Read more »

Categories
Archive