fzaninotto / codeflower Goto Github PK

in my codebase at:

https://github.com/jonathanlocke/superkit

when i manually fix the "language" bug i just reported, it does in fact generate the right JSON but you can't view the src tree fully using that JSON. I suspect this because there is a level at which there are no leaves in the tree and recursion stops there when it shouldn't.

https://github.com/jonathanlocke/superkit/tree/master/src/superkit

I believe that in CodeFlower.js

21: .size([h, w]);

should be:

21: .size([w, h]);

The effects of the switch is not visible on http://redotheweb.com/CodeFlower/ as all svg dimensions are square (w=h).

It seems I have a small bug or misunderstanding of the specs.
Clicking on a folder node which only contains another folder node, I see a "free node" that is still displayed.
Before the clik

after the click

Is it a bug or is it part of the spec that would not allow folder node without leaf ?
It seems ok with folders containing two other folder nodes

In my final diagram, not all nodes are shown and the final diagram shows the links starting from nowhere. However, if i collapse my first node then the middle nodes for the next two parent nodes appear, if i collapse second parent node, fourth one appears and so on. Unfortunately, not able to figure out the cause of the issue.

On your webpage you mention about how the only things a web developer would need to do in order to implement your CodeFlower would be import CodeFlower.js and d3.js, create a div like so <div id="visualization"></div>, and to put the following code inside of script tags:
var myFlower = new CodeFlower("#visualization", 300, 200);
myFlower.update(jsonData);

I have done all of the following and even have a working .json file (I tested it on your webpage). My question is how would I tell myFlower to get info from my .json file? I already tried replacing 'jsonData' with a String address to my .json file and that did not work.
Thank you in advance!

I'm trying to add a background image to nodes (svg:circle) with the pattern method mentionned here:
https://groups.google.com/forum/#!topic/d3-js/1P5IphE319g
or here http://stackoverflow.com/questions/19202450/adding-an-image-within-a-circle-object-in-d3-javascript

The DOM is OK, all seems alright, but no images. Someone can help me?

Here my code added to CodeFlower.js :

(...)
     // Enter any new nodes
    this.node.enter().append('defs')
        .append('pattern')
            .attr('id', function(d) { return (d.id+"-icon");}) // just create a unique id (id comes from the json)
            .attr('patternUnits', 'userSpaceOnUse')
            .attr('width', 32)
            .attr('height', 32)
            .append("svg:image")
                .attr("xlink:xlink:href", function(d) { return (d.icon);}) // "icon" is my image url. It comes from json too. The double xlink:xlink is a necessary hack (first "xlink:" is lost...).
                .attr("x", 0)
                .attr("y", 0)
                .attr("height", 32)
                .attr("width", 32)

    this.node.enter().append('svg:circle')
        .attr("class", "node")
        .classed('directory', function(d) { return (d._children || d.children) ? 1 : 0; })
        .attr("cx", 16)
        .attr("cy", 16)
        .attr("r", 16)
        .style("stroke", "black")
        .attr("fill", function(d) { return ("url(#"+d.id+"-icon)");})
        .call(this.force.drag)
        .on("click", this.click.bind(this))
        .on("mouseover", this.mouseover.bind(this))
        .on("mouseout", this.mouseout.bind(this));

(...)

Hi
Question, how can I make visible all the folder labels permanently (now they are displayed only on mouseover).
thx

would be interesting to measure code in other ways than just LOC and allow these measures to affect both the size and color of flower petals. for example, metrics like:

• methods per class
• average lines per method
• cyclomatic complexity
• test coverage

rather than taking on all these things directly, perhaps codeflower could simply provide a slight extension to the json data format that allows integration with arbitrary tools by tagging values with metric type as well as value. For example { metric="loc" value="500" } or { metric="averageMethodLines" value="1.5" }. codeflower might have to perform some range scaling on values but other projects could handle the data extraction (it would be neat, btw, if that could be more seamless and automatic... ideally someone could add a codeflower to their git project that continuously updates all kinds of metrics in just a few minutes... perhaps codeflower should be integrated into github...).

i wonder if there might not be a kind of biology/morphology to codeflowers where you can recognize different "species" of projects using additional metrics like these...

I downloaded your dataConverter.js and I have used it in my code.
Everything works fine with

cloc.exe --by-file  ....

but when I generate cloc file

cloc.exe --by-file-by-lang ....

output cloc files can not be converted to JSON.

As result after cloc file is trying to be converted I have error

Uncaught TypeError: Cannot set property 'name' of undefined dataConverter.js

in console in 32-33 this line:
https://github.com/fzaninotto/CodeFlower/blob/master/javascripts/dataConverter.js#L32

json = getChildren(json)[0];
json.name = 'root';

Please, can you update code so it can work with latest version which is much better than version 3.

Thank you in advance.

The instructions for CodeFlower say you can click on a directory to collapse it, but the directory dots "run away" from the mouse cursor. The only way to click on a directory node (which is roughly 1 pixel wide) is to "sneak up on it" and click before the animation can move it away. Doing so is nearly impossible, requiring dozens of attempts to nail down the slippery dot. It makes a good dexterity game but a frustrating interface.

I thought maybe this "run away" behavior was a feature, but I cannot think of any reason it would ever be useful.

Hi, I would love to use your code flower on my site but when I try to make my own the
<div id="visualization"></div> remains blank. I came across the same error when trying out your index.html file. I know this is not a rare file corruption issue because I downloaded and unzipped your code twice but came across the same problem.

Since I am contacting you now I suppose I can also tell you that the example CodeFlower() instance on your webpage says "myflower" instead of "myFlower". ;)

Lastly, is "jasonData" on the same page the String address to the .json file?

Thank you for helping!

• Mark

Hello again.
I did some research and the consensus is that D3.js should work in IE9 and up. However, when I tried the CodeFlower in IE9 it gave me the following errors:

SCRIPT5009: 'CSSStyleDeclaration' is undefined
d3.js, line 7 character 3
SCRIPT5009: 'd3' is undefined
d3.geom.js, line 1 character 13
SCRIPT5009: 'd3' is undefined
d3.layout.js, line 1 character 13
SCRIPT5009: 'd3' is undefined
asdbsw01poc.fmr.com:801, line 144 character 7

Chrome did not have any errors.
I am wondering if this is purely a D3 thing or if any modifications could be made that would fix this problem. I would really like to make the diagram visible to those using IE. Perhaps an update of your D3 file would fix this issue?
Please help and thank you in advance.

• Mark

Hi,
Does anyone know how to embed a url within a circle in codeflower so that when I do a mouse over and the url is visible I can click on it.

Is it something that I can embed in the following:

.call(this.force.drag)
.on("click", this.click.bind(this))
.on("mouseover", this.mouseover.bind(this))
.on("mouseout", this.mouseout.bind(this));

Thanks in advance.

Hey @fzaninotto , I loved the idea of this visualization.
Just one request - can you create a simple step by step wiki page for implementing this?
I understand it's easy to do it just by Ctrl + U, however doing this will enhance the adoption of this project.

JSON generator is not working on http://redotheweb.com/CodeFlower/ well. If I generate metrics with the newest windows version (1.56) version of cloc, the output will be only the root element. Examples (symfony-master) neither works.

code flower not properly drawn with latest d3 version, and dependency wheel is not working with the version specified with code flower. Please help me in making both code flower and dependency wheel working in the same project.

Thanks in advance

I would like collapse all nodes (or just some selected nodes if it's possible through a declaration in the json file for example) when the graph is loaded.

Unfortunatly, I have no idea how to do that...

Hi.

I got this error using the online viewer "Convert" button at http://www.redotheweb.com/CodeFlower/,
avec un contenu minimal:

   1 A
   2 B
   3 total

it looks like you can't have a package/folder named language or the conversion code fails (for both WC and CLOC conversions). i'm guessing this has something to do with the JS variable name 'language' but i don't know enough JS to know what's wrong or how to fix it.

I think that the bit of code around line 21 in the javascript file CodeFlower.js that reads:
.size([h, w]);

should read:
.size([w, h]);

When visualizing extremely large codebases, it takes 10's of minutes to render a code flower. I'm interested in working on a way to change that, but I'm not sure where to start. I've looked a bit at this: https://bl.ocks.org/Kcnarf/6a0b4488bc60ea61eb887bf4d1f9b2b5, but I can't see how to apply the technique there to CodeFlower.

How to set the distance between two circle use Code Flower ?

I want to set the svg full of the parent container, how ?

please email me : [email protected]

thanx!

The data converter is not working for me and I believe this may be the issue, thanks for this amazing project!