- 基于網(wǎng)絡(luò)爬蟲(chóng)的可視化圖表:golang,goquery
- 案例:最近十年全國(guó)彩票銷售變化情況
- 案例:中國(guó)科學(xué)院院士分布
- 數(shù)據(jù)可視化技術(shù)方案:基于 SVG (D3、Raphael)、基于 Canvas(Echarts)
我們身處大數(shù)據(jù)時(shí)代,幾乎在所有工作例如商業(yè)技術(shù)、金融、科研教育等行業(yè),以及日常生活中都可能需要涉及數(shù)據(jù)分析活動(dòng)。橫向來(lái)看數(shù)據(jù)分析的知識(shí)體系貫穿數(shù)據(jù)獲取、數(shù)據(jù)存儲(chǔ)、數(shù)據(jù)分析、數(shù)據(jù)挖掘、數(shù)據(jù)可視化等各大部分;按數(shù)據(jù)來(lái)源分,即可以是自己收集的數(shù)據(jù),也可以采購(gòu)數(shù)據(jù)或者基于公開(kāi)數(shù)據(jù)集。
基于公開(kāi)數(shù)據(jù)進(jìn)行分析的話,必須提到的就是網(wǎng)絡(luò)爬蟲(chóng)(web crawler),也被稱作網(wǎng)絡(luò)蜘蛛(spider)、自動(dòng)索引程序(automatic indexer),搜索引擎(Google,百度等)就是大眾日常生活中接觸到的最典型、最強(qiáng)大的爬蟲(chóng)。
公開(kāi)數(shù)據(jù)包括政府(統(tǒng)計(jì)局、央行、銀監(jiān)會(huì)、證監(jiān)會(huì)等)、企業(yè)、社會(huì)組織和互聯(lián)網(wǎng)上的個(gè)人發(fā)布信息等。在浩如煙海的互聯(lián)網(wǎng)內(nèi)容中,有價(jià)值信息猶如‘待字閨中’深藏的美女,等待有心人去挖掘。例如:


為了實(shí)現(xiàn)上述圖表,相關(guān)技術(shù)方案的要點(diǎn)如下:
- 開(kāi)發(fā)語(yǔ)言:
基于 Golang 實(shí)現(xiàn)爬蟲(chóng)基本功能,主要考慮 Go 語(yǔ)言 自身對(duì)于網(wǎng)絡(luò)方面的強(qiáng)大支持,語(yǔ)言級(jí) Goroutines 提供并發(fā)高性能支持。 - HTML選擇器: goquery jQuery-style HTML manipulation in Go
- 數(shù)據(jù)存儲(chǔ): csv,PostgreSQL 等
- 數(shù)據(jù)可視化:ECharts

案例
數(shù)據(jù)來(lái)源頁(yè)面:





//caipiao_task.go
func Handle_GMOF_CaiPiao_Month_BatchTask() {
data := read_csv_caipiao("./data/caipiao_list.csv", ",")
if data != nil {
for i := range data {
go Handle_GMOF_CaiPiao_Month_Task(url)
}
<-time.After(60 * time.Second)
}
}
func Handle_GMOF_CaiPiao_Month_Task(url string) {
if url != "" {
myspider := init_GMOF_CaiPiao_Month_HTMLSpider(url)
ctx, _ := myspider.Setup(nil)
myspider.Spin(ctx)
}
}
//caipiao_spider.go
package main
import (
"log"
"regexp"
"strings"
"github.com/PuerkitoBio/goquery"
"github.com/celrenheit/spider"
)
type GMOF_CaiPiao_Month_HTMLSpider struct {
title string `json:"title"`
url string `json:"url"`
desc string `json:"desc"`
}
func init_GMOF_CaiPiao_Month_HTMLSpider(url string) *GMOF_CaiPiao_Month_HTMLSpider {
spider := NewGMOF_CaiPiao_Month_HTMLSpider()
spider.url = url
return spider
}
func (w *GMOF_CaiPiao_Month_HTMLSpider) Setup(ctx *spider.Context) (*spider.Context, error) {
return spider.NewHTTPContext("GET", w.url, nil)
}
func (w *GMOF_CaiPiao_Month_HTMLSpider) Spin(ctx *spider.Context) error {
if _, err := ctx.DoRequest(); err != nil {
return err
}
html, err := ctx.HTMLParser()
if err != nil {
return err
}
caipiao := NewGMOF_CaiPiao_Month()
//<title></title>
caipiao.Title = html.Find("title").Eq(0).Text()
caipiao.Title = Convert2String(caipiao.Title, GB18030)
//class="TRS_Editor"
html.Find(".TRS_Editor").Each(func(i int, s *goquery.Selection) {
content := s.Find("p").Text()
caipiao.Content = content
if content != "" {
content = Convert2String(content, GB18030)
rows := strings.Split(content, "。")
for _, value := range rows {
//fmt.Printf("======arr[%d]=\n [%s] \n", index, value)
if strings.Index(value, "全國(guó)彩票") > 0 {
reg := regexp.MustCompile(`全國(guó)共銷售彩票([\d]+.[\d]+)\S+`)
result := reg.FindStringSubmatch(value)
if len(result) > 0 {
caipiao.Total = result[1]
}
}
}
}
})
//id="appendix"
html.Find("#appendix").Each(func(i int, s *goquery.Selection) {
href, _ := s.Find("a").Eq(0).Attr("href") //附件
caipiao.Attachid = href
})
//===== export data
save_csv("./data/caipiao_result.csv", caipiao)
return err
}
2017年11月份全國(guó)彩票銷售情況,385.55
2017年10月份全國(guó)彩票銷售情況,376.53
2017年9月份全國(guó)彩票銷售情況,369.28
2017年8月份全國(guó)彩票銷售情況,350.67
2017年7月份全國(guó)彩票銷售情況,337.55
2017年6月份全國(guó)彩票銷售情況,338.42
可視化圖表:以 ECharts 為例
常見(jiàn)的圖表庫(kù),本文案例使用 ECharts 作為圖表組件
- HighCharts:JavaScript 編寫(xiě),開(kāi)源許可證允許個(gè)人用戶和非商業(yè)用途。
- Baidu ECharts:底層畫(huà)圖基于 Canvas, BSD 許可證協(xié)議。
- Kartograph:構(gòu)建交互式地圖輕量級(jí)類庫(kù)。
//http://echarts.baidu.com/demo.html#line-gradient
data = [["2017年11月",385.55],["2017年10月",376.53],["2017年9月",369.28],["2017年8月",350.67],["2017年7月",337.55],["2017年6月",338.42],["2017年11月",385.55],["2017年10月",376.53],["2017年9月",369.28],["2017年8月",350.67],["2017年7月",337.55],["2017年6月",338.42],["2017年11月",385.55],["2017年10月",376.53],["2017年9月",369.28],["2017年8月",350.67],["2017年7月",337.55],["2017年6月",338.42],["2017年5月",376.95],["2017年4月",382.45],["2017年3月",379.33],["2017年2月",0],["2017年1月",291.61],["2016年12月",365.94],["2016年11月",344.82],["2016年10月",338.27],["2016年9月",320.71],["2016年8月",310.12],["2016年7月",324.03],["2016年6月",339.61],["2016年5月",346.19],["2016年4月",348.89],["2016年3月",356.88],["2016年2月",224.54],["2016年1月",326.41],["2015年12月",341.21],["2015年11月",306.30],["2015年10月",312.34],["2015年9月",290.78],["2015年8月",280.96],["2015年7月",270.47],["2015年6月",281.2371],["2015年5月",321.07],["2015年5月",321.07],["2015年4月",326.12],["2015年3月",308.12],["2015年2月",247.90],["2015年1月",392.33],["2014年12月",361.53],["2014年11月",341.18],["2014年10月",327.01],["2014年9月",322.52],["2014年8月",315.36],["2014年7月",372.09],["2014年6月",360.54],["2014年5月",307.94],["2014年4月",315.29],["2014年3月",328.74],["2014年2月",200.1],["2014年1月",271.49],["2013年12月",302.73],["2013年11月",274.16],["2013年10月",271.83],["2013年9月",257.62],["2013年8月",246.18],["2013年7月",243.65],["2013年6月",247.46],["2013年5月",273.41],["2013年4月",285.61],["2013年3月",273.37],["2013年2月",168.65],["2013年1月",248.59],["2012年12月",268.01],["2012年11月",237.06],["2012年10月",215.38],["2012年9月",205.12],["2012年8月",197.12],["2012年7月",201.98],["2012年6月",216.14],["2012年5月",236.16],["2012年4月",235.76],["2012年3月",235.79],["2012年2月",202.17],["2012年1月",164.54],["2011年12月",224.80],["2011年11月",210.08],["2011年10月",203.28],["2011年9月",196.44],["2011年8月",187.72],["2011年7月",182.05],["2011年6月",174.53],["2011年5月",187.28],["2011年3月",190.12],["2011年2月",112.92],["2011年1月",160.09],["2010年12月",171.89],["2010年11月",160.24],["2010年10月",149.95],["2010年9月",139.56],["2011年4月",186.50],["2010年8月",135.75],["2010年7月",132.74],["2010年6月",140.71],["2010年5月",144.38],["2010年4月",141.05],["2010年3月",132.52],["2010年2月",86.71],["2010年1月",126.99],["2009年12月",133.30],["2009年11月",117.05],["2009年10月",116.47],["2009年9月",111.73],["2009年8月",110.64],["2009年7月",107.87],["2009年6月",113.51],["2009年5月",121.59],["2009年4月",114.61],["2009年3月",114.49],["2009年2月",89.21],["2009年1月",74.33],["2008年12月",102.07],["2008年11月",94.09],["2008年10月",79.88],["2008年8月",84.66]];
var dateList = data.map(function (item) {
return item[0];
});
var valueList = data.map(function (item) {
return item[1];
});
option = {
// Make gradient line here
visualMap: [{
show: false,
type: 'continuous',
seriesIndex: 0,
min: 0,
max: 400
}, {
show: false,
type: 'continuous',
seriesIndex: 1,
dimension: 0,
min: 0,
max: dateList.length - 1
}],
title: [{
left: 'center',
text: 'Gradient along the y axis'
}, {
top: '55%',
left: 'center',
text: 'Gradient along the x axis'
}],
tooltip: {
trigger: 'axis'
},
xAxis: [{
data: dateList
}, {
data: dateList,
gridIndex: 1
}],
yAxis: [{
splitLine: {show: false}
}, {
splitLine: {show: false},
gridIndex: 1
}],
grid: [{
bottom: '60%'
}, {
top: '60%'
}],
series: [{
type: 'line',
showSymbol: false,
data: valueList
}, {
type: 'line',
showSymbol: false,
data: valueList,
xAxisIndex: 1,
yAxisIndex: 1
}]
};
最佳實(shí)踐
- 默認(rèn)調(diào)色板(palette)
[圖片上傳失敗...(image-835cce-1515641952307)]
Navy — #001f3f
Blue — #0074d9
Aqua — #7fdbff
Teal — #39cccc
Olive — #3d9970
Green — #2ecc40
Lime — #01ff70
Yellow — #ffdc00
Orange — #ff851b
Red — #ff4136
Maroon — #85144b
Fuchsia — #f012be
Purple — #b10dc9
Black — #111111
Gray — #aaaaaa
Silver — #dddddd
White — #ffffff
優(yōu)化圖表JS生成模板
圖表定型之后,可以通過(guò)模板固化配置,根據(jù)需要?jiǎng)討B(tài)生成目標(biāo)文件(html,js,svg等等),詳見(jiàn)基于 Markdown 的 HTML 網(wǎng)頁(yè)模板。優(yōu)化采集器 Goroutines "線程池"
例如:PostgreSQL Exception: Open too many files優(yōu)化數(shù)據(jù)存儲(chǔ)
例如:常用的 GIS 坐標(biāo)庫(kù)
擴(kuò)展閱讀:開(kāi)源工具與案例
golang-based library
- golang.org/net/http
- github.com/celrenheit/spider
- goquery: jQuery-style HTML manipulation in Go
- github.com/henrylee2cn/pholcus_lib
- Pholcus is a distributed, high concurrency and powerful web crawler software
可視化圖表案例
可視化圖表技術(shù)方案
基于 SVG : D3、Raphael
基于 Canvas : Echarts
HighCharts
國(guó)外開(kāi)源產(chǎn)品,JavaScript 編寫(xiě),自帶主題、動(dòng)態(tài)交互方便,目前公司新版業(yè)務(wù)視圖、地圖應(yīng)用、交互式流量圖等是基于這個(gè)庫(kù)實(shí)現(xiàn)。
不足:缺少中文文檔,開(kāi)源許可證只允許個(gè)人用戶和非商業(yè)用途,規(guī)模應(yīng)用存在法律風(fēng)險(xiǎn)。Baidu ECharts
最早源于百度各種業(yè)務(wù)系統(tǒng)報(bào)表需求,底層畫(huà)圖基于 Canvas 。2013年開(kāi)源,完全免費(fèi)的BSD協(xié)議。
特點(diǎn):拖拽重計(jì)算,第三方標(biāo)準(zhǔn)格式支持,中文社區(qū)支持
實(shí)例:http://echarts.baidu.com/doc/example.html
Github: https://github.com/ecomfe/echartsKartograph
Kartograph 是個(gè)構(gòu)建交互式地圖的簡(jiǎn)單、輕量級(jí)類庫(kù)。它包含兩個(gè)庫(kù),一個(gè)用Python寫(xiě)的,用于產(chǎn)生漂亮和壓縮的SVG地圖,另一個(gè)是js類庫(kù)用于前端展示地圖用。
擴(kuò)展閱讀:數(shù)據(jù)可視化
- 數(shù)據(jù)可視化(一)思維利器 OmniGraffle 繪圖指南
- 數(shù)據(jù)可視化(二)跑步應(yīng)用Nike+ Running 和 Garmin Mobile 評(píng)測(cè)
- 數(shù)據(jù)可視化(三)基于 Graphviz 實(shí)現(xiàn)程序化繪圖
- 數(shù)據(jù)可視化(四)開(kāi)源地理信息技術(shù)簡(jiǎn)史(Geographic Information System
- 數(shù)據(jù)可視化(五)基于網(wǎng)絡(luò)爬蟲(chóng)制作可視化圖表
- 數(shù)據(jù)可視化(六)常見(jiàn)的數(shù)據(jù)可視化儀表盤(DashBoard)
- 數(shù)據(jù)可視化(七)Graphite 體系結(jié)構(gòu)詳解