D3.js Plugin for Awesome Visualizations

[lukaszmac]

Hi there

I am so impressed with how intuitive and clean the Freeboard system is. Great job, and THANK YOU!

I have always been disappointed with the charting and visualization components in the dashboard tools, mainly because the information density is rather low. I need something that can give me a much richer view of what is going on in a very small space. For this, I find D3.js is EXCELLENT (http://d3js.org/).

I started configuring a dashboard for my dev team and I put together a D3.js plugin. I thought it might be worth contributing it back. I am sure many more people would like to build on top of it.

Please would you consider adding it if you think it will add value. I think it opens up huge possibilities, while blowing the competing frameworks out of the water.

Here is a screenshot of the example I created. If you feel that I need to invest more time configuring sexier examples then I can still do that. I am doing this in my spare time.

[nochte]

Thanks for your contribution, I'll bring it down and check it out this weekend.

[lukaszmac]

Hi Nate

Thanks so much!

I am busy building a team board that pulls data from CSV files in a bitbucket private repo, Issue stats from JIRA and time sheet data from Toggl. The D3 plugin as it stands is holding up just fine without modification. However, once I am done with something impressive, I intend on publishing an example freeboard to go with it.

My progress is slow but steady so I will keep you posted. I am chipping away at it every day.

Freeboard=Awesome!

Regards
Luke

Sent from my iPad

On 17 Jul 2015, at 4:23 PM, Nate Rowland notifications@github.com wrote:

Thanks for your contribution, I'll bring it down and check it out this weekend.

—
Reply to this email directly or view it on GitHub.

[njss]

Hi Luke, thank You for the d3 plugin. Just what i was looking for.
I just want to have some basic d3 widgets that loads data from json files. Are you using the json datasource too?

[lukaszmac]

Great!

I haven't been using the json data source but rather d3's implementation. I do expect it to work without problems. I gave it a really quick try and it seems to work on the surface.

Let me know how it works out for you.

[njss]

Hi Lukas,
so cool that you are reading the messages.

I've downloaded your code and I tried it but I could not visualize anything. The datasource never get updated.

Can you tell me how can I include my own d3 standard charts in freeboard?
I am bit lost with which files I have to edit to create my own widgets or datasources...

Thank you so much in advance.

[njss]

The Jira connection for the datasource is not working for me, no updates. But that I could replace with another datasource...the problem is:

When i load the d3.json freeboard a pane is displayed with a widget inside. When I check the properties of this widget there is no type...it should be a D3 chart right?
Where is the D3 widget type? any extra .js file to include? I could not find it. Maybe the d3.json file format is wrong?

[lukaszmac]

Hi Nelson

Please make sure that you are running the index-dev.html file. I have only updated that to include the D3 plugin. I have not updated the index.html file (because I assume there is a build process for that which I have not run). Please confirm that you see it when running the dev file. You should then see the D3 widget type as you correctly expected.

You could probably just follow the freeboard instructions for adding widgets to update your index.html file wherever you are using it. Additionally, I believe that the freeboard.io has a developer console where you can load additional plugins via a console on the site. I haven't tried that but it should work.

[njss]

Hello Lukas,
I see the widget configs now with index-dev.html. Thanks for the hint... :)
Everything is working fine now! I have now integrated multiple D3.js charts.
Thanks,

[njss]

Hi again Lukas,

first of all thank you for your help. I now have my more complex D3 visualization working inside freeboard.
However I am failing to understand how the widget or the pane does not grow in the number of rows, therefore not displaying the entire chart in freeboard. I can see that the entire chart is there but the pane is small in terms of rows.

What goes into these row and col parameters?

This my current .json file:

{
"version": 1,
"allow_edit": true,
"plugins": [],
"panes": [
{
"title": "Heatmap",
"width": 1,
"row": {
"3": 2,
"4": 2
},
"col": {
"3": 1,
"4": 1
},
"col_width": 4,
"widgets": [
{
"type": "mach_d3_plugin",
"settings": {
"data": "",
"html": "<div id="heatmap">",
"code": " //javascript D3 code here",
"sizeInBlocks": 1
}
}
]
}
],
"datasources": [],
"columns": 3
}

thank you once more.

[njss]

Hi Lukas,
never mind I have the complete workflow working now!
Everything is fine now :)

thanks

[Hywan]

Any news for this plugin? Would be absolutely awesome :-).

[blueben]

Howdy. Dropping by to say I'd love to use Freeboard if this PR is merged. Any timeline for that?

[bugvish]

Hi all,

Thank you for the continued enthusiasm for Freeboard, and for this
integration! We will do some testing and if all goes well - a merge within
the next few weeks.

Cheers,
Vish Kumar

On Mon, Dec 14, 2015 at 2:51 PM, Benjamin Krueger notifications@github.com
wrote:

Howdy. Dropping by to say I'd love to use Freeboard if this PR is merged.
Any timeline for that?

—
Reply to this email directly or view it on GitHub
#130 (comment).

[Hywan]

👍

[Hywan]

Any news :-)?

[theborax]

Wondering the same, any news on this?

[lukaszmac]

Please let me know if there are any specific changes I need to make to help speed up the pull request back into the master branch.

[nii236]

Can this still be merged?

[nii236]

Or does the HTML achieve the same?

(Sorry for double post, an on phone)

[perks]

Hey just wanted to chime in, maybe not grocking the plugin but I have the following example using the JS Editor to input most of the items via the widget

HTML: <div id="TEST">
'CSS':

.node {
		cursor: pointer;
	}

	.node circle {
	  fill: #fff;
	  stroke: steelblue;
	  stroke-width: 3px;
	}

	.node text {
	  font: 12px sans-serif;
	}

	.link {
	  fill: none;
	  stroke: #ccc;
	  stroke-width: 2px;
	}

D3.js Code (Using .JSEditor) :

 var treeData = [
  {
    "name": "Top Level",
    "parent": "null",
    "children": [
      {
        "name": "Level 2: A",
        "parent": "Top Level",
        "children": [
          {
            "name": "Son of A",
            "parent": "Level 2: A"
          },
          {
            "name": "Daughter of A",
            "parent": "Level 2: A"
          }
        ]
      },
      {
        "name": "Level 2: B",
        "parent": "Top Level"
      }
    ]
  }
];


// ************** Generate the tree diagram	 *****************
var margin = {top: 20, right: 120, bottom: 20, left: 120},
	width = 960 - margin.right - margin.left,
	height = 500 - margin.top - margin.bottom;
	
var i = 0,
	duration = 750,
	root;

var tree = d3.layout.tree()
	.size([height, width]);

var diagonal = d3.svg.diagonal()
	.projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("TEST").append("svg")
	.attr("width", width + margin.right + margin.left)
	.attr("height", height + margin.top + margin.bottom)
  .append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

root = treeData[0];
root.x0 = height / 2;
root.y0 = 0;
  
update(root);

d3.select(self.frameElement).style("height", "500px");

function update(source) {

  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse(),
	  links = tree.links(nodes);

  // Normalize for fixed-depth.
  nodes.forEach(function(d) { d.y = d.depth * 180; });

  // Update the nodes…
  var node = svg.selectAll("g.node")
	  .data(nodes, function(d) { return d.id || (d.id = ++i); });

  // Enter any new nodes at the parent's previous position.
  var nodeEnter = node.enter().append("g")
	  .attr("class", "node")
	  .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
	  .on("click", click);

  nodeEnter.append("circle")
	  .attr("r", 1e-6)
	  .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

  nodeEnter.append("text")
	  .attr("x", function(d) { return d.children || d._children ? -13 : 13; })
	  .attr("dy", ".35em")
	  .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
	  .text(function(d) { return d.name; })
	  .style("fill-opacity", 1e-6);

  // Transition nodes to their new position.
  var nodeUpdate = node.transition()
	  .duration(duration)
	  .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

  nodeUpdate.select("circle")
	  .attr("r", 10)
	  .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

  nodeUpdate.select("text")
	  .style("fill-opacity", 1);

  // Transition exiting nodes to the parent's new position.
  var nodeExit = node.exit().transition()
	  .duration(duration)
	  .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
	  .remove();

  nodeExit.select("circle")
	  .attr("r", 1e-6);

  nodeExit.select("text")
	  .style("fill-opacity", 1e-6);

  // Update the links…
  var link = svg.selectAll("path.link")
	  .data(links, function(d) { return d.target.id; });

  // Enter any new links at the parent's previous position.
  link.enter().insert("path", "g")
	  .attr("class", "link")
	  .attr("d", function(d) {
		var o = {x: source.x0, y: source.y0};
		return diagonal({source: o, target: o});
	  });

  // Transition links to their new position.
  link.transition()
	  .duration(duration)
	  .attr("d", diagonal);

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
	  .duration(duration)
	  .attr("d", function(d) {
		var o = {x: source.x, y: source.y};
		return diagonal({source: o, target: o});
	  })
	  .remove();

  // Stash the old positions for transition.
  nodes.forEach(function(d) {
	d.x0 = d.x;
	d.y0 = d.y;
  });
}

// Toggle children on click.
function click(d) {
  if (d.children) {
	d._children = d.children;
	d.children = null;
  } else {
	d.children = d._children;
	d._children = null;
  }
  update(d);
}

Size in Blocks: 1

For now I left data empty (just trying to test it out) But I'm assuming I would do something like this

data (in JsEditor):

var my_data = {'something':'going here'}
return my_data

And then it would be available in the D3.js CODE js Editor?

Regardless, I can't get the visualisation to show up, wondering if missing something

[mfilotto]

It could very use this plugin too.
Any update ?

[mfilotto]

Any update on this one ?