p5js and d3

jrmasiero · July 2017

I have made a simple sketch that can be used for interactive data visualizations using p5js and d3 libraries.

index.html

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>D3: Drawing divs with data</title>
            <!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
      <script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
      <script language="javascript" type="text/javascript" src="p5_D3_v5.js"></script>
      <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->
      <script language="javascript" type="text/javascript" src="libraries/p5.dom.js"></script>
            <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>


        </head>
        <body>
             <div id="container"></div>
             <div id="container2"></div>


        </body>
    </html>

p5_D3_v5.js

var w = 1000;
var h = 700;

var posicao_tela_x = 200;
var posicao_tela_y = 50;

var svg;

var valores = [10,50,90,100,150,400];

var padding = 50;

var circles;

var cores;
var posX;
var posY;

function preload() {

  svg = d3.select("#container2")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

}


function setup() {
  var tela = createCanvas(w,h);
  //SELECIONA O DIV NO BODY que estea em cima(vem depois) ou embaixo(vem antes)
  tela.parent("#container");
  tela.position(0, 0);

  //iMPORTANTE PARA POSICIONAR O D3 E O P5 NA TELA
  select("#container").position(posicao_tela_x, posicao_tela_y);
  select("#container2").position(posicao_tela_x, posicao_tela_y);

  cores = d3.scale.quantize()
  .domain([d3.min(valores), d3.max(valores)])
  .range(["red","green","blue"]);

  posX = d3.scale.linear()
  .domain([d3.min(valores), d3.max(valores)])
  .range([0 + padding, w - padding]);

  posY = d3.scale.linear()
  .domain([d3.min(valores), d3.max(valores)])
  .range([h - padding,0 + padding]);

  desenharData();        

}

function draw(){


noFill();
strokeWeight(5);
stroke(0);
rect(0,0,w,h);
noFill();
strokeWeight(5);
stroke(0);
rect(mouseX,mouseY,70,70);


}



function desenharData(){

  circles = svg.selectAll("circle")
  .data(valores)
  .enter()
  .append("circle");

  circles.attr("cx", function(d){
    return posX(d);
  })
  .attr("cy", function(d){
    return posY(d);
  })
  .attr("r", function(d){
    return d/2;
  })
  .attr("fill", function(d){
    return cores(d);
  });


}

function mouseClicked(){
shuffle(valores,true);
ReDesenharData();
}

function ReDesenharData(){


 circles = svg.selectAll("circle")
 .data(valores)
 .transition()
 .duration(500)
 circles.attr("cx", function(d){
    return posX(d);
  })
  .attr("cy", function(d){
    return posY(d);
  })
  .attr("r", function(d){
    return d/2;
  });



}

Depending on the div (container or conteiner2) you select() your p5 code will be in front or as background of the d3 data visualization. CLick the mouse to shuffle the array.

Howdy, Stranger!

Categories

p5js and d3