iT邦幫忙

d3js相關文章
共有 27 則文章
鐵人賽 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 21

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

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

鐵人賽 自我挑戰組 DAY 2
從範例學 D3.js 系列 第 3

技術 [03] 從範例學 D3.js - Zoom

中斷了。那就再繼續吧這次將上次的範例修改,可以透過 d3.zoom() 來達成縮放分布圖與座標軸上一篇 目標 上次遇到的問題是,對於坐標軸轉換、圖形位置的轉...

鐵人賽 自我挑戰組 DAY 2
從範例學 D3.js 系列 第 2

技術 [02] 從範例學 D3.js - Scaling

這次要學甚麼?這次透過一個範例,使用 scaleLinear() 做出可以縮放的分布圖 首先,本篇是基於這個範例時做出來的 Efrat Vilenski -...

鐵人賽 自我挑戰組 DAY 1
從範例學 D3.js 系列 第 1

技術 [01] 從範例學 D3.js - Introduction

為何現在研究 d3.js?最近在工作上開始接觸 d3.js 要客製一個圖表,呈現大量分群資料,投射至二維空間上的對應位置。從之前了解到,d3.js 是很適合,...

鐵人賽 Data Technology DAY 24

技術 D3這邊可以再多一點互動嗎?

這次要再增強一點互動性 drag 有時候就是會想要把東西拉來拉去啦!在d3中,如果想要拖拉物件可以使用drag來達成drag分為三個事件(階段) start...

鐵人賽 Data Technology DAY 20

技術 D3長條圖的最後一步

這次要在之前的長條圖上加上X軸來將這個長條圖完成 X軸 要加上X軸,需要使用另一種比例尺,序數比例尺(d3.scaleBand) 定義的方法與之前的線性比例尺相...

鐵人賽 Data Technology DAY 19

技術 D3的座標軸

座標軸 在製作圖表時,很多時候都會需要座標軸,而在SVG中並沒有座標軸這個元件可以使用,只有一些基本的圖形,所以如果要使用SVG來繪製座標軸的話會需要使用gro...

鐵人賽 Modern Web DAY 29
WebGL 與 Three.js 初探 系列 第 29

技術 [Day29] Aframe 範例 - 3D 與 d3.js

除了 3D 場景製作比較方便之外,我們可以使用 aframe 搭配其他不同的框架來做另類的前端呈現。今天的介紹主要是讓各位了解,除了遊戲場景的應用之外,我們也可...

鐵人賽 開發技術 DAY 30
SVG 與 D3.js 系列 第 30

技術 D3.js 鐵人賽的結束

這次參加鐵人賽,我也猶豫了很久,在開始前我已經準備好了近十篇另一個主題(視覺前端與前端技術),但是牙一咬就報名了另一個主題d3.js,用意是想學d3.js。學習...

鐵人賽 開發技術 DAY 29
SVG 與 D3.js 系列 第 29

技術 PDF轉CSV,利用Tabula

D3.js最重要的就是資料,所以需要有許多不同的資料轉換方式。PDF是常見的檔案格式,因為製作方便,又可以跨裝置,所以PDF也是經常取得的檔案格式之一,相信大家...

鐵人賽 開發技術 DAY 28
SVG 與 D3.js 系列 第 28

技術 柯P的財務報表套用 D3js Partition Layout

完整範例:http://wcc723.github.io/d3js/2014/10/27/Ironman-30-days-28/ 看到KP API裡面有提供競選...

鐵人賽 開發技術 DAY 27
SVG 與 D3.js 系列 第 27

技術 d3.js 再看更多layout前,先來轉換json結構

完整範例:http://wcc723.github.io/d3js/2014/10/26/Ironman-30-days-27/ 上次提到d3.js有包含許多的...

鐵人賽 開發技術 DAY 26
SVG 與 D3.js 系列 第 26

技術 d3.js layout (以環保局資料為例)

完整範例:http://wcc723.github.io/d3js/2014/10/25/Ironman-30-days-26/ 介紹這麼多,但是還沒有介紹到d...

鐵人賽 開發技術 DAY 25
SVG 與 D3.js 系列 第 25

技術 D3.js 也可以像音樂一樣動吃動吃動(2)

完整範例請看:http://wcc723.github.io/d3js/2014/10/24/Ironman-30-days-25/ 上一篇介紹了資料的來源以及...

鐵人賽 開發技術 DAY 24
SVG 與 D3.js 系列 第 24

技術 D3.js 也可以像音樂一樣動吃動吃動(1)

完整範例:http://wcc723.github.io/d3js/2014/10/23/Ironman-30-days-24/ 學習D3之後會常思考有什麼樣的...

鐵人賽 開發技術 DAY 23
SVG 與 D3.js 系列 第 23

技術 像jQuery 一樣的D3.js,柯P野生官網API

D3.js其實最重要的還是資料,恰巧有一位候選人做了Open data,他的API格式相當優良,如果對於找不到合適資料,但需要做些練習,不如試試看柯文哲野生官網...

鐵人賽 開發技術 DAY 22
SVG 與 D3.js 系列 第 22

技術 D3.js 資料數量增減

完整範例:http://wcc723.github.io/d3js/2014/10/21/Ironman-30-days-22/ 資料很多時候需要比較、切換,所...

鐵人賽 開發技術 DAY 21
SVG 與 D3.js 系列 第 21

技術 D3.js Transition動態效果

完整範例:http://wcc723.github.io/d3js/2014/10/20/Ironman-30-days-21/ 先前的資料,都是固定的,沒有任...

鐵人賽 開發技術 DAY 20
SVG 與 D3.js 系列 第 20

技術 D3.js 超粘的Voronoi Diagram繪圖

完整範例:http://wcc723.github.io/d3js/2014/10/19/Ironman-30-days-20/ Voronoi Diagram...

鐵人賽 開發技術 DAY 19
SVG 與 D3.js 系列 第 19

技術 D3.js 圈圈小效果

完整範例:http://wcc723.github.io/d3js/2014/10/18/Ironman-30-days-19/ D3js除了繪製圖表外,還有許...

鐵人賽 開發技術 DAY 18
SVG 與 D3.js 系列 第 18

技術 D3.js 究竟搭不搭捷運與死亡率有沒有關係?(3) - 將資料繪製成折線圖

完整範例:http://wcc723.github.io/d3js/2014/10/17/Ironman-30-days-18/ 有了資料跟一些D3.js基礎後...

鐵人賽 開發技術 DAY 17
SVG 與 D3.js 系列 第 17

技術 D3.js 究竟搭不搭捷運與死亡率有沒有關係?(2) - Google 試算表

上一篇提到資料是放在Google 試算表上,然後再透過web 前端去接資料,當初會想這麼做的原因有以下幾點: 資料路徑穩定,不易掛點 技術上只要成功一次,以後...

鐵人賽 開發技術 DAY 1
SVG 與 D3.js 系列 第 1

技術 2014 鐵人賽慢慢開始跑 [d3js 與 SVG]

和朋友有聊到鐵人賽這次的發文問題,確實問題挺多的...,或許這也是鐵人的挑戰之一吧,不過還好我有自備Blog,建議可以連到我提供的網址觀看~ 以下文章同步發表於...