Downloaded 103 times
![R言語とJavaScript比較
D3.js+d3-cloud
d3.csv('resources/data/out.csv', function(data){
var h = 600;
var w = 800;
var random = d3.random.irwinHall(2)
var countMax = d3.max(data, function(d){ return d.Freq / 5} );
var sizeScale = d3.scale.linear().domain([0, countMax]).range([10,
100])
var colorScale = d3.scale.category20();
var words = data.map(function(d) {
return {
text: d.Term,
size: sizeScale(d.Freq / 5)
};
});
d3.layout.cloud().size([w, h])
.words(words)
.rotate(function() { return Math.round(1-random()) *90; })
.font("Impact")
.fontSize(function(d) { return d.size; })
.on("end", draw)
.start();
見せる気０
//wordcloud 描画
function draw(words) {
var svg = d3.select("#result_area")
.append("svg")
.attr("id", "svg_wordcloud")
.attr("width", w)
.attr("height", h);
}
});
svg.append("g")
.attr("transform", "translate(400,300)")
.selectAll("text")
.data(words)
.enter()
.append("text")
.style({
"font-family": "Impact",
"font-size":function(d) { return d.size + "px"; },
"fill": function(d, i) { return colorScale(i); }
})
.attr({
"text-anchor":"middle",
"transform": function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
}
})
.text(function(d) { return d.text; });](https://image.slidesharecdn.com/rjavascriptvisualization-131122203750-phpapp01/85/R-JavaScript-Visualization-8-320.jpg)
![[データマイニング+WEB勉強会][R勉強会] R言語によるクラスター分析 - 活用編](https://cdn.slidesharecdn.com/ss_thumbnails/cluster-100416230155-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DL輪読会]Focal Loss for Dense Object Detection](https://cdn.slidesharecdn.com/ss_thumbnails/focalloss-180208092846-thumbnail.jpg?width=640&height=640&fit=bounds)
![[データマイニング+WEB勉強会][R勉強会] はじめてでもわかる R言語によるクラスター分析 - 似ているものをグループ化する-](https://cdn.slidesharecdn.com/ss_thumbnails/webmining2cluster-100319212743-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
RとJavaScript Visualizationを俯瞰しよう
- 1.
- 2.
- 3.
- 4.
- 5. JavaScript HTML5によって表現の幅が格段に 広がる SVG, Canvas, WebGL グラフ描画系のライブラリも多く 登場 Raphael.js,Chart.js,xCharts.js Highcharts.js,...etc 一杯!! Data Visualizationのライブラリ D3.js http://d3js.org/
- 6.
- 7. R言語とJavaScript比較 library(Wordcloud)を使用 library("wordcount") wordcloud( + data$Term, data$Freq, +scale=c(5,2), + max.words=Inf, + random.order=T, + random.color=T) 変化があまり見れないのはこ のとき使ったデータが悪かっ たので・・・
- 8. R言語とJavaScript比較 D3.js+d3-cloud d3.csv('resources/data/out.csv', function(data){ var h= 600; var w = 800; var random = d3.random.irwinHall(2) var countMax = d3.max(data, function(d){ return d.Freq / 5} ); var sizeScale = d3.scale.linear().domain([0, countMax]).range([10, 100]) var colorScale = d3.scale.category20(); var words = data.map(function(d) { return { text: d.Term, size: sizeScale(d.Freq / 5) }; }); d3.layout.cloud().size([w, h]) .words(words) .rotate(function() { return Math.round(1-random()) *90; }) .font("Impact") .fontSize(function(d) { return d.size; }) .on("end", draw) .start(); 見せる気０ //wordcloud 描画 function draw(words) { var svg = d3.select("#result_area") .append("svg") .attr("id", "svg_wordcloud") .attr("width", w) .attr("height", h); } }); svg.append("g") .attr("transform", "translate(400,300)") .selectAll("text") .data(words) .enter() .append("text") .style({ "font-family": "Impact", "font-size":function(d) { return d.size + "px"; }, "fill": function(d, i) { return colorScale(i); } }) .attr({ "text-anchor":"middle", "transform": function(d) { return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; } }) .text(function(d) { return d.text; });
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.