iT邦幫忙

observable相關文章
共有 60 則文章
鐵人賽 Modern Web DAY 30

技術 【Day 30】客製化的 “D3” 圓餅圖和甜甜圈圖

前言 圓餅圖主要是用來表示數量的占比,可以從扇形的面積觀察數量的多寡,適合用在分類少,比例有明顯差異的資料。 取得資料 下載三階段人口的資料,取 110 年台灣...

鐵人賽 Modern Web DAY 29

技術 【Day 29】客製化的 “D3” 散佈圖

前言 散佈圖是用來觀察兩個變數之間的關聯性,又稱為相關圖。 取得資料 * 受僱員工每人每月總薪資-按行業分* 台灣地區傷害保險個人職業分類表  整理資料 * 整...

鐵人賽 Modern Web DAY 28

技術 【Day 28】客製化的 “D3” 多系列折線圖

前言 今天要畫折線圖,折線圖常用來呈現東西隨時間的變化趨勢,但今天要用 D3 重頭開始實作,更深入了解運作的原理。 取得資料 到漁產品行情走勢下載石斑、吳郭魚、...

鐵人賽 Modern Web DAY 27

技術 【Day 27】客製化的 “D3” 直條圖

前言 今天要使用 D3 客製化直條圖,學習畫一張直條圖需要由哪些部分組成。 取得資料 下載鯖魚價格的 csv 檔案 整理資料 排除沒有價格的市場 開始畫圖...

鐵人賽 Modern Web DAY 26

技術 【Day 26】使用 “D3” 畫雙座標軸折線圖

前言 【Day 21】 是介紹 line-bar chart,還有一種常見的圖是雙座標軸折線圖 取得資料 下載死亡率和房價指數兩筆資料 整理資料 整理近十年的...

鐵人賽 Modern Web DAY 25

技術 【Day 25】根據“數值”對類別分組和排序的直條圖

前言 參考 【Day 24】的資料,今天要畫每一種作物的實際交易量總和。 開始畫圖 上傳資料 選擇 Weighted top 10 bar chart,修改參...

鐵人賽 Modern Web DAY 23

技術 【Day 23】分面式直條圖

前言 今天要來畫縣市人口年齡圖,要把指定縣市的人口年齡畫在同一張圖比較。 取得資料 複製 110 年縣市人口統計資料 把數字的逗號間隔移除 檔案轉換成 ut...

鐵人賽 Modern Web DAY 22

技術 【Day 22】“D3” Bar-line Chart 加上標示

前言 昨天的 bar line chart 看起來仍有缺點,2020 年和 2021 年的折線圖很難直覺地看出實際的年增率是多少,所以要將資料加上標示會比較清楚...

鐵人賽 Modern Web DAY 21

技術 【Day 21】使用 “D3” 畫 Bar-line Chart

前言 今天要結合前面介紹過的長條圖和折線圖,可以同時看出兩個指標值隨時間變化的趨勢,第一個 y1 軸用長條圖表示,第二個 y2 軸用線表示,橫軸是時間的變化。...

鐵人賽 Modern Web DAY 20

技術 【Day 20】把 SVG 報表圖加入簡報

前言 前面畫許多報表圖,但是要怎麼把這些圖報告給老闆聽,最直接的方式就是放到簡報中,要麼放呢?首先先認識一下圖檔格式 PNG 非破壞性壓縮點陣圖 不能無限的...

鐵人賽 Modern Web DAY 19

技術 【Day 19】堆疊的直條圖

前言 身為保安宮虔誠的信徒,今天依舊來畫保安宮的子民人數,參考【Day 3】分群的直條圖,要把這張圖做個修改,改畫成堆疊的長條圖。 比較 分群長條圖 和 堆疊...

鐵人賽 Modern Web DAY 18

技術 【Day 18】 簡單的直方圖

前言 今天要畫的是直方圖,這跟Day 1介紹長條圖看起很像,但是有什麼差別呢?讓我們繼續看下去 直方圖( Histogram ) 統計學上常用的分析方法,表...

鐵人賽 Modern Web DAY 17

技術 【Day 17】簡單的線性迴歸

前言 線性回歸能觀察出兩個變數之間的因果關係,x 軸是預測的變量,y 軸是結果變量。利用線性方程式 y = a + b x 求得 a, b 值其中 a 表示...

鐵人賽 Modern Web DAY 16

技術 【Day 16】簡單的箱形圖

前言 箱形圖又稱為盒鬚圖,可以看出資料的集中值和離群值,適合用在要比較資料的範圍和分布。 參考資料 https://zh.m.wikipedia.org/zh...

鐵人賽 Modern Web DAY 15

技術 【Day 15】堆疊面積圖

前言 今天畫堆疊形式的面積圖,可以看出每一個分類占總數的面積比例。 收集資料 到經濟部統計處下載過去一年的能源供給及消費量的資料 整理資料,換成 utf8...

鐵人賽 Modern Web DAY 14

技術 【Day 14】簡單的面積圖

前言 面積圖是強調數量隨時間變化的圖,相較於折線圖,面積圖用在總數更可以引起注意。 準備資料 經濟部統計處 下載一年內的餐飲業營業額 整理資料,轉成 u...

鐵人賽 Modern Web DAY 13

技術 【Day 13】簡單的散佈圖

前言 散佈圖用來表示兩個變數之間的關係,又稱為相關圖。圖形可以分為完全正相關、正相關、無相關、完全負相關、負相關 開始畫圖 使用 observable 內建...

鐵人賽 Modern Web DAY 11

技術 【Day 11】 簡單的 “Picasso” 甘特圖

前言 終於來到我以前不太喜歡的東西、甘特圖(Gannt Chart) 這不得不提到我先前上班的地方,人很多的公司,人一多起來,管理起來麻煩、合作的效率也不是...

鐵人賽 Modern Web DAY 10

技術 【Day 10】 依然是簡單的 “D3” 圓餅圖

前言 2021 年春季台灣發生缺水危機,西半部實施強制節水措施,主要原因是前一年梅雨量減少,再加上沒有颱風,水庫的蓄水量不足,但是又不能只仰賴水庫,需要在水資源...

鐵人賽 Modern Web DAY 9

技術 【Day 9】 簡單的 “D3” 圓餅圖

概述 圓餅圖的作用,就是用一張圖快速地看出「佔比」,分析組成的內容是什麼。 圓餅圖內所有比例的加總是 100% 困擾已久的問題 以「陸客蛋塔效應轉型」圓...

鐵人賽 Modern Web DAY 8

技術 【Day 8】 多系列的"D3"折線圖

前言 Day 6 畫單條線的折線圖,今天的作法如法炮製,引用別人的程式碼,修改參數畫圖。 開始畫圖 參考 d3 gallery multi-line cha...

鐵人賽 Modern Web DAY 7

技術 【Day 7】 資料內容與瑣碎的處理流程

tags: 傳產製圖 Observable 報表 「前」面幾篇的「坑」- 資料格式不支援製圖 function 我把前幾天的文章丟給朋友讓他們照著時做了一遍,...

鐵人賽 Modern Web DAY 6

技術 【Day 6】 簡單的"D3"折線圖

前言 今天要把折線圖改用 d3 來畫圖 參考D3 Gallery line-charthttps://observablehq.com/@d3/line-ch...

鐵人賽 Modern Web DAY 5

技術 【Day 5】 多系列的折線圖

前言 今天的主題延續昨天的資料,但是畫出總計無法知道每個產品的外銷數量比,所以本日重頭戲就是要將資料做分類。 取得資料 到經濟統計數據分析系統下載資料...

鐵人賽 Modern Web DAY 4

技術 【Day 4】 簡單的折線圖

前言 今天我們來畫簡單的折線圖,身為一位生產人員,想知道每個月外銷的商品數量,了解產品在市場中的受歡迎程度。 取得資料 先到經濟部統計處下載 ODS 檔案...

鐵人賽 Modern Web DAY 3

技術 【Day 3】 分群的 “D3” 直條圖

通靈 昨天,我把溪湖地區人口,依照戶籍登記地址繪製了直條圖。 但要把保安宮信仰推廣出去,是有不同訣竅的。 我們都知道,男男女女來到廟裡,祈求的事情大有不同;男...

鐵人賽 Modern Web DAY 2

技術 【Day 2】 簡單的 “D3” 直條圖

回顧 昨天有兩個地方藏著魔鬼 人數貼錯了 首先是我在 剪下、貼上、存成 csv 的步驟中,沒有檢查好複製的資料,以致於光平里多了許多幽靈人口 (從1428...

鐵人賽 Modern Web DAY 1

技術 【Day 1】 簡單的直條圖

前言 大家好,我是任職於工業區、傳產的化工工程師,沒有念過資訊相關的科系,只有上網查查資料和問問周遭的朋友,碰過一點點前端,今年預計使用簡單的方式學習畫畫長條圖...

鐵人賽 Modern Web DAY 13
打通 RxJS 任督二脈 系列 第 13

技術 認識 Cold Observable 與 Hot Observable

昨天我們介紹了 Observable 和 Subject 系列兩種不同的建立資料流物件的方法,也稍微說明了訂閱時會發生的不同,今天讓我們用比較專有的名詞:Col...

鐵人賽 Modern Web DAY 6
打通 RxJS 任督二脈 系列 第 6

技術 觀察者模式 Observable Pattern 認識 RxJS

今天我們來認識 ReactiveX 的重要組成之一,也就是「觀察者模式 - Observer Pattern」。有學過物件導向程式設計的朋友應該都聽過設計模式...