伊藤  直子

伊藤 直子

1660424700

JavaScript でリニア ゲージ チャートを作成する

世界中の Covid-19 ワクチン接種データを強調する、クールでインタラクティブな線形ゲージ チャートをすばやく作成する方法を紹介します。私たちのグラフは、執筆時点での Covid-19 ワクチン接種の状況を視覚化することを可能にし、2 種類のデータを表示します。これは、世界人口に部分的および完全にワクチン接種するという中間目標からどれだけ離れているかを示します。

リニアゲージカバー画像

リニア ゲージ チャートとは

膨大な量のデータが作成され、データから情報を収集する可能性が数多くあることを考えると、データの視覚化は非常に貴重なツールです。データの視覚化は、傾向の特定、パターンの解釈、複雑なアイデアの対象者への伝達に特に役立ちます。

線形ゲージ チャートは、必要な値を示す垂直または水平の線形スケールを表し、カラー スケールと 1 つまたは複数のポインターを備えています。データ範囲の最小値と最大値は、表示されるデータに従って、軸上に設定できます。ポインターの位置は、メトリックの現在の値を示します。

ゲージ チャートでは、個々のポインターまたはマーカーの組み合わせを使用して、単一の値または複数の値を表示できます。ポインターは、円、正方形、長方形、三角形などの任意の形状のマーカーが付いた針または線にすることができます。

線形ゲージ チャート タイプは、値が目的のデータ ポイントにどれだけ近いか、またはどれだけ離れているかを表示するための効果的な視覚的表現です。

リニアゲージの種類

リニア ゲージには、温度計チャート、ブレット チャート、タンク チャート、LED チャートなどがあります。水銀温度計は、ポインター値で温度を表示する小さな目盛りで構成されており、リニア ゲージ チャートの典型的な例です。

構築する線形ゲージの視覚化

これは、最終的な線形ゲージ チャートのこっそりのぞき見です。このチュートリアルに従って、この興味深く有益な線形ゲージ チャートを JavaScript で作成する方法を学びましょう。

リニア ゲージ チャート最終版

JavaScript リニア ゲージを構築するための 4 つのステップ

HTML や JavaScript などのテクノロジに関するスキルを持っていると、常に役に立ちます。しかし、このチュートリアルでは、最小限の技術的知識でもリニア ゲージのような魅力的なグラフを簡単に作成できるようにする JS グラフ作成ライブラリを使用しています。

データを簡単に視覚化するためのJavaScript グラフ作成ライブラリがいくつかあります。ここでは、AnyChartを使用して線形ゲージ グラフを作成しています。このライブラリは柔軟で、豊富なドキュメントがあり、いくつかの優れた例で構成されています。さらに、コードを試すための遊び場があり、非営利目的での使用は無料です。ライセンス版を購入したい場合は、利用可能なオプションを確認してください。教育機関または非営利団体の場合は、こちらから無料ライセンスを入手できます。

JavaScript リニア ゲージを作成する手順

以下は、線形ゲージ チャートを作成するための基本的な手順です。

  1. 基本的な HTML ページを作成します。
  2. 必要な JavaScript ファイルを含めます。
  3. データを追加します。
  4. グラフの JavaScript コードを記述します。

これらの各ステップについて、以下で詳しく見ていきましょう。

1. 基本的な HTML ページを作成する

最初に、ビジュアライゼーションを保持する HTML ページを作成する必要があります。ブロック要素を追加し<div>て ID を付与し、後で参照できるようにします。

<html lang="en">
  <head>
    <title>JavaScript Linear Gauge</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>

の幅と高さの属性は<div>100% に設定されているため、グラフは画面全体に表示されます。これらの属性は、要件に従って変更できます。

2. 必要な JavaScript ファイルを含める

次のステップは、HTML ページで JS リンクを参照することです。このチュートリアルでは AnyChart ライブラリを使用するため、対応するファイルをCDNから含めましょう。

リニア ゲージ チャートを作成するには、コア モジュールリニア ゲージ モジュール、およびテーブル モジュールの 3 つのスクリプトを追加する必要があります。

<html lang="en">
  <head>
    <title>JavaScript Linear Gauge</title>
    <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 JS linear gauge will come here
    </script>
    <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-linear-gauge.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-table.min.js"></script>
  </body>
</html>

3. データ値を追加する

線形ゲージ チャートのデータは、Our World in Dataから収集され、コードに含まれています。そのサイトでは、全世界の各大陸で1 回または 2 回の Covidワクチン接種を受けた人の割合を確認できます。

(執筆時点では) 50% を超える数値は存在しないため、すべてのリニア ゲージの軸の上限を 50% に維持し、各大陸がそのマークからどれだけ離れているかを比較します。世界的な数字だけでなく。少なくとも部分的にワクチン接種された数字は LED 表示で示され、完全にワクチン接種された数字はバー ポインターで示されます。最後のステップでデータがどのように追加されるかを見ていきます。

これで、最初のステップはすべて完了しました。コードを追加して、JavaScript で線形ゲージ チャートを作成しましょう。

4. チャートの JavaScript コードを書く

コードを追加する前に、ページが読み込まれたときにのみコード全体が実行されるように、すべてを関数で囲みます。

線形ゲージ チャートの作成にはいくつかの手順が必要で、他の基本的なチャート タイプよりも少し複雑です。しかし、それは非常に難しいという意味ではありません。チャートがどのように作成されるかを理解するために、各ステップを進めていきます。

ゲージ チャートの線形スケールと軸の定義

チャートには複数のポインターがあります。それでは、2 つの値を受け入れる関数を作成することから始めましょう。1 つはバー ポインター用で、もう 1 つは LED ゲージ用です。次に、ゲージを作成し、データを設定して、レイアウトを水平に指定します。次に、スケールと軸の範囲を設定します。最小範囲と最大範囲で線形スケールを作成します。軸については、属性を定義し、方向を設定します。

function drawGauge(value, settings) {
  // Create gauge with settings
  const gauge = anychart.gauges.linear();
  gauge.data([value, settings.value]);
  gauge.layout('horizontal');

  // Set scale for gauge
  const scale = anychart.scales.linear();
  scale.minimum(0).maximum(settings.maximum).ticks({ interval: 2 });

  // Set axis for gauge
  const axis = gauge.axis(0);
  axis.width('1%').offset('43%').scale(scale).orientation('bottom');
}

バーポインタとラベルの設定

次に、バー ポインターとバー シリーズのラベルを作成します。ポインターとのオーバーラップを避けるために、ラベルにはオフセットが与えられます。

// Create and set bar point
const barSeries = gauge.bar(0);

barSeries
  .scale(scale)
  .width('4%');

// Create and set label with actual data
const labelBar = barSeries.labels();
labelBar
  .enabled(true)
  .offsetY('-15px');

LED ポインターの作成と色属性の設定

LED ポイントでは、ポイント間のギャップを指定し、dimmer プロパティを使用して残りの LED ポイントの色を設定し、非点灯効果を示します。点灯している LED ポイントのカラー スケールも宣言します。

// Create and set LED point
const ledPointer = gauge.led(1);

ledPointer
  .offset('10%')
  .width('30%')
  .count(settings.maximum)
  .scale(scale)
  .gap(0.55)
  .dimmer(function () {
    return '#eee';
  });

ledPointer.colorScale().colors(['#63b39b', '#63b39b']);

各データ ポイントの目標値を使用してゲージを宣言する

各大陸の線形ゲージを作成するために、データを使用してすべての地域に対して上記で定義した関数を呼び出します。最初の数値は目標値データを示し、2 番目の変数は LED データを持つオブジェクトです。maximumは一定の 50 のままですvalueが、 は各データ ポイントの完全にワクチン接種された人口のパーセント値です。この値はポインターによって表示されます。

// Create gauges
const world = drawGauge(13.68, { maximum: 50, value: 27.13 });
const europe = drawGauge(36.98, { maximum: 50, value: 47.28 });
const nAmerica = drawGauge(36.77, { maximum: 50, value: 46.53 });
const sAmerica = drawGauge(22.8, { maximum: 50, value: 40.54 });
const asia = drawGauge(10.14, { maximum: 50, value: 27.16 });
const oceania = drawGauge(9.75, { maximum: 50, value: 22.12 });
const africa = drawGauge(1.56, { maximum: 50, value: 3.04 });

リニア ゲージのレイアウトの設定

各リニア ゲージを上下に表示するには、テーブルを定義し、タイトルを各データ ポイントと共に個別の行として追加します。配置やフォント サイズなど、レイアウトのさまざまなプロパティを追加します。また、最初の行はタイトルなのでパラメーターを定義し、最初の列の width 属性を 100% に設定します。これ以上の列は必要ないからです。

// Create table to place gauges
const layoutTable = anychart.standalones.table();
layoutTable
  .hAlign('right')
  .vAlign('middle')
  .fontSize(14)
  .cellBorder(null);

// Put gauges into the layout table
layoutTable.contents([
  [null, 'Covid-19 Vaccination - How far are we from the halfway mark?'],
  ['World', world],
  ['Europe', europe],
  ['North America', nAmerica],
  ['South America', sAmerica],
  ['Asia', asia],
  ['Oceania', oceania],
  ['Africa', africa]
]);

// Set height for first row in layout table
layoutTable
  .getRow(0)
  .height(50)
  .fontSize(22)
  .hAlign('center');

// Set the first column to 100% width
layoutTable.getCol(0).width(100);

チャートを描く

最後のステップは<div>、前のステップで追加したコンテナーを参照し、グラフを描画することです。

// Set container id and initiate drawing
layoutTable.container('container');
layoutTable.draw();

以上です。完全に機能する美しい JavaScript 線形ゲージ チャートが完成しました。リニア ゲージのこの初期バージョンのコードは、CodePenで表示できます。

リニアゲージ初期バージョン

グラフをアクセス可能にする

できるだけ多くの人がグラフにアクセスできるようにすることは、良い習慣です。そのため、a11y を念頭に置いて、スクリーン リーダーにより適した線形ゲージ チャートの基本バージョンを作成しました。こちらで確認できます。また、AnyChart JavaScript ライブラリのドキュメントでこの側面について詳しく読むこともできます。

リニア ゲージのカスタマイズ

作成したデフォルトの線形ゲージ チャートは今のところ見栄えがしますが、いくつかの変更を加えることで読みやすさが向上し、チャートがさらに素晴らしいものになります。JavaScript ライブラリは、グラフをすばやく作成するだけでなく、必要に応じて視覚化をカスタマイズするのにも最適です。チャート ライブラリは、チャートの動作と美学を制御するための多くの構成オプションを提供します。現在のリニア ゲージ チャートに小さいながらも効果的な微調整を加えてみましょう。

色の変更

線形ゲージをよりまとまりのあるものにするために、バー ポインターの色属性を LED ポイントのより暗いバージョンにしましょう。バーの塗りと線の属性を指定することでそれを実現します。

// Create and set bar point
const barSeries = gauge.bar(0);
barSeries
  .scale(scale)
  .width('4%')
  .fill('#296953')
  .stroke('#296953');

線形ゲージ チャートに凡例を追加する

バー、点灯および非点灯の LED ポインターに異なる色を使用したため、色を説明する凡例を提供することをお勧めします。凡例を作成し、チャートのタイトルの下に追加します。

// Create stand alone legend
const legend = anychart.standalones.legend();
legend
.position('center')
.items([
    { text: 'Fully vaccinated', iconFill: '#296953' },
    { text: 'Partially vaccinated', iconFill: '#63b39b' },
    { text: 'Not vaccinated', iconFill: '#eee' }
]);

ツールチップの書式設定

より良いデータ通信を促進するために、値をパーセンテージ形式で表示し、ゲージの最大値が 50% であることを示すことで、ツールチップをフォーマットして、より情報を提供できるようにしましょう。

// Set gauge tooltip
gauge
    .tooltip()
    .useHtml(true)
    .titleFormat('{%Value} %')
        .format(
        'Maximum on scale: ' +
        settings.maximum +
        ' %'
    );

CodePenでこのバージョンのコード全体を確認してください。

軸とラベルの書式設定

最後に、混乱を避けるために、すべてのデータ値をパーセンテージ値として表示します。また、タイトルの下のテーブルにサブタイトルを行として追加して、値がパーセンテージであることを示します。最後の 1 つのことは、バーのラベルをより太字のフォントで美しくすることです。

リニアゲージ最終バージョン

この JavaScript 線形ゲージ チャートの最終的なコード全体はCodePenにあります。

結論

この段階的なチュートリアルでは、優れた JavaScript ライブラリを使用すれば、機能的で視覚的に魅力的な JavaScript グラフを作成することがそれほど難しくないことを確認しました。ドキュメントと例を確認して、リニア ゲージの機能とプロパティをよりよく理解してください。このチャートや他のビジュアライゼーションについて疑問がある場合は、質問してください。

AnyChartには複数のチャート オプションが用意されており、他にも美しい視覚化を作成するための JavaScript チャート作成ライブラリが多数あります。

予防接種を受けて健康を維持し、より多くのビジュアライゼーションを作成していきましょう!

 ソース: https://www.sitepoint.com/create-linear-gauge-chart-javascript/

#javascript 

What is GEEK

Buddha Community

JavaScript でリニア ゲージ チャートを作成する

Rahul Jangid

1622207074

What is JavaScript - Stackfindover - Blog

Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.

Who invented JavaScript?

JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.

What is JavaScript?

JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.

Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.

JavaScript Hello World Program

In JavaScript, ‘document.write‘ is used to represent a string on a browser.

<script type="text/javascript">
	document.write("Hello World!");
</script>

How to comment JavaScript code?

  • For single line comment in JavaScript we have to use // (double slashes)
  • For multiple line comments we have to use / * – – * /
<script type="text/javascript">

//single line comment

/* document.write("Hello"); */

</script>

Advantages and Disadvantages of JavaScript

#javascript #javascript code #javascript hello world #what is javascript #who invented javascript

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

It is said that a digital resource a business has must be interactive in nature, so the website or the business app should be interactive. How do you make the app interactive? With the use of JavaScript.

Does your business need an interactive website or app?

Hire Dedicated JavaScript Developer from WebClues Infotech as the developer we offer is highly skilled and expert in what they do. Our developers are collaborative in nature and work with complete transparency with the customers.

The technology used to develop the overall app by the developers from WebClues Infotech is at par with the latest available technology.

Get your business app with JavaScript

For more inquiry click here https://bit.ly/31eZyDZ

Book Free Interview: https://bit.ly/3dDShFg

#hire dedicated javascript developers #hire javascript developers #top javascript developers for hire #hire javascript developer #hire a freelancer for javascript developer #hire the best javascript developers

Niraj Kafle

1589255577

The essential JavaScript concepts that you should understand

As a JavaScript developer of any level, you need to understand its foundational concepts and some of the new ideas that help us developing code. In this article, we are going to review 16 basic concepts. So without further ado, let’s get to it.

#javascript-interview #javascript-development #javascript-fundamental #javascript #javascript-tips

Ajay Kapoor

1626321063

JS Development Company India | JavaScript Development Services

PixelCrayons: Our JavaScript web development service offers you a feature-packed & dynamic web application that effectively caters to your business challenges and provide you the best RoI. Our JavaScript web development company works on all major frameworks & libraries like Angular, React, Nodejs, Vue.js, to name a few.

With 15+ years of domain expertise, we have successfully delivered 13800+ projects and have successfully garnered 6800+ happy customers with 97%+ client retention rate.

Looking for professional JavaScript web app development services? We provide custom JavaScript development services applying latest version frameworks and libraries to propel businesses to the next level. Our well-defined and manageable JS development processes are balanced between cost, time and quality along with clear communication.

Our JavaScript development companies offers you strict NDA, 100% money back guarantee and agile/DevOps approach.

#javascript development company #javascript development services #javascript web development #javascript development #javascript web development services #javascript web development company

Nat  Grady

Nat Grady

1670062320

How to Use Zapier with MongoDB

I’m a huge fan of automation when the scenario allows for it. Maybe you need to keep track of guest information when they RSVP to your event, or maybe you need to monitor and react to feeds of data. These are two of many possible scenarios where you probably wouldn’t want to do things manually.

There are quite a few tools that are designed to automate your life. Some of the popular tools include IFTTT, Zapier, and Automate. The idea behind these services is that given a trigger, you can do a series of events.

In this tutorial, we’re going to see how to collect Twitter data with Zapier, store it in MongoDB using a Realm webhook function, and then run aggregations on it using the MongoDB query language (MQL).

The Requirements

There are a few requirements that must be met prior to starting this tutorial:

  • A paid tier of Zapier with access to premium automations
  • A properly configured MongoDB Atlas cluster
  • A Twitter account

There is a Zapier free tier, but because we plan to use webhooks, which are premium in Zapier, a paid account is necessary. To consume data from Twitter in Zapier, a Twitter account is necessary, even if we plan to consume data that isn’t related to our account. This data will be stored in MongoDB, so a cluster with properly configured IP access and user permissions is required.

You can get started with MongoDB Atlas by launching a free M0 cluster, no credit card required.

While not necessary to create a database and collection prior to use, we’ll be using a zapier database and a tweets collection throughout the scope of this tutorial.

Understanding the Twitter Data Model Within Zapier

Since the plan is to store tweets from Twitter within MongoDB and then create queries to make sense of it, we should probably get an understanding of the data prior to trying to work with it.

We’ll be using the “Search Mention” functionality within Zapier for Twitter. Essentially, it allows us to provide a Twitter query and trigger an automation when the data is found. More on that soon.

As a result, we’ll end up with the following raw data:

{
    "created_at": "Tue Feb 02 20:31:58 +0000 2021",
    "id": "1356701917603238000",
    "id_str": "1356701917603237888",
    "full_text": "In case anyone is interested in learning about how to work with streaming data using Node.js, I wrote a tutorial about it on the @MongoDB Developer Hub. https://t.co/Dxt80lD8xj #javascript",
    "truncated": false,
    "display_text_range": [0, 188],
    "metadata": {
        "iso_language_code": "en",
        "result_type": "recent"
    },
    "source": "<a href='https://about.twitter.com/products/tweetdeck' rel='nofollow'>TweetDeck</a>",
    "in_reply_to_status_id": null,
    "in_reply_to_status_id_str": null,
    "in_reply_to_user_id": null,
    "in_reply_to_user_id_str": null,
    "in_reply_to_screen_name": null,
    "user": {
        "id": "227546834",
        "id_str": "227546834",
        "name": "Nic Raboy",
        "screen_name": "nraboy",
        "location": "Tracy, CA",
        "description": "Advocate of modern web and mobile development technologies. I write tutorials and speak at events to make app development easier to understand. I work @MongoDB.",
        "url": "https://t.co/mRqzaKrmvm",
        "entities": {
            "url": {
                "urls": [
                    {
                        "url": "https://t.co/mRqzaKrmvm",
                        "expanded_url": "https://www.thepolyglotdeveloper.com",
                        "display_url": "thepolyglotdeveloper.com",
                        "indices": [0, 23]
                    }
                ]
            },
            "description": {
                "urls": ""
            }
        },
        "protected": false,
        "followers_count": 4599,
        "friends_count": 551,
        "listed_count": 265,
        "created_at": "Fri Dec 17 03:33:03 +0000 2010",
        "favourites_count": 4550,
        "verified": false
    },
    "lang": "en",
    "url": "https://twitter.com/227546834/status/1356701917603237888",
    "text": "In case anyone is interested in learning about how to work with streaming data using Node.js, I wrote a tutorial about it on the @MongoDB Developer Hub. https://t.co/Dxt80lD8xj #javascript"
}

The data we have access to is probably more than we need. However, it really depends on what you’re interested in. For this example, we’ll be storing the following within MongoDB:

{
    "created_at": "Tue Feb 02 20:31:58 +0000 2021",
    "user": {
        "screen_name": "nraboy",
        "location": "Tracy, CA",
        "followers_count": 4599,
        "friends_count": 551
    },
    "text": "In case anyone is interested in learning about how to work with streaming data using Node.js, I wrote a tutorial about it on the @MongoDB Developer Hub. https://t.co/Dxt80lD8xj #javascript"
}

Without getting too far ahead of ourselves, our analysis will be based off the followers_count and the location of the user. We want to be able to make sense of where our users are and give priority to users that meet a certain followers threshold.

Developing a Webhook Function for Storing Tweet Information with MongoDB Realm and JavaScript

Before we start connecting Zapier and MongoDB, we need to develop the middleware that will be responsible for receiving tweet data from Zapier.

Remember, you’ll need to have a properly configured MongoDB Atlas cluster.

We need to create a Realm application. Within the MongoDB Atlas dashboard, click the Realm tab.

MongoDB Realm Applications

For simplicity, we’re going to want to create a new application. Click the Create a New App button and proceed to fill in the information about your application.

From the Realm Dashboard, click the 3rd Party Services tab.

Realm Dashboard 3rd Party Services

We’re going to want to create an HTTP service. The name doesn’t matter, but it might make sense to name it Twitter based on what we’re planning to do.

Because we plan to work with tweet data, it makes sense to call our webhook function tweet, but the name doesn’t truly matter.

Realm Tweet Webhook

With the exception of the HTTP Method, the defaults are fine for this webhook. We want the method to be POST because we plan to create data with this particular webhook function. Make note of the Webhook URL because it will be used when we connect Zapier.

The next step is to open the Function Editor so we can add some logic behind this function. Add the following JavaScript code:

exports = function (payload, response) {

    const tweet = EJSON.parse(payload.body.text());

    const collection = context.services.get("mongodb-atlas").db("zapier").collection("tweets");

    return collection.insertOne(tweet);

};

In the above code, we are taking the request payload, getting a handle to the tweets collection within the zapier database, and then doing an insert operation to store the data in the payload.

There are a few things to note in the above code:

  1. We are not validating the data being sent in the request payload. In a realistic scenario, you’d probably want some kind of validation logic in place to be sure about what you’re storing.
  2. We are not authenticating the user sending the data. In this example, we’re trusting that only Zapier knows about our URL.
  3. We aren’t doing any error handling.

When we call our function, a new document should be created within MongoDB.

By default, the function will not deploy when saving. After saving, make sure to review and deploy the changes through the notification at the top of the browser window.

Creating a “Zap” in Zapier to Connect Twitter to MongoDB

So, we know the data we’ll be working with and we have a MongoDB Realm webhook function that is ready for receiving data. Now, we need to bring everything together with Zapier.

For clarity, new Twitter matches will be our trigger in Zapier, and the webhook function will be our event.

Within Zapier, choose to create a new “Zap,” which is an automation. The trigger needs to be a Search Mention in Twitter, which means that when a new Tweet is detected using a search query, our events happen.

Zapier Twitter Search Mention

For this example, we’re going to use the following Twitter search query:

url:developer.mongodb.com -filter:retweets filter:safe lang:en -from:mongodb -from:realm

The above query says that we are looking for tweets that include a URL to developer.mongodb.com. The URL doesn’t need to match exactly as long as the domain matches. The query also says that we aren’t interested in retweets. We only want original tweets, they have to be in English, and they have to be detected as safe for work.

In addition to the mentioned search criteria, we are also excluding tweets that originate from one of the MongoDB accounts.

In theory, the above search query could be used to see what people are saying about the MongoDB Developer Hub.

With the trigger in place, we need to identify the next stage of the automation pipeline. The next stage is taking the data from the trigger and sending it to our Realm webhook function.

Zapier to Realm Webhook

As the event, make sure to choose Webhooks by Zapier and specify a POST request. From here, you’ll be prompted to enter your Realm webhook URL and the method, which should be POST. Realm is expecting the payload to be JSON, so it is important to select JSON within Zapier.

We have the option to choose which data from the previous automation stage to pass to our webhook. Select the fields you’re interested in and save your automation.

The data I chose to send looks like this:

{
    "created_at": "Tue Feb 02 20:31:58 +0000 2021",
    "username": "nraboy",
    "location": "Tracy, CA",
    "follower_count": "4599",
    "following_count": "551",
    "message": "In case anyone is interested in learning about how to work with streaming data using Node.js, I wrote a tutorial about it on the @MongoDB Developer Hub. https://t.co/Dxt80lD8xj #javascript"
}

The fields do not match the original fields brought in by Twitter. It is because I chose to map them to what made sense for me.

When deploying the Zap, anytime a tweet is found that matches our query, it will be saved into our MongoDB cluster.

Analyzing the Twitter Data in MongoDB with an Aggregation Pipeline

With tweet data populating in MongoDB, it’s time to start querying it to make sense of it. In this fictional example, we want to know what people are saying about our Developer Hub and how popular these individuals are.

To do this, we’re going to want to make use of an aggregation pipeline within MongoDB.

Take the following, for example:

[
    {
        "$addFields": {
            "follower_count": {
                "$toInt": "$follower_count"
            },
            "following_count": {
                "$toInt": "$following_count"
            }
        }
    }, {
        "$match": {
            "follower_count": {
                "$gt": 1000
            }
        }
    }, {
        "$group": {
            "_id": {
                "location": "$location"
            },
            "location": {
                "$sum": 1
            }
        }
    }
]

There are three stages in the above aggregation pipeline.

We want to understand the follower data for the individual who made the tweet, but that data comes into MongoDB as a string rather than an integer. The first stage of the pipeline takes the follower_count and following_count fields and converts them from string to integer. In reality, we are using $addFields to create new fields, but because they have the same name as existing fields, the existing fields are replaced.

The next stage is where we want to identify people with more than 1,000 followers as a person of interest. While people with fewer followers might be saying great things, in this example, we don’t care.

After we’ve filtered out people by their follower count, we do a group based on their location. It might be valuable for us to know where in the world people are talking about MongoDB. We might want to know where our target audience exists.

The aggregation pipeline we chose to use can be executed with any of the MongoDB drivers, through the MongoDB Atlas dashboard, or through the CLI.

Conclusion

You just saw how to use Zapier with MongoDB to automate certain tasks and store the results as documents within the NoSQL database. In this example, we chose to store Twitter data that matched certain criteria, later to be analyzed with an aggregation pipeline. The automations and analysis options that you can do are quite limitless.

If you enjoyed this tutorial and want to get engaged with more content and like-minded developers, check out the MongoDB Community.

This content first appeared on MongoDB.

Original article source at: https://www.thepolyglotdeveloper.com/

#mongodb #zapier