Donut charts are often utilized to show the proportions of categorical type datasets. The size of each piece representing the proportion of each category.

A donut chart is created usually as: string field, a count of something such as features, number, rate/ratio field, etc.

A pie chart without a good legend is meaningless. A good way to display a legend is to add lines and labels to each category.

In this tutorial, I will show you how to create a simple donut chart that has polylines and labels utilizing: d3, React and TypeScript as type checkers.

Setting up your project

I will be using…

An area chart is similar to the line chart, it combines the line and bar chart to show how one or more groups’ numeric values change over time.

An area chart is different from the line chart by the addition of shading fill between lines and the baseline, like in a bar chart. The brush can be used to interact with the chart and zoom in and out to focus on a specific time.

In this tutorial I will show you how to create an area chart with d3, using React and TypeScript as type checkers.

Setting up your project

I will be using…

If you need WhatsApp node implementation for MERN or MEAN stack or just for creating a bot. WhatsApp-node-api is a wrapper for whatsapp-web.js it allows sending messages with very little setup and the process is straightforward.

I broke down the process into three steps;

  1. Install & Setup — setting up whatsapp-node-api api.js server
  2. Authenticate — authentication of WhatsApp desktop
  3. Send ‘Hello World’ message

Step #1 Install & Setup

$ git clone
$ npm install
$ cd whatsapp-node-api
$ node api.js

# Step 2: authenticate

We are ready. Whatsapp needs that you authenticate the desktop App to send messages to someone else, to do so first authenticate;

If you…

When it comes to dynamically load and import images during runtime. It’s easy to get challenged trying to dynamically load images on production.

In this quick article, I will give you some approaches that worked well for me with regards to dealing with images loaded dynamically both locally and on production.

#1 require an image

If you have static images during compile time a good approach is to require the assets and just use them using the ‘require’ to import the image. It’s best to avoid dynamic loading of assets if that's not needed.

CRA is already configured with webpack and will include your…

When it comes to publishing your React code. There are so many factors to consider and many options are available out there.

As a team leads, startup advisor, CTO, or any technology professional you may need to make a decision, what should you pick?

In this article, you will be learning about some of the best options you can pick select your React starter project, your options, as well as walk you through the process of creating one example of a SPA React App as well as SSR React App and publish the code.

How this article is organized?

This article is split into

  1. Selecting…

Server-side rendering (SSL) is the ability of an App to display content on the server instead of rendering it in the browser such as in Single page application (SPA).

In this article I will show you how to set a minimum starter React SSL project with Nextjs and including TypeScript as Type Checker, as well as adding d3 library.


Using Single Page Applications (SPA) the rendering is done on the client side, and external resources usage is limited.

However, Dynamic d3 content demand improving user experience and increasing engagement.

There are cases where using SSR is preferred over SPA. There…

Many times, data visualization requires lots of resources to run. For instance, consider the feature that a common chart includes: animations, live data feed updating in runtime, a chart with thousands of records, or few charts placed on a single page.

These requirements can cause a sluggish experience, especially when the user is using less capable devices such as mobile or computer with low memory or a slow network connection.

In this article, I will show you the performance knick-knacks you can do to provide a better user experience.

When building charts, it’s important to give considerations to the footprint…

As a team leads, startup advisor, CTO, or any technology professional you may need to make a decision, what should you use when you need a chart in a React-based project.

Yes, d3 is the standard when it comes to creating charts. Combining React with d3 gives an additional benefit as taking advantage of the React VDOM can ensure the DOM is only getting updated when needed as well as including other React libraries.

In this article, I will be exploring the most popular React with d3 libraries and show you a simple implementation.

Image Credit:

Why use Ready-made components?

There are gazillion libraries out there…

A force-directed graph is often used for drawing graphs pleasing the eye. Using a combination of React with d3 is great since each library can be used for different things. It’s bringing the best of all worlds. Adding TypeScript as a type checker to the mix helps ensure the types are well defined and avoid potential bugs. Total goodness!

In this tutorial, I will be showing you how to create a simple force graph that can be used to show a relationship between nodes and link them together.

What we will be building?

The final results can be seen below;

The technology stack is opinionated…

A world map chart is a great way to be used as the background to show items globally. Integrating d3 + React and TS can create a readable code that takes the best of all worlds. In this article, I will show you how to work with a world map chart to create a rotating map and assign dots based on coordinates.

In this tutorial, I will show you how to work with a world map using React, d3, and TS as type checker. I broke down the process into steps. …

Eli Elad Elrom

Technologist, dive instructor, pilot —

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store