国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁(yè)
  2. >Toy博客

《數(shù)據(jù)可視化》課程期末項(xiàng)目_地理交通數(shù)據(jù)可視化

2年前作者：謝語(yǔ)花分類(lèi)：Toy博客閱讀(45)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了《數(shù)據(jù)可視化》課程期末項(xiàng)目_地理交通數(shù)據(jù)可視化。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

2022年上海疫情爆發(fā)期間交通數(shù)據(jù)可視化分析
《數(shù)據(jù)可視化》課程期末項(xiàng)目報(bào)告-選題：地理數(shù)據(jù)可視化

GitHub源碼地址(如果有用點(diǎn)個(gè) star 吧~謝謝！)

1.0 項(xiàng)目簡(jiǎn)介

上海各高校自三月中上旬開(kāi)始封校管理，并進(jìn)行線(xiàn)上教學(xué)。高校人員密集，聚集性新冠病例頻出，加之封校封樓導(dǎo)致日常生活、外出就醫(yī)等方面有諸多不便，因此大學(xué)生返鄉(xiāng)意愿格外強(qiáng)烈。五月疫情逐漸好轉(zhuǎn)后，上海各高校逐漸放開(kāi)申請(qǐng)離校返鄉(xiāng)的通道，但如何返鄉(xiāng)又成為了新的難題。比如買(mǎi)好機(jī)票后被臨時(shí)通知航班取消，又比如找不到前往機(jī)場(chǎng)、火車(chē)站的公共交通，只能步行或騎自行車(chē)。因此，我們決定對(duì)上海疫情爆發(fā)期間的交通數(shù)據(jù)進(jìn)行可視化分析，以航班數(shù)據(jù)可視化為主要切入點(diǎn)，同時(shí)分析直達(dá)機(jī)場(chǎng)各航站樓的公交數(shù)據(jù)。

2.0 數(shù)據(jù)簡(jiǎn)介

2.1 航線(xiàn)數(shù)據(jù)

主要來(lái)自上海機(jī)場(chǎng)公司的官網(wǎng)以及飛常準(zhǔn)APP。昨天、今天、明天三天的詳細(xì)航班數(shù)據(jù)可在上海機(jī)場(chǎng)官網(wǎng)可以獲；而上海近三年航班數(shù)據(jù)（只包含執(zhí)行、取消、延誤的航班數(shù)量）由飛常準(zhǔn)APP獲取。

2.2 公交路線(xiàn)數(shù)據(jù)

來(lái)自上海機(jī)場(chǎng)官網(wǎng)機(jī)場(chǎng)交通頁(yè)面。

2.1 項(xiàng)目流程

  • 數(shù)據(jù)的采集部分，以搜集可能用于項(xiàng)目的數(shù)據(jù)為目標(biāo)，匯總整合，
  • 采用上海機(jī)場(chǎng)官網(wǎng)和飛常準(zhǔn)APP的航線(xiàn)數(shù)據(jù)繪制航線(xiàn)頁(yè)面，采用上海機(jī)場(chǎng)官網(wǎng)的機(jī)場(chǎng)公交交通部分?jǐn)?shù)據(jù)繪制公交路線(xiàn)頁(yè)面。

3.0 數(shù)據(jù)處理

3.1 航線(xiàn)數(shù)據(jù)

獲取航線(xiàn)初始站和目的站的經(jīng)緯度信息，如下圖所示：

3.2 公交路線(xiàn)數(shù)據(jù)

3.2.1 公交路線(xiàn)上點(diǎn)的經(jīng)緯度數(shù)據(jù)

在公交路線(xiàn)可視化這部分，是將地圖上公交路線(xiàn)上的每個(gè)點(diǎn)渲染出來(lái)產(chǎn)生的效果，也就是說(shuō)需要用到路線(xiàn)上每一個(gè)站點(diǎn)到站點(diǎn)之間每個(gè)點(diǎn)的經(jīng)緯度。這部分?jǐn)?shù)據(jù)的預(yù)處理工作量就很大了，因?yàn)槲覀冎挥泄煌緩秸军c(diǎn)的名稱(chēng)，并沒(méi)有對(duì)應(yīng)的路線(xiàn)經(jīng)緯度數(shù)據(jù)。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-sHa1qylo-1684760354334)(項(xiàng)目報(bào)告.assets/image-20220618123147203.png)]

我們先要去把所有公交途徑站點(diǎn)的經(jīng)緯度信息獲取下來(lái)，然后再獲取途徑站點(diǎn)間路線(xiàn)的經(jīng)緯度數(shù)據(jù)。我們先找到一個(gè)百度地圖的網(wǎng)頁(yè)，然后分析里面的源碼，發(fā)現(xiàn)有一個(gè)變量就是我們需要的數(shù)據(jù)，接著把它打印出來(lái)，再?gòu)?fù)制到j(luò)son文件中。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-3pQJYHNl-1684760354335)(項(xiàng)目報(bào)告.assets/image-20220618123224035.png)]

以這種操作循環(huán)進(jìn)行下去，知道所有站點(diǎn)間的路線(xiàn)數(shù)據(jù)都拿下來(lái)。

3.2.2 詞云圖數(shù)據(jù)

接著是梳理所有途徑站的名稱(chēng)，得到第二塊數(shù)據(jù)用于制作詞云圖。

4.0 可視化設(shè)計(jì)

4.1 公交路線(xiàn)圖

可視化的意義在于可以更加直觀地估計(jì)各公交路線(xiàn)離自己的距離，方便選擇公交路線(xiàn)

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-A3A5P2WR-1684760354335)(項(xiàng)目報(bào)告.assets/image-20220618120126393.png)]

4.1.1 公交路線(xiàn)

每一條亮色的線(xiàn)就是一條公交路線(xiàn)，每一條公交路線(xiàn)都精確地落在了地圖的具體街道上。這些路線(xiàn)是以虹橋1號(hào)航站樓、虹橋2號(hào)航站樓、浦東1號(hào)航站樓、浦東2號(hào)航站樓為起點(diǎn)的29路公交路線(xiàn)。當(dāng)?shù)貓D被放大后，亮線(xiàn)依然可以準(zhǔn)確地顯示在街道之上，不會(huì)產(chǎn)生偏差，可以給用戶(hù)直觀準(zhǔn)確的視覺(jué)體驗(yàn)。

4.1.2 動(dòng)態(tài)效果

每條亮線(xiàn)上都會(huì)有高亮的點(diǎn)運(yùn)動(dòng)的效果，運(yùn)動(dòng)的方向就是公交前進(jìn)的方向。將整個(gè)頁(yè)面由靜態(tài)轉(zhuǎn)換成動(dòng)態(tài)，避免用戶(hù)產(chǎn)生視覺(jué)疲勞，同時(shí)將公交前進(jìn)方向可視化，能夠幫助用戶(hù)理解公交路線(xiàn)。

4.1.3 公交路線(xiàn)途徑站點(diǎn)的詞云圖

顯示了所有公交路線(xiàn)途徑站點(diǎn)的詞云圖。這個(gè)詞云顯示可以幫助了解到哪些站是交通樞紐，比如說(shuō)這個(gè)航程園，就有3-4路公交線(xiàn)同時(shí)經(jīng)過(guò)，那他就應(yīng)該是個(gè)交通樞紐，可以前往換乘或者在疫情特殊時(shí)期避開(kāi)人群。

4.2 航線(xiàn)部分

效果是在動(dòng)態(tài)背景上繪制了一張中國(guó)地圖，然后隨著時(shí)間軸的節(jié)點(diǎn)變化，渲染出節(jié)點(diǎn)那天的航站信息。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-JnTi26cX-1684760354336)(項(xiàng)目報(bào)告.assets/image-20220618124759386.png)]

4.2.1 動(dòng)態(tài)背景

旋轉(zhuǎn)的網(wǎng)格圖和箭頭可以讓背景可以給到更加活潑的視覺(jué)體驗(yàn)

4.2.2 中國(guó)地圖

中國(guó)地圖可以移動(dòng)，縮放，鼠標(biāo)移動(dòng)后會(huì)高亮，并且顯示省份名稱(chēng)

4.2.3 航線(xiàn)+時(shí)間軸

每天的航線(xiàn)數(shù)據(jù)會(huì)隨著時(shí)間軸節(jié)點(diǎn)的改變而改變，小飛機(jī)圖標(biāo)和紅點(diǎn)的搭配結(jié)合，可以模擬一種飛機(jī)后有彩帶的效果，豐富好看。

5.0 編程實(shí)現(xiàn) (不用堆砌所有代碼，僅介紹核心的代碼內(nèi)容)

5.1 中國(guó)地圖航線(xiàn)+時(shí)間軸

先將每天的航線(xiàn)信息封裝成了一個(gè)數(shù)組，然后和時(shí)間軸的對(duì)應(yīng)節(jié)點(diǎn)綁定，將所有的航線(xiàn)信息放到 myOption 數(shù)組當(dāng)中。

時(shí)間軸的 option 配置為 object 對(duì)象

var option = {
	// 基礎(chǔ)數(shù)據(jù)，包括地圖時(shí)間軸
	baseOption:{},
	// 我的航線(xiàn)和節(jié)點(diǎn)綁定的數(shù)據(jù)
	option: myOption
}

再渲染出來(lái)，就可以實(shí)現(xiàn)地圖上的航班信息隨著時(shí)間軸的改變而改變的效果。這邊的航線(xiàn)部分就是由小飛機(jī)以及紅點(diǎn)構(gòu)成，飛機(jī)是自己導(dǎo)入的圖片。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-2xlJlA2H-1684760354336)(項(xiàng)目報(bào)告.assets/image-20220618115557714.png)]

5.2 動(dòng)態(tài)背景

繪制旋轉(zhuǎn)的網(wǎng)格圖，導(dǎo)入網(wǎng)格照片，然后給照片自定義一個(gè)順時(shí)針旋轉(zhuǎn)函數(shù)

旋轉(zhuǎn)箭頭：導(dǎo)入兩個(gè)箭頭，將箭頭控制在地球的邊緣位置，添加逆時(shí)針旋轉(zhuǎn)函數(shù)

以旋轉(zhuǎn)的網(wǎng)格圖為例：

  .map2 {
    background: url(../images/grid.png);
    animation: rotate1 15s linear infinite;
    opacity: 0.6;
  }
  @keyframes rotate1 {
    form {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

5.3 公交路線(xiàn)

5.3.1 公交路線(xiàn)

對(duì)初步數(shù)據(jù)處理過(guò)后的 lines-bus.json 文件中數(shù)據(jù)再次處理成程序需要的數(shù)據(jù)格式，返回一個(gè)大數(shù)組，里面分別是一個(gè)個(gè)小數(shù)組，分別對(duì)應(yīng)一條公交路線(xiàn)。這里先使用了 map 函數(shù)遍歷 busLines 內(nèi)的每個(gè)數(shù)組元素，將每個(gè)數(shù)組元素都整合成 points 的形式，最后每個(gè) busLines 元素會(huì)返回一個(gè) object 對(duì)象，有屬性

{
	coords: points //公交路線(xiàn)上所有點(diǎn)的經(jīng)緯度坐標(biāo)
	lineStyle:{} // 渲染公交路線(xiàn)的樣式
}

最后返回一個(gè)大數(shù)組 busLines[]

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-G5atdzVT-1684760354337)(項(xiàng)目報(bào)告.assets/image-20220618120736553.png)]

5.3.2 動(dòng)態(tài)效果

線(xiàn)的效果需要賦予一個(gè) slient = true；動(dòng)態(tài)效果，需要?jiǎng)h除 slient 屬性，賦予動(dòng)態(tài)效果 effect 對(duì)象

5.4 公交途徑站詞云圖

進(jìn)入網(wǎng)站：https://www.wordclouds.com/

點(diǎn)擊 Shape 選擇詞云的地圖 maps

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-llykWYPF-1684760354338)(項(xiàng)目報(bào)告.assets/image-20220618161318120.png)]

在 word list 中編輯要生成詞云的單詞集合，weight 表示單詞的權(quán)重大小

6.0 運(yùn)行環(huán)境配置及測(cè)試

6.1 環(huán)境配置

6.1.1 桌面端運(yùn)行源文件

windows10 + vscode1.68.1 運(yùn)行。vscode 內(nèi)下載插件 live server ，下載完成后，在 index.html 文件內(nèi)右鍵點(diǎn)擊 open with livesever 或者在 index.html 文件內(nèi)按下快捷鍵 Alt + L + O 即可顯示效果網(wǎng)頁(yè)

6.2 使用技術(shù)

  1. flex

    彈性布局，在不同的屏幕尺寸和設(shè)備下可預(yù)測(cè)地展現(xiàn)出來(lái)，最大限度地填充可用空間。

    • 在不同方向排列元素
    • 重新排列元素的顯示順序
    • 更改元素的對(duì)齊方式
    • 動(dòng)態(tài)地將元素裝入容器

  2. less

    一門(mén) css 預(yù)處理語(yǔ)言，擴(kuò)充了 css，增加了如變量、混合(mixin)、函數(shù)等功能，讓
    css 更容易維護(hù)、方便制作主題、擴(kuò)充。可以運(yùn)行在 Node 或?yàn)g覽器端。

  3. jquery

    js 的一個(gè)庫(kù)，封裝了常用的 js，代碼簡(jiǎn)潔。

  4. rem

    css 的單位，本質(zhì)是等比縮放，一般基于寬度，舉個(gè)例子：

    假設(shè)我們將屏幕寬度平均分成100份，每一份的寬度用x表示，x = 屏幕寬度 / 100，如果將x作為單位，x前面的數(shù)值就代表屏幕寬度的百分比

    p {width: 50x} /* 屏幕寬度的50% */

    如果想要頁(yè)面元素隨著屏幕寬度等比變化，我們需要上面的x單位，不幸的是css中并沒(méi)有這樣的單位，幸運(yùn)的是在css中有rem，通過(guò)rem這個(gè)橋梁，可以實(shí)現(xiàn)神奇的x

  5. echarts

    百度開(kāi)源的 js 圖表庫(kù)，支持多種形式的可視化圖表展示，支持多圖表、組件的聯(lián)動(dòng)和混搭展現(xiàn)。
    100，如果將x作為單位，x前面的數(shù)值就代表屏幕寬度的百分比

    p {width: 50x} /* 屏幕寬度的50% */

    如果想要頁(yè)面元素隨著屏幕寬度等比變化，我們需要上面的x單位，不幸的是css中并沒(méi)有這樣的單位，幸運(yùn)的是在css中有rem，通過(guò)rem這個(gè)橋梁，可以實(shí)現(xiàn)神奇的x

  6. echarts

    百度開(kāi)源的 js 圖表庫(kù)，支持多種形式的可視化圖表展示，支持多圖表、組件的聯(lián)動(dòng)和混搭展現(xiàn)。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-455367.html

到了這里，關(guān)于《數(shù)據(jù)可視化》課程期末項(xiàng)目_地理交通數(shù)據(jù)可視化的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶(hù)投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包