D3js TechParty GZ 2015 Nov
Download as PPTX, PDF1 like596 views
本文介绍了d3.js库在数据可视化中的应用，以及使用示例和相关技术细节。它讨论了如何通过数据驱动文件来生成图表和报表，同时提到了相关的数据格式如JSON和CSV。作者还提及了在香港和其他地区的各种技术会议和活动，以及对未来的展望。
![• 看看实例
• 跳去d3js.org [ <- 还不用翻那個 ]](https://image.slidesharecdn.com/d3jsgz-141130011554-conversion-gate01/85/D3js-TechParty-GZ-2015-Nov-3-320.jpg)
![数据长这样
• 比如[ 1,2,3,5,8,13,21….. ]
• 又比如
｛ "领导": [{“类別": "大叔", “数量”:50},
{“类別": "婦女", “数量”:41}],
"同志": [{“类別": "厨二", “数量”:999},
{“类別": "腐女", “数量”:100}] ｝
• 這叫JSON 罪臣就是矫情⋯⋯一大堆盾牌](https://image.slidesharecdn.com/d3jsgz-141130011554-conversion-gate01/85/D3js-TechParty-GZ-2015-Nov-4-320.jpg)
![來写网页
• 肚裡吞这个
<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>](https://image.slidesharecdn.com/d3jsgz-141130011554-conversion-gate01/85/D3js-TechParty-GZ-2015-Nov-7-320.jpg)
![• 还是看实例吧⋯
• 跳去d3js.org [ <- 还不用翻那個 ]](https://image.slidesharecdn.com/d3jsgz-141130011554-conversion-gate01/85/D3js-TechParty-GZ-2015-Nov-8-320.jpg)
D3js TechParty GZ 2015 Nov
- 1. D3js 邊學邊用就可以 ！ ＠BenCrox <- 需要點腳根力翻一下那個
- 2. D3js 干什么 Data Driven Document 数据驱动文件⋯⋯⋯ ⋯⋯⋯其实做的就是蹲在牆角画圈圈 • 报表！有什么商务应用不须报表？ • 数据！什么东西不会吐数据？ • 用戶体验！ 別嘮叨，太复杂哥不爽～
- 3. • 看看实例 • 跳去d3js.org [ <- 还不用翻那個 ]
- 4. 数据长这样 • 比如[ 1,2,3,5,8,13,21….. ] • 又比如 ｛ "领导": [{“类別": "大叔", “数量”:50}, {“类別": "婦女", “数量”:41}], "同志": [{“类別": "厨二", “数量”:999}, {“类別": "腐女", “数量”:100}] ｝ • 這叫JSON 罪臣就是矫情⋯⋯一大堆盾牌
- 5. 数据也可以长这样 • 1,2,3,5,8,13,21 “级別”, “类別”, “数量”,, “领导”, “大叔”, 50,, “领导”, “婦女”, 41,, “领导”, “厨二”, 999,, “领导”, “腐女”, 100,, • 這叫CSV <- 你家Excel 都会吐
- 6. 來写网页 • 头裡塞这个 <script src="http://d3js.org/d3.v3.min.js"> </script> • 或者先在家门口Cache 一枚
- 7. 來写网页 • 肚裡吞这个 <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>
- 8. • 还是看实例吧⋯ • 跳去d3js.org [ <- 还不用翻那個 ]
- 9. 別急！
- 10. 有关爷 • BarCamp Hong Kong 2007 ～ 2014 主办方 • BarcampGZ 对，数年前就带來广州了 • 去年拓展到深圳 • 今年攻入了澳门 • 东京、星洲、曼谷、仰光就去打打醬油咧 • Pyay ，緬甸某小城市，就贊助好了
- 11. 但2015 年⋯ • 爷不干！＄ 的了⋯⋯⋯ • 交給新世代的就OK 啦
- 12. JS Conf 有沒有？ • 京JS 2012 • 沪JS 2013 • 杭JS 2014
- 13. JS Conf 还有沒有？ • 2015 • 香港要爆了！ • #JSconfHK2015 • 欢迎大粵国、大湘国、大中华圈同胞來香港購物
- 14. 爷还干 • 智彗城市⋯ 我要把全国最XX的数据收下來 • 脑波研究⋯ 呃⋯那个我知道鳥⋯ • 创业公社⋯ 來香港，每月每桌一千元 • 公关策略⋯ 中国你贏了，亞洲其他部份我吃下 • 歷史遊戲⋯ 民国无双、光辉岁月⋯ • 再說下去你不会再相信人类了⋯⋯
- 15. 折腾就是生活 • 爷还在走単骑⋯⋯ • @BenCrox …. • ben_crox 在迷信 • ＠李學斌…. 但这沒更新