D3js 邊學邊⽤用就可以！

＠BenCrox <- 需要點腳根⼒力翻⼀一下那個

D3js 干什么

Data Driven Document 数据驱动⽂文件⋯⋯⋯ ⋯⋯⋯其实做的就是蹲在牆⾓角画圈圈

• 报表！有什么商务应⽤用不须报表？

• 数据！什么东⻄西不会吐数据？

• ⽤用⼾戶体验！別嘮叨，太复杂哥不爽～

• 看看实例 • 跳去 d3js.org [ <- 还不⽤用翻那個 😃 ]

数据⻓长这样



• ⽐比如 [ 1,2,3,5,8,13,21….. ]



• ⼜又⽐比如 ｛ "领导": [{“类別": "⼤大叔", “数量”:50},







{“类別": "婦⼥女", “数量”:41}],



"同志": [{“类別": "厨⼆二", “数量”:999}, 



{“类別": "腐⼥女", “数量”:100}] ｝



• 這叫 JSON 罪⾂臣就是矫情⋯⋯⼀一⼤大堆盾牌

数据也可以⻓长这样



• 1,2,3,5,8,13,21  “级別”, “类別”, “领导”, “⼤大叔”, “领导”, “婦⼥女”, “领导”, “厨⼆二”, “领导”, “腐⼥女”,



“数量”,, 50,, 41,, 999,, 100,,



• 這叫 CSV <- 你家 Excel 都会吐

來写⺴⽹网⻚页

• 头裡塞这个  <script src="http://d3js.org/d3.v3.min.js"> </script>

• 或者先在家门⼝口 Cache ⼀一枚

來写⺴⽹网⻚页



• 肚裡吞这个 😂



<script>

!

var color = d3.scale.quantize()

.range(["#156b87", "#876315",

"#543510", "#872815"]);

!

var size = 960;

!

var pack = d3.layout.pack()

.sort(null)

.size([size, size])

.value(function(d) { return d.radius

* d.radius; })

.padding(5);

!

var svg =

d3.select("body").append("svg")

.attr("width", size)

.attr("height", size);

!

d3.csv("exoplanets.csv", type,

function(error, exoplanets) {



exoplanets.sort(function(a, b) { return isFinite(a.distance) ||

isFinite(b.distance) ? a.distance - b.distance : 0;

});

!

color.domain(d3.extent(exoplanets, function(d) { return d.radius; }));

!

svg.selectAll("circle") .data(pack.nodes({children:

exoplanets}).slice(1)) .enter().append("circle") .attr("r", function(d) { return d.r; }) .attr("cx", function(d) { return

d.x; }) .attr("cy", function(d) { return

d.y; }) .style("fill", function(d) { return

color(d.radius); }) .append("title")



.text(function(d) { return d.name + "\nplanet radius: " +

d.radius + " EU" + "\nstar distance: " +

isFinite(d.distance) ? d.distance : "N/ A" + " pc";

}); });

!

function type(d) { d.radius = +d.radius; d.distance = d.distance ?

+d.distance : Infinity; return d;

}

!

d3.select(self.frameElement).style("he ight", size + "px");

!

</script>

• 还是看实例吧⋯ 😂 • 跳去 d3js.org [ <- 还不⽤用翻那個 😃 ]

別急！

有关爷

• BarCamp Hong Kong 2007 ～ 2014 主办⽅方 • BarcampGZ 对，数年前就带來⼲⼴广州了 • 去年拓展到深圳 • 今年攻⼊入了澳门 • 东京、星洲、曼⾕谷、仰光就去打打醬油咧 • Pyay ，緬甸某⼩小城市，就贊助好了

但 2015 年⋯

• 爷不干 ！＄ 的了⋯⋯⋯ • 交給新世代的就 OK 啦

JS Conf 有沒有？



• 京 JS • 沪 JS • 杭 JS



2012 2013 2014

JS Conf 还有沒有？

• 2015 • ⾹香港要爆了！ • #JSconfHK2015 • 欢迎⼤大粵国、⼤大湘国、⼤大中华圈同胞來⾹香港購物

爷还干

• 智彗城市⋯ 我要把全国最XX的数据收下來 • 脑波研究⋯ 呃⋯那个我知道⿃鳥⋯ • 创业公社⋯ 來⾹香港，每⽉月每桌⼀一千元 • 公关策略⋯ 中国你贏了，亞洲其他部份我吃下 • 歷史遊戲⋯ ⺠民国⽆无双、光辉岁⽉月⋯ • 再說下去你不会再相信⼈人类了⋯⋯

折腾就是⽣生活

• 爷还在⾛走単骑⋯⋯ • @BenCrox …. • ben_crox 在 迷信 • ＠李學斌 …. 但这沒更新