To create brush interactivity of the mouse following the plotted data there is d3 has an API d3-brush that can help us. In this tutorial, I will show you how to work with thed3-brushto zoom into a specific date.

You can see the final result of this tutorial below;

Setting up your project

I will be using CRA (SPA) using the to get TS, SCSS, formatting, templates, linting, etc.

$ yarn create react-app area-brush --template must-have-libraries

Add d3, d3-cloud and types;

$ yarn add d3 @types/d3

area.csv

A good place to start when working with charts is from the data. …


To create interactivity of the mouse following the plotted data there is a need to do a calculation of the closest point to the mouse. Luckily, d3 has a method d3.bisector that can help us with these calculations. In this two-part tutorial, I will show you how to work with d3.bisector.

In the of this two-part series, I was working with two linear scale values as the metric and in this part, part two I will be working with value and time metrics using d3.bisector.

I created each tutorial so it can be used as standalone and use…


To create interactivity of the mouse following the plotted data there is a need to do a calculation of the closest point to the mouse. Luckily, d3 has a method d3.bisector that can help us with these calculations. In this two-part tutorial, I will show you how to work with d3.bisector.

In this first part, part one, I will be working with two linear scale values as the metric and in I will be working with value and time metrics using d3.bisector.

You can see the final result of this tutorial below;

Setting up your project

I will be using CRA (SPA)…


A Word Cloud chart is visually representing text, placing importance or frequency of individual words. The importance can be represented using font size, rotation, and fill color.

This format lets the users spot the most important or frequently used words in a DataSet.

In this tutorial I will show you how to create a simple word cloud with d3, using React and TypeScript as type checkers.

Setting up your project

I will be using CRA (SPA) using the to get TS, SCSS, formatting, templates, linting, etc.

$ yarn create react-app word-cloud --template must-have-libraries

Add d3, d3-cloud and types;

$ yarn add d3…


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. is a wrapper for 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 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 (SSR) 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 SSR project with Nextjs and including TypeScript as Type Checker, as well as adding d3 library.

Why

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

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

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

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