データの可視化

動機
私は、私が書いた草稿を見ていて、これが救済されることができると思いました.私はいくつかの簡単なグラフの可視化プロジェクトを行ってきました.我々の選択のグラフライブラリのAPIを学ぶ時間のほとんどは、これらのライブラリは、データを提示する驚異を動作します.それで、私がHighChartsからショーケースデータにDev.to APIを使う方法の短いウォークスルーは、ここにあります.例として、dev . to APIは、“packedBubble”グラフの形でそれらをプロットするために1000の記事の詳細を取得するために使用されます.各バブルのサイズは、反応数(positiveRank ReactionCountカウント+ CommentLengthカウント)を参照します.その後、上に立ち往生、タイトル、URL、および記事のカウントが表示されます.1000以上の反応カウントを持つ記事は、ラベルをつけられます.私も任意の8カテゴリ/タグ(ステップ2の詳細)の記事を表示するように選択している.

初期準備
プログラミング作業の一部がデータを他の形式からデータに変換していることに気づきました.フロントエンドのグラフライブラリを使用するには、JSON形式でデータを持っている私の経験では、最も便利です.しかし、データソースがCSVまたはExcelスプレッドシートから来ることができるときがあります.Pythonでいくつかの変換スクリプトを書くか、JavaScriptでいくつかの前処理を行いました.Papa Parseは私が以前使っていた1つのJSヘルパーパッケージです.我々が我々にJSONフォーマットされたデータを返すAPIを持っているとしても、我々はまだそれをchartingライブラリが予想するフォーマットにそれを操作する必要があるかもしれません.
この作業例では、私は彼らの豊富な機能と非常に良いドキュメントのハイチャートを選択しています.彼らは良いリファレンス/出発点として機能することが多くのJSFIDLEの例があります.ただし、有料のライセンスは、商業的に自分の製品を使用する必要があります注意してください.無料で使用するには、次の点に注意してください.

Non-profit organisations, schools and personal websites can enjoy our software for free under a Creative Commons (CC) Attribution-Non-Commercial license. In order to obtain a non-commercial license, please fill out this form.

まず最初にすることは、データの構造がhightchartによってどのように予想されるかを調べることです.グラフ/グラフライブラリのドキュメントがオプションと説明で満たされている場合には、この情報を理解することができます.したがって、例を見ます.これは、そのようなexample私はドキュメントを閲覧を見つけた.コードを見ると、グラフで使用するデータがここで指定されることを確認するのは簡単です.

series: [{
        data: [1, 4, 3, 5],
        type: 'column',
        name: 'Fruits'
    }]

したがって、seriesはデータの個々のグループの配列を含んでいます.実際のデータポイントは、配列の形で属性data内にある.他の例のさらなる検査において、データポイントが数字またはストリングのようなプリミティブである必要はないのを見ることができます.データポイントとその名前やその他の属性などのメタデータを含むオブジェクトとなります.今、我々は前進する準備ができています.

ステップ1
devから1000の記事を取得し、APIを使用します.

async function makeGetRequestAndReturnJson() {
    const response = await fetch('https://dev.to/api/articles?per_page=1000');
    return await response.json();
}

ステップ2
必要な形式にデータを操作します.個々のデータポイントは以下の形式です.

{
  'title': 'someTitle',
  'url': 'someUrl',
  'value': 'someReactionCount'
}

そして、データをフィルタリングして、統合するコードは以下の通りです(私はデータ処理部であまりに機能しすぎたかもしれません、forループの使用も可能です).

async function processData() {
    const targetTags = ['react', 'opensource', 'codenewbie', 'beginners', 'tutorial', 'webdev', 'showdev', 'productivity'];
    const seriesData = [{
        name: 'react',
        data: []
    },
    {
        name: 'opensource',
        data: []
    },
    {
        name: 'codenewbie',
        data: []
    },
    {
        name: 'beginners',
        data: []
    },
    {
        name: 'tutorial',
        data: []
    },
    {
        name: 'webdev',
        data: []
    },

    {
        name: 'showdev',
        data: []
    },
    {
        name: 'productivity',
        data: []
    }];
    const data = await makeGetRequestAndReturnJson();
    const filteredData = data.filter(article => article.tag_list.some(tag => targetTags.includes(tag)))
    filteredData.forEach(article => {
        const filteredTags = article.tag_list.filter(tag => targetTags.includes(tag))
        filteredTags.forEach(tag => {
            seriesData.find(type => type.name === tag).data.push(
                {
                    title: "article.title,"
                    url: article.url,
                    value: article.comments_count + article.positive_reactions_count
                })
        });
    })
    return seriesData;
}

ステップ3
グラフ設定プロセスで準備データを使用します.

async function setupGraph() {
    const seriesData = await processData()
    chart = new Highcharts.chart('container', {
        chart: {
            type: 'packedbubble',
            height: '50%',
        },
        title: "{"
            text: 'Visualizing Dev.to articles'
        },
        tooltip: {
            useHTML: true,
            stickOnContact: true,
            pointFormat: '<b>{point.title}:</b> <br/>Reaction Count: {point.value} <br/><a target="_blank" href={point.url}>{point.url}</a>'
        },

        plotOptions: {
            packedbubble: {
                useSimulation: false, // true for a better animation
                minSize: '30%',
                maxSize: '100%',
                zMin: 0,
                zMax: 2000, // the max value of the bubble
                layoutAlgorithm: {
                    gravitationalConstant: 0.01,
                    splitSeries: false, 
                    seriesInteraction: true,
                    dragBetweenSeries: true,
                    parentNodeLimit: true,
                },
                dataLabels: {
                    enabled: true,
                    format: '{point.title}',
                    filter: {
                        property: 'y',
                        operator: '>',
                        value: 1000 // labeling the articles with over 1000 in positive reaction counts
                    },
                    style: {
                        // adjusting of styles for data labels
                        color: 'black',
                        // textOutline: 'none',
                        // fontWeight: 'normal',
                    },

                },
            }
        },
        series: seriesData,
    });
}

ステップ4
準備完了時に関数コールを呼び出します.

// trigger setupGraph function on document ready
document.addEventListener('DOMContentLoaded', () => {
    setupGraph();
})

ステップ5
スクリプトを実行し、結果を表示するには、基本的なHTMLページを作成します.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>DevTo Visualization</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <!-- Load jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <script src="index.js"></script>
  </body>
</html>

結論
一緒にすべてを置く、ここでアクションの可視化を参照してくださいlinkです.あなたがコードに興味があるならば、ここでは、Githubレポへのlinkです.
難易度に関して、複雑さの大部分は使用中のライブラリの設定と構成を知っていることにあります.私は難しい部分は、視覚的に何を使用して適切なグラフ/グラフの種類を見つけることだと思う.データはどのような話をするべきか?私の簡単な例では、人々が本当に「収集可能」と「更なる使用のためのマーク」を楽しむことを示します😂.
さらなる拡張のアイデア

などの興味深いデータを取得するには、dev . to APIを探る

APIパラメータを使用してタグをフィルタリングし、特定のタグ

の記事のみを取得します

あなたが

を作成した記事を取得します

他のグラフ/グラフの種類を利用可能な