Upload
oxxo-studio
View
1.746
Download
0
Embed Size (px)
Citation preview
OXXO 張宗彥 ( 張小彥 )
oxxostudio.twWebduino = Web x Arduino視覺設計師 + 前端工程師 + 市場行銷 + 課程規劃
中研院、遠綠資訊、鴻海精密、中冠資訊
UI、UX、F2E、CSS ( LESS )、Growth Hack
http://tpebudget.tonyq.org/budget
http://kiang.github.io/TainanDengueMap
http://water.taiwanstat.com/
http://www.highcharts.com/demo
https://developers.google.com/chart/?hl=zh-TW
Mike Bostockhttps://bost.ocks.org/mike/
http://www.oxxostudio.tw/articles/201410/svg-tutorial.html
我的 Blog 也有不少 D3.js 的文章 ( 搜尋 d3 )http://www.oxxostudio.tw/list.html
選擇器
d3.select('body').selectAll('.a') .style({ 'color':'#f00', 'font-size':'50px' });
.select() .selectAll()
https://jsbin.com/carinu/1/edit?html,js,output
屬性
d3.select('body') .selectAll('circle') .attr({ 'r':'20', 'cx':'50', 'cy':'50' });
.attr()
https://jsbin.com/jiqobef/1/edit?html,js,output
樣式名稱
d3.selectAll('div') .classed({ 'big':true, 'red':false });
.classed()
https://jsbin.com/kezusi/1/edit?html,css,js,output
TEXT & HTML
d3.selectAll('.a') .text('456');d3.selectAll('.b') .html('<i>456</i>');
.text() .html()
https://jsbin.com/nuweki/1/edit?html,css,js,output
var data = [38,69,72,42,58,87];d3.select('body').selectAll('div') .data(data) .enter() .append('div') .text(function(d){ return d; }).style({ 'color':function(d){ if(d<60){ return 'red'; } } });
https://jsbin.com/golupoyiyu/1/edit?html,js,output
update enter
https://jsbin.com/tonepo/1/edit?html,js,output
data element
https://jsbin.com/munugu/1/edit?html,js,output
data element
update exit
var data = [ {name:'Tom' , score:98, type:'class1' , sex:'man'}, {name:'Jack' , score:72, type:'class2' , sex:'man'}, {name:'Owen' , score:93, type:'class3' , sex:'man'}, {name:'Mark' , score:41, type:'class4' , sex:'man'}, {name:'Marry' , score:67, type:'class4' , sex:'woman'}, {name:'Rock' , score:59, type:'class2' , sex:'man'}, {name:'Jason' , score:83, type:'class1' , sex:'man'}, {name:'Peter' , score:47, type:'class3' , sex:'man'}, {name:'Cherry', score:53, type:'class1' , sex:'woman'}, {name:'Jean' , score:68, type:'class4' , sex:'woman'}];
假設有一堆資料
var a = d3.nest() .key(function(d){return d.type;}) .rollup(function(d){return d.length;}) .entries(data);
https://jsbin.com/kevayujeve/1/edit?html,js,output
把資料做「巢狀」處理
var data = [ {name:'Tom' , type:['a','b','c']}, {name:'Jack' , type:['b','c']}, {name:'Owen' , type:['c','d','e']}, {name:'Mark' , type:['a','c']}, {name:'Marry' , type:['a','b','c','d']}, {name:'Rock' , type:['a','c']}, {name:'Jason' , type:['b','c']}, {name:'Peter' , type:['a','b','c']}, {name:'Cherry', type:['c','d']}, {name:'Jean' , type:['a','c','d']}];
假設有一堆資料
var i = d3.map(data,function(d){return d.name;});var j = d3.map(data,function(d){return d.type;});
https://jsbin.com/cesareqita/1/edit?html,js,output
把資料做「數據地圖」處理
var scale = d3.scale.linear() .range([0,1000]) .domain([0,200]);
console.log(scale(20));
https://jsbin.com/maxepiyevo/1/edit?html,js,output
var show = d3.select('#show');
show.transition().duration(2000).tween("number", function() { var i = d3.interpolateRound(0, 100); return function(t) { this.textContent = i(t); };});
https://jsbin.com/yeluridono/1/edit?html,js,output
http://www.oxxostudio.tw/demo/201509/svg-d3-15-transition-tween-demo9.html
Transition 展示
例如「Zoom」、「Drag」都非常有意思
http://www.oxxostudio.tw/articles/201509/svg-d3-17-zoom-
behavior.html
http://www.oxxostudio.tw/articles/201509/svg-d3-16-drag-
behavior.html
TonyQ 大神做的
http://tpebudget.tonyq.org/view3
套用 Treemap 的範例就可以
http://bl.ocks.org/mbostock/4063582
試一下就知道,換成長條圖
http://bl.ocks.org/mbostock/raw/1283663/
大功告成
http://example.oxxostudio.tw/d3/budget/index.html
同樣的方式也可以套別種圖表
http://example.oxxostudio.tw/d3/budget/circle.html
http://bl.ocks.org/mbostock/7607535
畫地圖
使用 TopoJSON
topojson 是一個改善 geojson 要去存取過多的重複資
料所做的新的一種資料格式。
這種資料格式比 geojson 可以節省許多的檔案空間 ( 省 80% ),有利讀取的速度。
下載地圖資料
http://data.gov.tw/node/7442
安裝轉換程式,SHP to TopoJSON
https://github.com/mbostock/topojson/wiki/Command-Line-Reference
npm install topojson -gtopojson -o map.json -p --shapefile-encoding big5 County_MOI_1041215.shp
轉換成 TopoJSON
<script src="//d3js.org/d3.v3.min.js"></script><script src="//d3js.org/topojson.v1.min.js"></script>
載入 JS
了解資料格式
https://bost.ocks.org/mike/map/step-3.html
套用地圖 TopoJSON
https://bost.ocks.org/mike/map/
大功告成
http://example.oxxostudio.tw/d3/map/taiwan.html
https://webduino.io/index.html
http://bin.webduino.io/hogel/edit?html,js,output
擷取現場環境溫濕度,繪製圖表
高雄市政府資料開放平台 + PM2.5 數據
http://data.kaohsiung.gov.tw/Opendata/DetailList.aspx?CaseNo1=FB&CaseNo2=1&Lang=C
Webduino 高雄市校園空氣品質監測地圖
http://marty5499.github.io/air-schools/index.html
參考資源
http://tedxtaipei.com/articles/the-beauty-of-data-visualization/ http://buzzorange.com/techorange/2014/06/10/30-simple-tools-for-data-visualization/http://newtoypia.blogspot.tw/2015/11/d3js.htmlhttps://www.safaribooksonline.com/blog/2014/02/11/d3-js-maps/ http://blog.infographics.tw/2015/03/d3js-the-introduction/http://kuro.tw/categories/D3-jshttps://strongriley.github.io/d3/tutorial/bar-2.html http://bl.ocks.org/mbostock/1283663 http://blog.infographics.tw/2015/04/visualize-geographics-with-d3jshttp://data.gov.tw/node/7442 http://data.gov.tw/geodata_shp https://github.com/mbostock/topojson/wiki https://bost.ocks.org/mike/map/
Kuro Hsu
http://www.slideshare.net/kurotanshi?utm_campaign=profiletracking&utm_medium=sssite&utm_source=ssslideview
資料視覺化 Blog
http://blog.infographics.tw/