CSV + Collapsible Tree in D3.js

[Piyush.D3.India]

Making an interactive, Collapsible, Dragable, Zoomable Tree in D3.js but with I wish to get all data from a CSV instead of a JSON, I m a fresher in D3.js.
I wish to make something more like Brightpoint Federal Budget Example.

http://www.brightpointinc.com/interactive/budget/

As they have used a CSV to visualize all their data and my biggest challenge is in making a hierarchy in this Tree.
I will be really grateful if someone could get me the source code of Brightpoint of Federal Budget 2013 Example or else by making a tree with hierarchical data from a CSV instead of a normal json. Awaiting Your Response D3.js Professionals out there. :)

[Kai Chang]

Use d3.csv() to load a CSV in as a JSON array of objects. Use d3.nest() to transform that array into a hierarchical object.

Examples: http://bl.ocks.org/phoebebright/raw/3176159/

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Piyush.D3.India]

Hi Chang, I did that and I m able to make a tree out of it, I m unable to get count or the size associated with each child and parent node as we could  easily get in JSON hierarchy.

read this to get a idea of what i am asking for - 

{
	"name": "flare",
	"children": [
	{
	"name": "analytics",
	"children": [
	{
	"name": "cluster",
	"children": [
	{"name": "AgglomerativeCluster", "size": 3938},
	{"name": "CommunityStructure", "size": 3812},
	{"name": "HierarchicalCluster", "size": 6714},
	{"name": "MergeEdge", "size": 743}
	]
	}

[Kai Chang]

Use rollup() to get a count or sum the size of nodes. Again see Phoebe's reference. Also see API docs:

https://github.com/mbostock/d3/wiki/Arrays#d3_nest

Full example of going from a flat JSON object to a treemap:

http://bl.ocks.org/syntagmatic/b6821801c222d4d3bfe0

There's also some code here for creating a nested structure for dendrograms from the output of the Linux du command:

http://bl.ocks.org/syntagmatic/4076122

[Piyush.D3.India]

Thanks Kai, You Helped me alot :) I have made what i desired for.. :D All thanks to ur guidance :) 

[Richa Pathak]

Hi Piyush, i am trying to build a widget on same "http://www.brightpointinc.com/interactive/budget/" 

But i am unable to get required details like data, js file...

can you please help me with the same. i am looking for the source code of Brightpoint of Federal Budget 2013.

Thanks in advance.

[Piyush.D3.India]

Hi Richa, Can I have your email address ? I do not wish to share the tree that i have made publicly.I will get back to you after 6 hours.

[Curran]

Hello Piyush,

I worked on something kind of similar to this a long time ago. Here's a linked tree and stacked area chart, and here's the code that generates a tree from a table with indented categories.

I think you'll need to write some code that iterates through the CSV data and constructs the tree data structure that the D3 hierarchy layout expects. How you do this depends on how the tree is encoded in the CSV table. If you could share some sample CSV data that encodes a hierarchy, we could help more with how to transform it into a tree. One way is that maybe the parent-child relationships are each represented as a single row of the CSV data. Is this how your data is formatted?

Also, here's the Collapsible Tree Example that I suspect the Brightpoint vis is based on (it has the same layout, interactions, and animations).

Best regards,

Curran

[Monika Agarwal]

Hello Piyush,

I am working on something similar. I want to create a Zoomable, Collapsible Tree in D3 using an external CSV file just like one in this example

http://mbostock.github.io/d3/talk/20111018/tree.html.

D3 is new to me. I will be grateful if you can help me this. Thanks.

[animesh singh]

hello Piyush and Monika , i need a little help with that collapsible tree.