如何使用JavaScript創建氣泡圖以可視化選舉結果

AnyChart是基於JavaScript (HTML5) 的圖表控件。使用AnyChart控件,可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用,可用於儀表盤、報表、數據分析、統計學、金融等領域。
如何使用JavaScript創建氣泡圖以可視化選舉結果

在當今數據呈指數增長的時代,可視化是工具箱中必不可少的技能。流行的技術包括條形圖,折線圖,餅圖和氣泡圖等。

對於任何開發人員,尤其是剛起步的開發人員,使用JavaScript從頭開始構建交互式圖表可能都是一項艱鉅的工作。這就是爲什麼我們擁有JS圖表庫的原因,該庫使您可以更輕鬆,更快捷地創建有見地的可視化效果!

繼續閱讀以瞭解如何使用這些庫之一創建JavaScript氣泡圖。

JavaScript圖表庫

有很多很棒的JavaScript庫可供使用,並且每個庫都有自己的優缺點。但是最好的部分是,使用所有圖表構建圖表的過程幾乎是相似的。因此,您可以與任何人一起學習繩索,然後使用適合您特定項目要求的任何庫。

我決定與本教程一起使用AnyChart JavaScript庫創建氣泡圖。我認爲對於初學者到中級編碼技能的開發人員來說,這是一個不錯的選擇。AnyChart具有豐富的文檔資料,非常靈活,並且具有多種圖表類型,可以啓動您的可視化之旅。

什麼是氣泡圖,它將顯示什麼?

我知道您很高興開始創建可視化文件,但是在我們開始之前,瞭解圖表類型以及爲什麼它適合我們要顯示的內容非常重要。

氣泡圖實質上是氣泡圖和在地理區域上繪製氣泡的圖的組合。氣泡的大小指示特定變量的值,而地圖上的位置指示位置。

2020年最重要的事件之一是美國總統大選。當然,我們知道整體結果。但是,僅憑一種觀點來看誰在哪個州和哪個百分比獲勝就不會很有趣嗎?我當然是這麼認爲的!雖然我敢肯定我們很多人都看過很多2020年美國大選地圖,但我將創建自己的地圖並逐步向您展示!

我將使用氣泡圖圖表,將在每個美國州上繪製氣泡圖。指示的3個參數如下:

每個州的選舉投票數,以氣泡大小爲單位。
每個州的獲勝方,由氣泡色表示。
顏色不透明贏得的選票百分比。
如您所見,氣泡圖圖表的超級強大之處在於能夠在單個視圖中顯示多個參數。
使用JavaScript創建氣泡圖



既然您知道了什麼是泡沫圖,並希望您確信它是代表美國大選各州結果的正確圖表,那麼讓我們深入研究一下該過程。

1.創建一個基本的HTML頁面

第一步是創建一個空白HTML頁面。爲了保存我的圖表,我添加了一個具有唯一ID的div元素,以後將用它來引用它。

我將佔位符div的寬度和高度設置爲100%,以便該圖表顯示在整個屏幕上。您可以根據自己的喜好保留這些值。
<!DOCTYPE html>
<html>

<head>
<title>Bubble Map</title>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>











<body>
<div id="container"></div>
</body>

</html>
2.包括必要的腳本
下一步是鏈接將用於創建氣泡圖的相應JS腳本。由於我使用的是AnyChart庫,因此我將引用相應的文件。對於我的圖表,我需要添加AnyChart的Base和Geo Maps模塊。我還需要包括具有美國各州地理數據的文件,該文件也可以在圖書館的CDN中找到。

提醒您,所有腳本文件都必須包含在<head>HTML頁面的部分中。

<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js" type="text/javascript"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-map.min.js" type="text/javascript"></script>
<script src="https://cdn.anychart.com/geodata/latest/countries/united_states_of_america/united_states_of_america.js"></script>;
3.連接數據
美國選舉結果有大量數據集。對於此圖表,我們需要特定的字段,因此我必須通過組合來自多個來源的數據來創建最終數據集。我使用了美國國會圖書館網站上有關各州選舉投票數的數據集以及美聯社的獲獎者數據。



AnyChart庫支持許多數據格式,包括CSV,JSON,XML ...爲了使這裏更簡單,我對數據進行了預處理,以包括圖表的相關字段,如下所示:
州代碼
緯度
經度
州名
選舉人票數
勝利黨
贏得的選票百分比
在開始使用數據之前,我們需要在HTML頁面中再添加2個腳本文件。數據適配器模塊處理數據文件的加載,因此我們將其包括在內。由於我們正在創建地圖,因此我們將使用另一個JavaScript庫Proj4js,該庫將點座標從一個座標系轉換爲另一個座標系。簡而言之,它將負責在各個地理區域上繪製氣泡。
4.添加代碼以繪製圖表








既然預備賽已經結束,現在是時候進入主要部分了。關於使用JavaScript圖表庫的重要之處在於,必須編寫的代碼量確實很少。我將引導您完成代碼行,以便您更好地理解氣泡圖的繪製方式。

首先,我將確保所有用於創建圖表的代碼都在anychart.onDocumentReady()函數內部。這是爲了在執行其他任何操作之前將頁面完全加載。接下來,我們使用anychart.data.loadJsonFile()函數加載數據。

我首先創建地圖,爲其定義一些設置,然後設置地理數據。我還爲地圖添加了標題。
anychart.onDocumentReady(function () {
anychart.data.loadJsonFile(
'https://gist.githubusercontent.com/shacheeswadia/70ec3d69e0e7a8bff7917607ea2926e4/raw/c3329fa81e86d9e637503b042becd17e68d9a718/bubbleMapData.json',
function (data) {



        // Creates map chart
        var map = anychart.map();

        // Define settings for maps regions
        map
          .unboundRegions()
          .enabled(true)
          .fill('#E1E1E1')
          .stroke('#D2D2D2');

        // Set geodata using the script added
        map.geoData('anychart.maps.united_states_of_america');

        // Set Chart Title
        map
          .title('2020 US Election Results');

    });
  });

接下來,我將氣泡添加到地圖上。由於無法很好地看到微小的氣泡,而很大的氣泡會造成混亂的重疊,因此我設置了最小和最大氣泡大小。
// Set bubble min/max size settings
map.minBubbleSize('0.8%').maxBubbleSize('5%');
現在,由於我們要顯示選舉結果,因此我們需要用獲勝黨的顏色來表示每個州的獲勝者-民主黨代表藍色,共和黨代表紅色。爲此,我們檢查數據中的獲勝者,併爲填充屬性分配相應的顏色。
// Fill color based on the winner
data.forEach(function(d){
if(d.winner == "Democrats"){
d.fill = "#019bd8";
}else{
d.fill = "#d81c28";
}
});
然後,我根據數據繪製氣泡並設置氣泡的大小,以反映數據中的選舉票數。我通過一些樣式啓用了氣泡圖的默認工具提示和標籤。
最後的步驟是設置容器以引用先前添加的HTML塊元素並繪製圖表。












就是這樣-僅用這幾行HTML和JS代碼就可以準備好漂亮,功能齊全的交互式氣泡圖!

您可以在CodePen [或在Playground ]上籤出此初始版本。爲了您的方便,這是完整的代碼:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js" type="text/javascript"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-map.min.js" type="text/javascript"></script>
<script src="https://cdn.anychart.com/geodata/latest/countries/united_states_of_america/united_states_of_america.js"></script>;





<script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>

<style type="text/css">

  html,
  body,
  #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

</style>
</head>
<body>

<div id="container"></div>

<script>

  anychart.onDocumentReady(function () {
    anychart.data.loadJsonFile(
      'https://gist.githubusercontent.com/shacheeswadia/70ec3d69e0e7a8bff7917607ea2926e4/raw/c3329fa81e86d9e637503b042becd17e68d9a718/bubbleMapData.json',
      function (data) {

        // Creates map chart
        var map = anychart.map();

        // Define settings for maps regions
        map
          .unboundRegions()
          .enabled(true)
          .fill('#E1E1E1')
          .stroke('#D2D2D2');

        // Set geodata using the script added
        map.geoData('anychart.maps.united_states_of_america');

        // Set Chart Title
        map
          .title('2020 US Election Results');

        // Set bubble min/max size settings
        map.minBubbleSize('0.8%').maxBubbleSize('5%');

        // Fill color based on the winner
        data.forEach(function(d){
          if(d.winner == "Democrats"){
            d.fill = "#019bd8";
          }else{
            d.fill = "#d81c28";
          }
        });

        //Charting the bubbles
        var series = map.bubble(
          anychart.data.set(data).mapAs({ size: 'electoralvotes' })
        );

        // Tooltip
        series
          .tooltip(true)
          .stroke('2 #E1E1E1')
          .fill('#1976d2')
          .selectionMode('none');

        // Labels
        series
          .labels()
          .enabled(true)
          .anchor('left-center')
          .position('right')
          .fontSize(11)
          .offsetX(5);

        // Set container id for the chart
        map.container('container');

        // Initiates chart drawing
        map.draw();

    });
  });

</script>
</body>
</html>
自定義氣泡圖
JS圖表庫通常提供一系列預先構建的自定義選項。



現有的氣泡圖已經很棒,但是我們可以用更多的代碼對其進行調整,使其更具洞察力,更美觀,並改善顯示的信息。

A.根據得票率分配不透明度

在不增加太多複雜性的情況下,在一個視圖中展示最大信息始終是一個好主意。因此,我想通過用氣泡顏色的不透明度表示贏得的選票百分比來爲可視化添加一個新的方面,這將是一個很好的機會,向您展示如何在過程中使用不同的JavaScript庫。您需要一些特定的功能。

我將使用D3.js(一個著名的用於數據圖形的開源JS庫),並使用它創建一個線性比例尺,該比例尺將接受數據中投票百分比的值並返回相應的不透明度值。爲此,我添加了必需的D3腳本,然後添加代碼以進行縮放。我根據數據調整輸入和輸出值。最後,我將不透明度值添加到fill屬性。
// Linear scale to get opacity values
var opacity = d3.scaleLinear()
.domain([49, 70])
.range([0.4, 0.9]);



// Fill color based on winner and opacity based on % of votes won
data.forEach(function(d){
var opacityVal = opacity(d.votepercent);
opacityVal = opacityVal.toFixed(2);
if(d.winner == "Democrats"){
d.fill = "#019bd8 " + opacityVal;
}else{
d.fill = "#d81c28 " + opacityVal;
}
});
如果您不完全瞭解這一部分,請不要感到不知所措。您會發現,它雖然稍稍超出了初學者的水平,但對許多人還是有幫助的,而且不太複雜。
B.改善工具提示










默認的工具提示僅顯示州名稱,其緯度/經度和值對應於每個州的選舉人票數。
我們可以自定義工具提示,以顯示我們想要顯示的信息-更有意義。

對於每個州,我決定顯示獲勝方的名稱,選舉人票數和獲勝者所獲票數的百分比。由於我想顯示多個字段,因此我爲工具提示啓用了HTML,使我可以設置文本格式。然後,我以HTML格式添加所有信息並修改某些樣式。嗯,現在工具提示就像是氣泡圖可視化的建設性補充。
// Enable HTML for labels
series.tooltip().useHtml(true);

// Customize tooltip text
series
.tooltip()
.titleFormat("<h6 style='font-size:16px;margin: 0.2rem 0; font-weight:400;'>{%name}")
.format("<h6 style='font-size:14px; font-weight:400; margin: 0.2rem 0;'>Winning Party: <b>{%winner}</b></h6><h6 style='font-size:14px; font-weight:400; margin: 0.2rem 0;'>Electoral Votes: <b>{%electoralvotes}</b></h6><h6 style='font-size:14px; font-weight:400; margin: 0.2rem 0;'>% of votes won: <b>{%votepercent}%</b></h6>");
C.增強圖表的整體外觀
最後一些簡單的修改以增強圖表。我爲圖表添加了一些樣式的字幕,並更改了標籤顏色以使其更具對比度。





我要調整的最後一件事是將氣泡懸停在氣泡上時的顏色。

瞧!我們具有基於JavaScript的引人入勝且有效的氣泡圖可視化,可以按州展示美國選舉結果數據!

結論

如您所見,使用JavaScript庫創建交互式數據可視化效果(例如氣泡圖)非常容易且令人興奮。您可以研究其他JavaScript圖表庫,並找到有關它們的更多信息。

希望本教程使您對數據可視化感興趣,並讓您興奮地開始探索JavaScript圖表。請隨時提出任何問題,提供建議或發表評論。總而言之,不要等着開始創建漂亮,有用的可視化!

相關產品推薦:
AnyGantt-構建複雜且內容豐富的甘特圖的理想工具

AnyMap-可交互式地圖是AnyChart組件

AnyStock-基於XML/JSON的Flash金融圖表解決方案

APS幫助提升企業生產效率,真正實現生產計劃可視化呈現與控制,快速有效響應不同場景的生產計劃,提高準時交貨能力,提高產能和資源利用率

想要購買AnyChart正版授權,或瞭解更多產品信息請點擊【諮詢在線客服】

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章