Movatterモバイル変換


[0]ホーム

URL:


r2d30.2.5

Gallery: treemap

Source:vignettes/gallery/treemap/index.Rmd
index.Rmd

https://github.com/rstudio/r2d3/tree/main/vignettes/gallery/treemap

r2d3(data=jsonlite::read_json("flare.json"), d3_version=4, script="treemap.js")

treemap.js

// !preview r2d3 data = jsonlite::read_json("flare.json"), d3_version = 4// Based on: https://bl.ocks.org/mbostock/4063582var fader=function(color){returnd3.interpolateRgb(color,"#fff")(0.2);},    color=d3.scaleOrdinal(d3.schemeCategory20.map(fader)),    format=d3.format(",d");var treemap=d3.treemap()    .tile(d3.treemapResquarify)    .size([width, height])    .round(true)    .paddingInner(1);r2d3.onRender(function(data, svg, w, h, options){var root=d3.hierarchy(data)      .eachBefore(function(d){d.data.id= (d.parent?d.parent.data.id+"." :"")+d.data.name;})      .sum(sumBySize)      .sort(function(a, b){returnb.height-a.height||b.value-a.value;});treemap(root);var cell=svg.selectAll("g")    .data(root.leaves())    .enter().append("g")      .attr("transform",function(d){return"translate("+d.x0+","+d.y0+")";});cell.append("rect")      .attr("id",function(d){returnd.data.id;})      .attr("width",function(d){returnd.x1-d.x0;})      .attr("height",function(d){returnd.y1-d.y0;})      .attr("fill",function(d){returncolor(d.parent.data.id);});cell.append("clipPath")      .attr("id",function(d){return"clip-"+d.data.id;})    .append("use")      .attr("xlink:href",function(d){return"#"+d.data.id;});cell.append("text")      .attr("clip-path",function(d){return"url(#clip-"+d.data.id+")";})      .style("font-size",Math.min(width, height)/50)    .selectAll("tspan")      .data(function(d){returnd.data.name.split(/(?=[A-Z][^A-Z])/g);})    .enter().append("tspan")      .attr("x",4)      .attr("y",function(d, i){return13+ i*10;})      .text(function(d){return d;});cell.append("title")      .text(function(d){returnd.data.id+"\n"+format(d.value);});d3.selectAll("input")      .data([sumBySize, sumByCount],function(d){return d?d.name :this.value;})      .on("change", changed);var timeout=d3.timeout(function(){d3.select("input[value=\"sumByCount\"]")        .property("checked",true)        .dispatch("change");},2000);functionchanged(sum){timeout.stop();treemap(root.sum(sum));cell.transition()        .duration(750)        .attr("transform",function(d){return"translate("+d.x0+","+d.y0+")";})      .select("rect")        .attr("width",function(d){returnd.x1-d.x0;})        .attr("height",function(d){returnd.y1-d.y0;});}});functionsumByCount(d){returnd.children?0 :1;}functionsumBySize(d){returnd.size;}

treemap.css

svg {font:10pxsans-serif;}

[8]ページ先頭

©2009-2025 Movatter.jp