Noodl + D3 integration


#1

Hi,

I am really loving Noodl and I would love to see how it can integrate with d3 javascript library. I made a small experiment where I created a javascript element that loads d3 and then renders according to some data. The data is JSON passed as a String. Here’s the code of the javascript node (in case it is useful for someone):

define({
inputs: {
	text: "string",
	width:"number",
	height:"number"
},
outputs: {
    content: "string"
},
destroy: function(inputs, outputs) {

},
setup: function(inputs, outputs) {
    var script = document.createElement('script');
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.1/d3.js';
    document.body.appendChild(script);
    script.onload = function() {
        console.log('script is ready to use');
    }
},
run: function(inputs, outputs, changedInputs) {

if (typeof d3 != "undefined") {
    
let xmlns = "http://www.w3.org/2000/svg";

var data = [80, 120, 60, 150, 200,56,78];
var barHeight = 20;
var svg = d3.select(document.createElementNS (xmlns, "svg"))
        .attr("width",inputs.width)
        .attr("height",inputs.height)
        
w = inputs.width
h = inputs.height

let scaleY = d3.scaleLinear().range([0,h/3]).domain([0,data.length])

svg.selectAll('rect')
      .data(data)
      .enter()
      .append('rect')
      .attr('width', function(d) {  return d; })
      .attr("fill","black")
      .attr('height', 10)
      .attr('x',0)
      .attr("y",(d,i)=>scaleY(i));

   outputs.content = svg.node().outerHTML
   console.log(outputs.content)
    
    }

  else {
      outputs.content = "lib loading"
   }


    }
  });   

Thanks and great tool !!
Sebas


#2

Nice! Thanks for sharing