User Tools

Site Tools


Sidebar



d3

d3

React and D3

React-D3 is een library die je React met D3 laat combineren, wat volgens velen een ideale combinatie is om grafieken met JavaScript te maken. http://www.reactd3.org/ Ik heb gedeeld hoe je de Getting started met behulp van JSPM ipv browsify of webpack kan doorlopen:
https://github.com/react-d3/react-d3.github.io/issues/8

Tag Cloud script for dokuwiki (work in progress)

thanks to: http://jsfiddle.net/adiioo7/RUTpJ/light/
see also: dokuwiki

<?php
 
class CommandPluginExtension_pagecloud extends CommandPluginExtension {
 
  function getCachedData($embedding, $params, $paramHash, $content, &$errorMessage) {
    $files = glob('data/meta/*.changes');
    // usort($files, function($a, $b) {
    //     return filesize($a) < filesize($b);
    // });
 
    foreach($files as $file) {
      $name = basename($file,'.changes');
      if ($name=='sidebar') continue;
      if ($name=='start') continue;
 
      $fontsize = filesize($file)/1000;
      $fontsize = ceil($fontsize*$fontsize+14);
 
      $lines[] = "{ text: '$name', size:$fontsize }";
      // $lines[] = "<a style='float:right' href='$name'><font size='$fontsize'>$name</font>&nbsp;</a>";
    }
 
    return '<svg id="d3cloud"></svg>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://jardindesconnaissances.googlecode.com/svn-history/r82/trunk/public/js/d3.layout.cloud.js" charset="utf-8"></script>
 
<script>
  var fill = d3.scale.category20();
 
  d3.layout.cloud().size([700, 1000])
  .words(['.join(',',$lines).'])
  .rotate(function() { return 0; }) // ~~(Math.random() * 2) * 90; })
  .font("Impact")
  .fontSize(function(d) { return d.size; })
  .on("end", draw)
  .start();
 
  function draw(words) {
    d3.select("#d3cloud") //.append("svg")
    .attr("width", 700)
    .attr("height", 1000)
    .append("g")
    .attr("transform", "translate(350,500)")
    .selectAll("text")
    .data(words)
    .enter().append("a")
    .attr("xlink:href", function(d) { return d.text; })
    .append("text")
    .style("font-size", function(d) { return d.size + "px"; })
    .style("font-family", "Impact")
    .style("fill", function(d, i) { return fill(i); })
    .attr("text-anchor", "middle")
    .attr("transform", function(d) {
      return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
    })
    .text(function(d) { return d.text; });
  }
</script>';
  }
}
?>
d3.txt · Last modified: 2016/05/07 07:50 by rick