d3js techparty gz 2015 nov
DESCRIPTION
A rapid share about d3.js , only introduction level in ChineseTRANSCRIPT
D3js
邊學邊用就可以！
＠BenCrox <- 需要點腳根力翻一下那個
D3js 干什么
• 报表！有什么商务应用不须报表？
• 数据！什么东西不会吐数据？
• 用戶体验！ 別嘮叨，太复杂哥不爽～
Data Driven Document
数据 驱动 文件⋯⋯⋯⋯⋯⋯其实做的就是蹲在牆角画圈圈
数据长这样
• 比如 [ 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>
別急！
有关爷
• BarCamp Hong Kong 2007 ～ 2014 主办方
• BarcampGZ 对，数年前就带來广州了
• 去年拓展到深圳
• 今年攻入了澳门
• 东京、星洲、曼谷、仰光就去打打醬油咧
• Pyay ，緬甸某小城市，就贊助好了
但 2015 年⋯
• 爷不干！＄的了⋯⋯⋯
• 交給新世代的就 OK 啦
JS Conf 有沒有？
• 京 JS 2012
• 沪 JS 2013
• 杭 JS 2014
JS Conf 还有沒有？
• 2015
• 香港要爆了！
• #JSconfHK2015
• 欢迎大粵国、大湘国、大中华圈同胞來香港購物
爷还干
• 智彗城市⋯ 我要把全国最XX的数据收下來
• 脑波研究⋯ 呃⋯那个我知道鳥⋯
• 创业公社⋯ 來香港，每月每桌一千元
• 公关策略⋯ 中国你贏了，亞洲其他部份我吃下
• 歷史遊戲⋯ 民国无双、光辉岁月⋯
• 再說下去你不会再相信人类了⋯⋯
折腾就是生活
• 爷还在走単骑⋯⋯
• @BenCrox ….
• ben_crox 在 迷信
• ＠李學斌 …. 但这沒更新