disaster crawler
1.0.0
대만 정부는 월/년 또는 재해 유형에 따라 각 웹 페이지에 기상 및 재난 정보를 배치하기 때문에 동일한 재난이 발생하며 2014 년부터 2015 년까지 24 페이지 (월 1 회 HTML 파일)가있을 수 있으며, 이는 처리에 매우 불편합니다. 따라서 Kinomo API를 사용 하여이 페이지의 정보를 추출하고 필터링합니다.
동일한 JSON 파일에 통합됩니다
그러나 Kinomo의 내장 API 통합 기능을 사용하지 않으면 AJAX 소스가 매우 과장되어 많은 소스가 동시에 처리되어야합니다. 사용자가 강우 정보를 선택하면 20xx에서 2015 년까지 정보를보기를 희망합니다. 이러한 방식으로 12 Ajax를 곱하기 위해 2015-20xx를 실행해야 할 것입니다. 이것은 유효한 문제 일뿐 만 아니라 변수 변수 정의의 구문 오류 일 것입니다. 그 이유는 Ajax가 비동기식이지만 JavaScript 컴파일러가 코드를 먼저 실행하기 때문입니다. 현재 일부 변수는 원래 Ajax의 응답을받는 데 사용되었지만 실행이 끝나지 않았기 때문에 아직 반환되지 않았습니다. 현재 변수는 무효 또는 정의되지 않으며 후속 처리에 문제가 있습니다. 현재 jQuery 's when () 및 () 기능을 사용해야합니다. 사용법은 다음과 같습니다.
function taipei_rain ( type , button ) {
var deferreds = [ ] ;
var taipei_dataset = [ ] ;
var data_url = [
{
'title' : '2002_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/b5pnx91i?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2003_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/9kj2hkik?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2004_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/59qturr2?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2005_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/dmuknjqm?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2006_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/8d5ddt9u?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2007_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/ciszlrhw?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2008_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/746pie88?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2009_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/8z3bx1nq?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2010_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/crjccgkc?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2011_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/afoernpw?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2012_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/7spnhan2?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2013_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/c2lpv54u?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2014_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/c8593u62?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2015_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/26rh5uwq?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
}
]
var deferreds = [ ] ;
$ . each ( data_url , function ( index , stat ) {
deferreds . push (
//跑迴圈將所有的Ajax response status 存入deferred陣列之中，並當作之後when() function的參數
$ . ajax ( {
type : 'GET' ,
dataType : 'jsonp' ,
url : this . url
} )
) ;
} ) ;
// 無法把一整個陣列作為參數，因此使用apply
$ . when . apply ( $ , deferreds ) . then ( function ( ) {
// 將儲存所有Ajax response的陣列deferreds放進when()當中，當所有的Ajax皆跑完的時候，他才會跑then()中的程式碼，有效避免AJax非同步的例外狀況
for ( var j = 0 ; j < arguments . length ; j ++ ) {
var title = arguments [ j ] [ 0 ] . name ;
var data = arguments [ j ] [ 0 ] . results . collection1 ;
// 接下來就可以做自己想要的data process 정부는 공개 데이터의 공식 웹 사이트에서 세 가지 수준의 정보를 발표했습니다.
-카운티 (도시) 행정 구역의 거부
-타운십의 행정 경계 (도시, 도시, 지구)
-네이셔티브 마을 경계지도
정부 내에서 사용 된 시스템으로 인해 출시 된 형식은 모두 SHP 파일 형식입니다. D3.JS의 저자 인 Mike 덕분에 그는 최근 Github에서 새로운 프로젝트 "Shappile"을 열었으므로 SHP 파일을 읽고 Geojson 형식으로 출력 할 수있었습니다. 실제로 Mike는 ShapeFile을 다른 프로젝트 "Topojson"에 통합하여 SHP 파일에서 Topojson 파일을 직접 생성 할 수 있습니다. (PS 관심이 있으시면이 웹 사이트로 이동하십시오)
topojson은 nodejs의 모듈이므로 Nodejs를 먼저 설치해야합니다. Nodejs는 다른 기사 "Data Crawler Practice- Nodejs를 사용하여 설치됩니다. https://nodejs.org/download/에서 설치 파일을 다운로드 할 수 있으며 Linux 또는 Mac 환경에서는이 웹 페이지에서 제공 한 메소드를 참조하여 설치할 수 있습니다. Nodejs가 설치되어 있음을 확인한 후 정부가 제공 한 다운로드 파일을 압축 해제하고 Topojson (카운티 및 도시 경계 맵을 예로 들어)을 사용하여 읽습니다.
NPM Install -G Topojson Topojson -S 0.0000001 -O COUNTY.JSON -P -SHAPEFILE -ENCODING BIG5 COUNTY.SHP
File County.json이 생성되며, 이는 우리가 필요한 Topojson 파일입니다. 우리는 또한 API를 프로그래밍 방식으로 사용할 수 있지만 상황이 더 복잡해 지므로 여기서는 이야기하지 않을 것입니다. 원래 데이터는 BIG5 형식이므로 "-shapefile-encoding"매개 변수를 사용하여 ShapeFile이 올바른 인코딩을 사용하도록 상기시켜야합니다. Topojson 처리 및 도면 후 Topojson 파일이 생성 된 후 Topojson 모듈에서 제공하는 기능을 사용하여 파일을 읽습니다.
< svg width =" 800px " height =" 600px " viewBox =" 0 0 800 600 " > </ svg >
< script type =" text/javascript " src =" http://d3js.org/topojson.v1.min.js " > </ script >
< script >
d3 . json ( "county.json" , function ( topodata ) {
var features = topojson . feature ( topodata , topodata . objects [ "county" ] ) . features ;
// 這裡要注意的是 topodata.objects["county"] 中的 "county" 為原本 shp 的檔名
</ script >그런 다음 d3.geo.path를 사용하여 d3.geo.mercator를 사용하여 그릴 수 있습니다.
var path = d3 . geo . path ( ) . projection ( // 路徑產生器
d3 . geo . mercator ( ) . center ( [ 121 , 24 ] ) . scale ( 6000 ) // 座標變換函式
) ;
d3 . select ( "svg" ) . selectAll ( "path" ) . data ( features ) . enter ( ) . append ( "path" ) . attr ( "d" , path ) ;도면 결과는 다음과 같습니다. 이제 맵을 추가로 처리 할 수 있으며 처리는 다음과 같습니다.
d3 . select ( "svg" ) . selectAll ( "path" ) . data ( features ) . enter ( ) . append ( "path" ) . attr ( {
d : path ,
name : function ( d ) {
return d . properties [ Cname ] ;
} ,
fill : '#55AA00'
} ) ;최종 결과는 다음과 같습니다.
http://bost.ocks.org/mike/map/의 참조 저자는 JSON 파일의 카운티, 도시, 행정 지구 정보를 읽을 수있는 기능을 작성하고 줄을 그립니다.
d3 . select ( "#pathCanvas" ) . append ( "path" ) //縣市/行政區界線
. datum ( topojson . mesh ( topodata , topodata . objects [ type ] , function ( a , b ) { return a !== b ; } ) )
. attr ( "d" , path )
. attr ( "class" , "subunit-boundary" ) ;동시에, 각 경로 태그는 클래스와 함께 첨부되므로 경계선은 다음 CSS의 색상과 스타일로 덮을 수 있습니다.
. subunit-boundary {
fill : none;
stroke : # 000 ;
stroke-dasharray : 2 , 2 ;
stroke-linejoin : round;
}또한, 우리는 마우스 센터와 마우스 아웃을 사용할 수 있으며, 각 카운티와 도시의 이름이 표시되고 색상은 다음과 같이 변경됩니다.
d3 . select ( "svg" ) . selectAll ( "path" ) . on ( "mouseenter" , function ( ) { // title div 顯示滑鼠所指向的縣市/行政區
fill = $ ( this ) . attr ( "fill" ) ;
$ ( this ) . attr ( "fill" , '#00DD77' ) ;
$ ( '#title' ) . html ( $ ( this ) . attr ( "name" ) ) ;
$ ( '#panel' ) . css ( { "height" : "20px" , "width" : "50px" } ) ;
} ) . on ( "mouseout" , function ( ) {
$ ( this ) . attr ( "fill" , fill ) ;
} ) ;
$ ( "path" ) . mouseover ( function ( ) { //panel 區塊跟隨滑鼠移動
$ ( "path" ) . mousemove ( function ( e ) {
mouseX = e . pageX ;
mouseY = e . pageY ;
} ) ;
$ ( '#panel' ) . css ( { 'top' : mouseY , 'left' : mouseX } ) . fadeIn ( 'slow' ) ;
} ) ;여기 문제가 온다. 정부는 SHP 파일의 위도 및 경도와 같은 것을 제공하지 않기 때문에 지진과 같은 일부 재난은 지진의 위도와 경도에 위치하지만 웹 페이지는 소위 좌표가없는 간단한 SVG 벡터 맵입니다. 따라서 내 방법은 Google지도를 켜고 통치자로 대만의 길이를 측정하는 것입니다. 내 웹 페이지의 대만 길이를 측정하고 스케일을 변환 한 후에는 내 웹 페이지의 SVG 경계 위치가 Google지도에있는 위치를 소개 할 수 있습니다. 경도와 경도를 취하고 두 개의 핵무기를 작성하여 각각 경도와 위도를 계산하고 SVG의 포인트가있는 곳으로 변환합니다 (이 방법은 매우 어리석은 일입니다. 나는 누군가 가이 기능을 더 잘 작성하는 방법에 대한 조언을 줄 수 있기를 바랍니다.
function mapTopixelX ( x ) {
var originX = 118.802981 , endX = 122.469668 ;
var webOriginX = 0 , webEndX = 800 ;
var resultX = ( x - originX ) * ( ( webEndX - webOriginX ) / ( endX - originX ) ) ;
return resultX ;
}
function mapTopixelY ( y ) {
var originY = 21.510473 , endY = 25.357116 ;
var webOriginY = 0 , webEndY = 900 ;
var resultY = 900 - ( y - originY ) * ( ( webEndY - webOriginY ) / ( endY - originY ) ) ;
return resultY ;
} 이전 섹션의 "다중 소스 데이터 처리"의 지침에 따르면, 코드가 끝나면 데이터 처리가 처리되고 다음 기능을 호출 할 수 있으며 모든 AJAX 데이터를 배열로 푸시하여 매개 변수 양식으로 전달할 수 있으며 차트가 시작됩니다.
function historyRain ( data , place ) {
reset ( ) ;
var rain_dataset = [ ] ;
for ( var i = 0 ; i < data . length ; i ++ ) {
rain_dataset . push ( { 'x' : ( 91 + i ) , 'y' : data [ i ] } ) ;
}
chart = new CanvasJS . Chart ( "chart" ,
{
theme : "theme1" ,
title : {
text : "台北各年份年雨量趨勢圖" ,
fontFamily : "微軟正黑體"
} ,
animationEnabled : true ,
axisX : {
interval : 1 ,
intervalType : "year" ,
labelFontColor : "black" ,
labelFontFamily : "微軟正黑體" ,
suffix : "年"
} ,
axisY : {
includeZero : false ,
title : "雨量數值 (單位mm)" ,
labelFontColor : "black" ,
labelFontFamily : "微軟正黑體"
} ,
toolTip : {
shared : true ,
content : "<span style='"'color: {color};'"'><strong>{name} : </strong></span> <span style='"'color: dimgrey;'"'>{y} (mm)</span> "
} ,
data : [
{
name : place ,
type : "area" ,
color : "rgba(0,255,0,0.6)" ,
indexLabelFontFamily : "微軟正黑體" ,
indexLabelFontColor : "black" ,
dataPoints : rain_dataset //將所有的data匯入canvas圖表當中
}
] ,
backgroundColor : 'rgba(0,0,0,0)' ,
} ) ;
chart . render ( ) ;
} 위는이 프로젝트의 프로젝트 소개입니다.이 프로젝트는 약간 간단합니다. 아직 확실하지 않은 경우 [email protected]으로 이메일을 보내주십시오. 모든 아카이브 코드를 GitHub에 업로드하고 GitHub 페이지를 생성했습니다. 데모를보고 싶은 사람들도 테스트 할 수 있습니다. 버그가 있으면 버그를보고 할 수 있습니다 (생산 시간은 짧고 버그가 많아야합니다. 용서하십시오 XD). 마지막으로 마지막으로 보셔서 감사합니다. 지원해 주셔서 감사합니다.
-http : //blog.infographics.tw/2015/04/visualize-geographics-with-d3js/
-http : //bost.ocks.org/mike/map/
-http : //canvasjs.com/
