iT邦幫忙

data visualization相關文章
共有 128 則文章
鐵人賽 AI & Data DAY 20

技術 Day20_[tableau desktop]如何製作文字雲

Hi, day20我們試著做看看在資料視覺化當中算蠻火紅的呈現方式 [文字雲] 文字雲是甚麼呢?文字雲是透過字體的大小來去呈現出此關鍵字的重要性, 通常來說,...

鐵人賽 AI & Data DAY 19

技術 Day19_[tableau desktop]如何設定顯示自己偏好的形狀標籤

Hi, day19 我們將day18的表格轉換為線圖方式呈現 今天的目標是,除了顯示銷售額線圖外, 還要看到當月銷售額的點 但是這個點要以圖形來呈現, 我們當...

鐵人賽 AI & Data DAY 18

技術 Day18_[tableau desktop]替表格的數值做方向圖示

Hi day18, 我們來做day17的另一種視覺化方式 day17是替表格中的特定度量值欄位做著色今天我們來替表格做正負值的方向圖標, 也可以一眼看出數值是正...

鐵人賽 AI & Data DAY 17

技術 Day17_[tableau desktop]替表格的數值做著色預警

Day17 我們來看看如何當表格中有多個度量值的狀況, 我們要怎麼對其中一個度量值來著色吧 首先我們先看範例表格, 有銷售日, 銷售額, 單價, 銷售量 若我...

鐵人賽 AI & Data DAY 16

技術 Day16_[tableau desktop]製作雙層圓餅圖

Hi, day16 也是tableau desktop的第一篇文章, 相信大家都會製作圓餅圖了, 若今天要製作雙層的呢? 也就是甜甜圈圖(dount chart...

鐵人賽 AI & Data DAY 4

技術 [Day04] Data Preparation for MedMNIST

前言 前一日我們將原始影像檔案都抓下來到資料夾內了,本日將接續繼續進行資料的處理。依照個人的習慣主要會建立一個對應的長表格(long table or narr...

技術 C3.js 從0開始的座標軸

想直接看本文重點可以直接跳過前3小節喔! 為什麼會選 C3.js ? 最近在做畢業專題的時候,碰巧遇到需要將大量數據做資料視覺化的狀況,為此作為網頁資料視覺...

鐵人賽 Modern Web DAY 30

技術 用React刻自己的投資Dashboard Day30 - 股票代號輸入防呆機制

tags: 2021鐵人賽 React 股票代號輸入錯誤當機問題 Day28的文章有提到,當使用者想要輸入股票代號看K線圖時,如果輸入的股票代號是錯誤的,也就是...

鐵人賽 Modern Web DAY 29

技術 用React刻自己的投資Dashboard Day29 - 替股票加上名稱

tags: 2021鐵人賽 React 上一篇提到台股技術面的最新收盤資訊只有股票代號,似乎少了名稱,本篇就來把它補上吧。 資料來源 Finmind API裡面...

鐵人賽 Modern Web DAY 28

技術 用React刻自己的投資Dashboard Day28 - 串接台股技術面API

tags: 2021鐵人賽 React 上一篇刻好版型後,這篇就可以來串接API拉,目標當然就是讓使用者輸入股票代號後,能夠跑出最新收盤價格、漲跌幅度、漲跌幅度...

鐵人賽 Modern Web DAY 27

技術 用React刻自己的投資Dashboard Day27 - 台股技術面刻板

tags: 2021鐵人賽 React 一般來說刻板前應該會需要畫個wireframe會比較清楚一些,不過時間有限,就在紙上畫一畫就先開始寫code吧,先達成功...

鐵人賽 Modern Web DAY 26

技術 用React刻自己的投資Dashboard Day26 - 台股技術面功能規劃

這篇終於要來開始做台股技術面的功能了,對於善於技術分析的投資人來說,看K線是非常基本的事情,因為從技術分析的角度來看,K線可以分析出很多其他面向看不到的學問喔~...

鐵人賽 AI & Data DAY 28

技術 DAY 28 Big Data 5Vs – Value(價值) – QuickSight(2)

視覺人類理解世界很重要的感受,溝通也比文字來的有效率,近年來流行的互動式報表與視覺化儀錶板以不同於傳統只有死板板靜態報表的呈現方式,更靈活地呈現資料的價值,讓讀...

鐵人賽 Modern Web DAY 25

技術 用React刻自己的投資Dashboard Day25 - 製作漢堡選單

tags: 2021鐵人賽 React 安裝styled-components套件 在專案資料夾內一行安裝就完成了。 npm install --save st...

鐵人賽 Modern Web DAY 24

技術 用React刻自己的投資Dashboard Day24 - styled components

tags: 2021鐵人賽 React 因為下一篇要讓導覽列在手機版網頁呈現漢堡選單的樣式,在參考其他工程師寫的網頁的時候,發現有一位是用styled-comp...

鐵人賽 Modern Web DAY 23

技術 用React刻自己的投資Dashboard Day23 - 非同步呼叫API,完成首頁資料串接

tags: 2021鐵人賽 React 上一篇確認過API內容之後,剩下的部份就是串接API,並將資料呈現在畫面上了,雖然描述起來是短短兩句,不過還是寫了好多的...

鐵人賽 Modern Web DAY 22

技術 用React刻自己的投資Dashboard Day22 - API與前端資料需求比對

tags: 2021鐵人賽 React 一般來說在開發階段,前端與後端會討論資料需求,讓API產出的內容能夠滿足前端畫面的需求,不過這次因為是串接外部的API,...

鐵人賽 Modern Web DAY 21

技術 用React刻自己的投資Dashboard Day21 - 介紹Finmind API

tags: 2021鐵人賽 React 接下來幾篇都會串接Finmind這個開源API,本篇就先來理解一下Finmind有哪些資料可以使用。看了一下官方網站的資...

鐵人賽 Modern Web DAY 20

技術 用React刻自己的投資Dashboard Day20 - 首頁功能切板

tags: 2021鐵人賽 React 先從mobile版型的頁面來看,可以分為幾個部份,如下圖: 分為最上面Title、TaiwanStock、USStock...

鐵人賽 Modern Web DAY 19

技術 用React刻自己的投資Dashboard Day19 - 2.0版首頁內容設計

tags: 2021鐵人賽 React 2.0首頁想加上各國股市的最新盤勢資訊,畢竟這些資料是投資人每天都會需要看一下的,所以放在首頁會是不錯的選擇。 首頁會放...

鐵人賽 Modern Web DAY 18

技術 用React刻自己的投資Dashboard Day18 - 選單列active style功能

tags: 2021鐵人賽 React 上一篇將選單列做出來,並且完成點擊上方按鈕會跳轉至對應頁面的功能,不過總覺得好像少了些什麼?原來是點擊按鈕之後,按鈕的樣...

鐵人賽 Modern Web DAY 17

技術 用React刻自己的投資Dashboard Day17 - Dashboard 2.0版路由功能

tags: 2021鐵人賽 React 如Day15的wireframe,為了要加上更多的功能,因此要在頂端列新增幾個按鈕,每個按鈕代表不同的路由,而不同的路由...

鐵人賽 Modern Web DAY 16

技術 用React刻自己的投資Dashboard Day16 - react-router-dom讓SPA也有路由

tags: 2021鐵人賽 React 前一篇提到的導覽列的各個按鈕,點擊之後會跳到不同的頁面,每個頁面都會是不同的路徑,這個功能可以使用react-route...

鐵人賽 Modern Web DAY 15

技術 用React刻自己的投資Dashboard Day15 - 投資Dashboard 2.0版 Wireframe

有了總體經濟的圖表之後,接下來就要來製作各國股市的資訊站,筆者最常看的就是台股的資訊,其次則是美股、英股、歐股、日股、匯率、利率...等等,想做的很多,剩下15...

鐵人賽 Modern Web DAY 14

技術 用React刻自己的投資Dashboard Day14 - 解決重複發送API請求的問題

tags: 2021鐵人賽 React 之前剛開始設計call api取得資料的時間點是在Card元件載入的時候才讀取,但是加上分頁功能之後,會發現一個問題,假...

鐵人賽 Modern Web DAY 12

技術 用React刻自己的投資Dashboard Day12 - 下拉式選單篩選功能

tags: 2021鐵人賽 React 還記得這個網站有篩選圖表的功能嗎?當初畫wireframe的時候考量到未來圖表可能會越來越多,因此規劃了下拉式選單來做篩...

鐵人賽 Modern Web DAY 11

技術 用React刻自己的投資Dashboard Day11 - 分離UI元件與抓取數據元件

tags: 2021鐵人賽 React 本篇要將call api的功能獨立成一個元件,在架構上會更清楚的分工不同檔案的功能,之後也有可能是其他元件會呼叫api的...

鐵人賽 Modern Web DAY 10

技術 用React刻自己的投資Dashboard Day10 - 用useCallback hook幫你記住函式

tags: 2021鐵人賽 React 在Day9說明了useEffect的用法,不過其實當Card.js渲染時,會發現console有錯誤訊息如下: src...

鐵人賽 Modern Web DAY 9

技術 用React刻自己的投資Dashboard Day9 - useEffect hook

tags: 2021鐵人賽 React 既上一篇介紹完useState hook後,本篇就來介紹Day6也有用到的useEffect hook,在React官網...

鐵人賽 Modern Web DAY 8

技術 用React刻自己的投資Dashboard Day8 - useState hook

tags: 2021鐵人賽 React 在Card元件中有使用到useState,是React中一個蠻重要的hook,是一個非常強大的功能,看起來跟用起來都非常...