數(shù)據(jù)可視化：使用對數(shù)刻度

么是對數(shù)刻度？

就是在作圖之前，先對原始數(shù)值做對數(shù)計(jì)算，在畫到坐標(biāo)軸上。

簡單回憶下中學(xué)學(xué)過的對數(shù)函數(shù)：log2(x), loge(x)和log10(x)

為什么要使用對數(shù)刻度？

回答這個(gè)問題之前，先看看，你有沒有見過這樣的圖：

很多數(shù)據(jù)點(diǎn)，都集中在較小值那一端，看也看不清；而另一端較大數(shù)值，卻數(shù)據(jù)點(diǎn)很少、顯得很空曠。

原因就是這些數(shù)據(jù)的分布不均，不在一個(gè)數(shù)量級。或者說，如果把數(shù)值從小到大排序，會(huì)發(fā)現(xiàn)他們不是等距離的逐漸增加（比如1, 2, 3, ….；等差數(shù)列），而是成倍數(shù)的增長（比如1, 10, 100, 1000 …；等比數(shù)列）

這個(gè)時(shí)候，使用對數(shù)刻度的優(yōu)點(diǎn)就呈現(xiàn)出來了。

1) 數(shù)量級相差太大的數(shù)值，也可以放在同一個(gè)尺度上呈現(xiàn)。

2) 視覺化上有優(yōu)勢：視覺上相差的距離，有數(shù)據(jù)意義，代表了相差了多少倍。

現(xiàn)在以[1, 3.16, 10, 31.6, 100]這幾個(gè)數(shù)為例說明這兩個(gè)優(yōu)點(diǎn)。

[1, 3.16, 10, 31.6, 100]示例

對數(shù)刻度優(yōu)點(diǎn)：

1) 數(shù)量級相差太大的數(shù)值，也可以放在同一個(gè)尺度上呈現(xiàn)。

比如，對數(shù)化之前，這幾個(gè)數(shù)值呈現(xiàn)效果如下：

大部分都集中在左側(cè)一段。

對數(shù)化之后（以10為底數(shù)，即log10(x)），就可以在圖形上均勻分布了。

對數(shù)刻度優(yōu)點(diǎn)：

2) 視覺化上有優(yōu)勢：視覺上相差的距離，有數(shù)據(jù)意義，代表了相差了多少倍。

在對數(shù)刻度的坐標(biāo)軸上的任意兩個(gè)點(diǎn)，距離相差多少，就代表這兩個(gè)值相差多少。這樣處理后的數(shù)字化呈現(xiàn)，便于理解。

比如下圖的1）和2），都代表差了3.16倍；

而下圖的3）相差了這個(gè)長度的任何兩個(gè)點(diǎn)，都代表相差3.16倍。

注意對數(shù)刻度坐標(biāo)軸的正確標(biāo)注方法。一般有兩種：

方法1）直接標(biāo)真實(shí)值，

或者方法2）標(biāo)記x，然后軸名稱加上公式log10（x）。比如下圖：

最好使用方法1）。否則數(shù)據(jù)點(diǎn)代表的真實(shí)值是多少，還需要花時(shí)間理解、計(jì)算。

參考：https://serialmentor.com/dataviz/coordinate-systems-axes.html

真實(shí)案例

現(xiàn)在再看一個(gè)真實(shí)案例：

2007年，各個(gè)國家人均GDP（x軸）和壽命（y軸）的關(guān)系。

數(shù)據(jù)點(diǎn)未經(jīng)處理，直接作圖為：

Python plotly作圖

因?yàn)閴勖嗖畋容^平均，但是每個(gè)國家GDP則相差較大（最高最低差了兩個(gè)數(shù)量級），可以考慮對數(shù)處理。

下圖是log10(GPD)后的數(shù)據(jù)呈現(xiàn)：

處理后的x坐標(biāo)軸，標(biāo)記的是其真實(shí)值。刻度線分別代表了：300,400,500, …. 1000, 2000, 3000, 4000, 5000, … 10k, 20k, 30k, … 60k…

不出所料，400/300=1.33，500/400=1.25… 所以被標(biāo)記的刻度線，距離變小，從稀疏逐漸變密集。

活學(xué)活用

對數(shù)刻度可以用在數(shù)據(jù)量呈倍數(shù)增長的情況下。

聰明的讀者，一定想到了最近的疫情擴(kuò)散情況，極其符合對數(shù)刻度作圖。

這里借用了《金融時(shí)報(bào)》數(shù)據(jù)化專家John Burn-Murdoch的圖表。對數(shù)化處理后，可以從每個(gè)國家的曲線是否還在上升，判斷感染速率是否下降，也就是是否出現(xiàn)了疫情拐點(diǎn)。

轉(zhuǎn)載：https://www.shangyexinzhi.com/article/1619223.html

作圖工具：Python Plotly

T之家12月9日消息微軟對Chromium開源項(xiàng)目非常感興趣，因?yàn)樵擁?xiàng)目對Edge和Chrome都有利。微軟最新的功能請求之一就是希望通過部署Edge HTML風(fēng)格的滾動(dòng)特性從而讓Chromium的滾動(dòng)變得更加靈敏。

微軟打算將Impulse樣式（即EdgeHTML樣式）滾動(dòng)動(dòng)畫加入到Chromium中，微軟已經(jīng)將該滾動(dòng)動(dòng)畫移植到了基于Chromium的Edge瀏覽器的Dev Canary通道中。默認(rèn)情況下，Edge瀏覽器中啟用了脈沖樣式的滾動(dòng)動(dòng)畫。對于Chrome，該功能可能會(huì)在未來幾天內(nèi)出現(xiàn)在試驗(yàn)版瀏覽器中。

微軟表示，Impulse-style (也就是EdgeHTML-style)滾動(dòng)動(dòng)畫將提供更靈敏的滾動(dòng)體驗(yàn)，用戶啟用后鼠標(biāo)滾輪的每個(gè)刻度都試圖模仿基于物理的內(nèi)容，內(nèi)容會(huì)開始快速移動(dòng)然后逐漸變慢。換句話說，由于開始時(shí)的快速加速，該模式會(huì)給人一種更靈敏的感覺。

此外微軟還在推行另一項(xiàng)稱之為“percent-based scrolling”（基于百分比的滾動(dòng)）的滾動(dòng)方案，該模式允許瀏覽器將鼠標(biāo)滾輪或者鍵盤滾動(dòng)解釋為預(yù)期滾動(dòng)條的百分比。微軟目前正努力將經(jīng)典版Edge瀏覽器的優(yōu)秀特性移植到Chromium平臺(tái)上，包括這項(xiàng)基于百分比的滾動(dòng)方式。

景：最近在學(xué)習(xí)CSS3，看到了一個(gè)小案例，通過自己的學(xué)習(xí)，動(dòng)手實(shí)現(xiàn)了它，現(xiàn)在把它分享出來。

鐘表效果

實(shí)現(xiàn)過程

1.首先我們需要在頁面中寫出一個(gè)靜態(tài)的鐘表效果。首先我們需要一個(gè)表盤div wrap 對其進(jìn)行簡單的樣式設(shè)置，用border-radius屬性將其設(shè)置成圓形。

<div id="wrap"></div>
 #wrap{width:200px; height:200px; border:2px solid #000; margin:100px auto;border-radius:50%; position:relative;}

2.接下來我們用ul和li來寫表盤中的刻度，對其進(jìn)行簡單的樣式設(shè)置。其中需要注意的是，我們用 -webkit-transform-origin:center 100px;來設(shè)置我們的旋轉(zhuǎn)基點(diǎn)。然后利用 -webkit-transform: rotate(0);讓我們的li旋轉(zhuǎn)相應(yīng)的角度形成相應(yīng)的刻度。

 <ul id="list">
 <li></li> <!--刻度-->
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul> #wrap ul{margin:0; padding:0; height:200px; position:relative; list-style:none;} #wrap ul li{width:2px; height:6px; background:#000; position:absolute; left:99px; top: 0;-webkit-transform-origin:center 100px;} #wrap ul li:nth-of-type(1){-webkit-transform: rotate(0);} #wrap ul li:nth-of-type(2){-webkit-transform: rotate(6deg);} #wrap ul li:nth-of-type(3){-webkit-transform: rotate(12deg);} 
 #wrap ul li:nth-of-type(4){-webkit-transform: rotate(18deg);} #wrap ul li:nth-of-type(5){-webkit-transform: rotate(24deg);} #wrap ul li:nth-of-type(6){-webkit-transform: rotate(30deg);} #wrap ul li:nth-of-type(7){-webkit-transform: rotate(36deg);} #wrap ul li:nth-of-type(8){-webkit-transform: rotate(42deg);} #wrap ul li:nth-of-type(5n+1){ height:12px;}

3.其中我們設(shè)計(jì)到了css3的選擇器nth-of-type() ，它規(guī)定其屬于其父元素的第幾個(gè)li元素。

當(dāng)然，我們不可能將表盤的刻度都統(tǒng)統(tǒng)去設(shè)置li的樣式去完成。我們后面需要用js去渲染它。

在渲染之前，我們需要去寫上我們的秒針、分針、時(shí)針。分別是div hour、min、sec，并且我們對其進(jìn)行樣式的設(shè)置。為了美化一下，我們再寫一個(gè)div icon，圓點(diǎn)。并對其進(jìn)行簡單樣式設(shè)置。

 <div id="hour"></div>
 <div id="min"></div>
 <div id="sec"></div>
 <div class="icon"></div>
 #hour{width:6px; height:45px; background:#000; position:absolute; left:97px; top:55px;-webkit-transform-origin:bottom ;}
 #min{width:4px; height:65px; background:#999; position:absolute; left:98px; top:35px;-webkit-transform-origin:bottom ;}
 #sec{width:2px; height:80px; background:red; position:absolute; left:99px; top:20px;-webkit-transform-origin:bottom ;}
 .icon{width:20px; height:20px; background:#000; border-radius:50%; position:absolute; left:90px; top: 90px;}

4.接下來我們來寫一下讓鐘表動(dòng)起來的JavaScript，首先用js去獲取各個(gè)div。

 var oList=document.getElementById("list");//獲取到刻度
 var oCss=document.getElementById("css"); var oHour=document.getElementById("hour");//獲取時(shí)針
 var oMin=document.getElementById("min");//獲取分針
 var oSec=document.getElementById("sec");//獲取秒針
 var oLi=""; var sCss="";

5.接下來去渲染表盤的刻度。

 for (var i=0;i<60;i++) { //一個(gè)表盤總共是60個(gè)刻度
 sCss+="#wrap ul li:nth-of-type("+(i+1)+"){-webkit-transform: rotate("+i*6+"deg);}";
 oLi+="<li></li>";
 };
 oList.innerHTML=oLi;
 oCss.innerHTML+=sCss;//表盤刻度渲染完成

6.接下來我們?nèi)懸粋€(gè)鐘表表針根據(jù)時(shí)間變動(dòng)的函數(shù)，先利用new Date（）獲取時(shí)間，然后通過去改變表針的樣式去讓表針根據(jù)時(shí)間去轉(zhuǎn)動(dòng)，秒針一秒相當(dāng)于旋轉(zhuǎn)6度，分鐘一秒相當(dāng)轉(zhuǎn)動(dòng)6度，時(shí)針轉(zhuǎn)動(dòng)1秒相當(dāng)于轉(zhuǎn)動(dòng)30度。

function toTime(){ var oDate=new Date();//獲取當(dāng)前時(shí)間
 var iSec=oDate.getSeconds();//獲取當(dāng)前秒
 var iMin=oDate.getMinutes()+iSec/60;//獲取當(dāng)前分
 var iHour=oDate.getHours()+iMin/60;//獲取當(dāng)前時(shí)
 oSec.style.WebkitTransform="rotate("+iSec*6+"deg)";//秒針轉(zhuǎn)動(dòng)角度1秒6度 (表盤一圈360度一圈60秒所以一秒6度)
 oMin.style.WebkitTransform="rotate("+iMin*6+"deg)";//分鐘轉(zhuǎn)動(dòng)角度1分6度 (表盤一圈360度一圈60分所以一分6度)
 oHour.style.WebkitTransform="rotate("+iHour*30+"deg)";//時(shí)針轉(zhuǎn)動(dòng)角度一小時(shí)30度(表盤一圈360度一圈12小時(shí)所以一小時(shí)30度)
 };

7.最后我們來開一個(gè)定時(shí)器，讓函數(shù)隔一秒執(zhí)行一次。

 toTime();
 setInterval(toTime,1000);

至此一個(gè)鐘表效果就寫完了，下面是全部源代碼

效果源碼

在線咨詢

上一篇：前端開發(fā)就業(yè)面試題-JavaScript篇
下一篇：代碼達(dá)人必備：高效解碼Quoted-Printabl

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商