d3.js and p5.js

d3.js and p5.js.markdown

d3.js and p5.js

Porting d3.js histogram layout example to p5.js using d3.js tools and libraries as much as possible.

Original d3.js code: http://bl.ocks.org/mbostock/3048450

A Pen by Sepand Ansari on CodePen.

License.

script.js

// port of http://bl.ocks.org/mbostock/3048450 into p5.js

function setup() {
  
  /* 
   This section of code is the exact copy of d3.js example
  */

  // Generate a Bates distribution of 10 random variables.
  var values = d3.range(5000).map(d3.random.bates(10));

  // A formatter for counts.
  var formatCount = d3.format(",.0f");

  var margin = {top: 10, right: 30, bottom: 30, left: 30},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

  var x = d3.scale.linear()
      .domain([0, 1])
      .range([0, width]);

  // Generate a histogram using twenty uniformly-spaced bins.
  var data = d3.layout.histogram()
      .bins(x.ticks(20))
      (values);

  var y = d3.scale.linear()
      .domain([0, d3.max(data, function(d) { return d.y; })])
      .range([height, 0]);

  /*
     up tp here the code is exactly the same as d3.js example.
     below p5.js translation starts.
  */

  createCanvas(width, height);


    /*
    var bar = svg.selectAll(".bar")
      .data(data)
    .enter().append("g")
      .attr("class", "bar")
      .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
     */

  for(var i = 0; i< data.length; i++) {
    
    var d = data[i];
    push();
    translate(x(d.x), y(d.y));

   /*
    bar.append("rect")
      .attr("x", 1)
      .attr("width", x(data[0].dx) - 1)
      .attr("height", function(d) { return height - y(d.y); });
    */  
    fill(70, 130, 180);
    noStroke();
    rect(1, 1, x(data[0].dx) - 1, height - y(d.y)  );

  /*
    bar.append("text")
      .attr("dy", ".75em")
      .attr("y", 6)
      .attr("x", x(data[0].dx) / 2)
      .attr("text-anchor", "middle")
      .text(function(d) { return formatCount(d.y); });

  */

    fill(255);
    textAlign(CENTER);
    text(formatCount(d.y), x(data[0].dx) / 2, -2, x(data[0].dx), 20 );

    pop();

  /*
    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
  */

  // N/A in p5.js.  
  }
  
}

scripts

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.5/p5.js"></script>