基本上是這系列最後一篇，除非之後接觸到跟SVG相關的有趣應用! (≧▽≦) 我在大學畢業的最後一學期，選修了網頁資料視覺化的課程，課程主要使用D3.js這個...
前面十五天我們從認識 Canvas js 開始，一步步學會了如何繪製幾何圖形、匯入影像、設計效果、運用遮色片，也學會了做簡單的動畫，並為我們的動畫加上了事件監聽...
前言 2021 年春季台灣發生缺水危機，西半部實施強制節水措施，主要原因是前一年梅雨量減少，再加上沒有颱風，水庫的蓄水量不足，但是又不能只仰賴水庫，需要在水資源...
概述 圓餅圖的作用，就是用一張圖快速地看出「佔比」，分析組成的內容是什麼。 圓餅圖內所有比例的加總是 100% 困擾已久的問題 以「陸客蛋塔效應轉型」圓...
前言 Day 6 畫單條線的折線圖，今天的作法如法炮製，引用別人的程式碼，修改參數畫圖。 開始畫圖 參考 d3 gallery multi-line cha...
tags: 傳產製圖 Observable 報表 「前」面幾篇的「坑」- 資料格式不支援製圖 function 我把前幾天的文章丟給朋友讓他們照著時做了一遍，...
前言 今天要把折線圖改用 d3 來畫圖 參考D3 Gallery line-charthttps://observablehq.com/@d3/line-ch...
通靈 昨天，我把溪湖地區人口，依照戶籍登記地址繪製了直條圖。 但要把保安宮信仰推廣出去，是有不同訣竅的。 我們都知道，男男女女來到廟裡，祈求的事情大有不同；男...
回顧 昨天有兩個地方藏著魔鬼 人數貼錯了 首先是我在 剪下、貼上、存成 csv 的步驟中，沒有檢查好複製的資料，以致於光平里多了許多幽靈人口 (從1428...
想直接看本文重點可以直接跳過前3小節喔! 為什麼會選 C3.js ? 最近在做畢業專題的時候，碰巧遇到需要將大量數據做資料視覺化的狀況，為此作為網頁資料視覺...
繪製自己鐵人賽文章資料所構成的圖表 最後一天就來做個本次文章系列的總結吧，我用puppteer爬取了我前29天的文章字數，帶入d3呈現了視覺化圖表如下圖 這邊...
前言 本日主要內容包含另一個網路擷取資料方式Convert HTML Tables To JSON、談及統計方法中位數的意義、盒鬚圖介紹與繪製並淺談其意義。 淺...
今天來讓地圖動起來!老樣子，先看成果~神秘的非洲大陸～相信沒幾個人認識這些國家吧XDDD 我自己覺得地圖只要格式對的話，其實用D3.js去繪製不難，我遇到的難點...
沒有資料就沒有燃料，沒有燃料就變成廢料—淺談特別篇 標題取名的緣由一方面來自於d3JS的全名Data-Drive-Documents令一方面Documents-...
前兩天都是展現Data而已，今天來試做看看互動＆換資料的動態！折線圖也是滿常見的樣式，這次以非洲的通膨為主題，主要功能為 1.可以有三個國家資料做比較2.點擊...
昨天用了D3的transition，今天來試試看attrTween來讓圓餅圖長出來! 老樣子先來看成果： 今天會先來看一下D3的Interpolate想看cod...
樹狀圖介紹 以下節錄自維基百科樹狀結構 樹狀結構（英語：Tree structure），又譯樹形結構，或稱樹狀圖（tree diagram）是一種將階層式的構...
自己做行銷的時候，很喜歡玩數據，數據可以打破一些先入為主的想法、也可以給我們更全面的視角、或是新的發現。也因此產生了學習D3的念頭。 近幾年來流行大數據、 In...
昨天已經介紹了產生圓圈圖的範例，今天將要帶入真實資料作範例，接下來將會使用先前的縣市人口數的資料製作環圈圖，預計將會製作直轄市人口比例和非直轄市人口比例，滑鼠滑...
圓餅圖(環圈圖)簡介 圓餅圖和環圈圖常出現在我們統計圖表當中，一般用來表示各個分類的數量所佔的百分比，由幾個扇形的圓形統計圖表，這些扇形區域合起來剛好是一個完全...
半徑R圓心座標(x,y)與x,y軸的關係 昨天我們渲染了圖表出來，但是出現的問題是超出了座標軸的範圍，這邊先解釋一下接下來要解決的方式的原理 我們預計使用者可以...
氣泡圖介紹 昨天已經介紹完散佈圖了，大致上與散佈圖的作法大同小異，差別在於氣泡本身也就是circle，也能呈現一個變數值，在svg裡面我們將設定其屬性r來定義氣...
散佈圖 結束完地圖的內容後，這幾天將會介紹先前沒有繪製過的圖表，之前使用長條圖來表示各個行政區的人口數，散佈圖則適合做兩個變數以上的關係性，如果呈現的狀況聚集的...
畫出地圖 昨天的步驟已經將資料整理得差不多了，接下來要進行畫圖與先前的步驟一樣使用<path>和已經篩選過的資料tainanGeojson來繪製地圖...
面量圖介紹 面量圖又稱分層設色圖、區域密度圖(Choropleth map)，高中地理課本的說明是在界限明確的區域平均分布的地理現象以色彩或網紋來代表其數量大小...
製作樣板 昨天已經繪製出每個淡綠色的點來顯示資料中的經緯度在svg地圖上面，今天要做的事情是當滑鼠移入的時候我們可以觀看資料的內容。 第一步我們可以手動寫htm...
我們到政府開放資料平台下載這兩個檔案，第一個是包含各種伴手禮的經緯度資料、名稱、介紹等等作為要畫在地圖上的資料，另一個是台灣地圖的shp檔案，作為繪製地圖用。...
改變path的樣貌 首先觀看以下程式碼 const width = 800; const height = 600; const svg = d3.select...
昨天介紹完關於Web地圖的相關知識之後今天我們要開始使用geojson的資料來繪製一個地圖首先我們到以下的網站下載shp檔案 Natural Earth 政府開...
GIS地理資訊系統(Geographic Information System) 地理資訊系統這個名詞聽起來有些抽象，其實諸如我們平常所使用的Google Ma...
珊迪
rita0124
DannyChen
Global Rachel
iThome鐵人賽
看影片追技術