JMRI CodeFlower 2022

Introduction

The JMRI CodeFlower animation gives a lively perspective on the JMRI structure and how incredibly diverse the current state of work is.
Choose from a subset or let your browser crunch on the full JMRI repo using the drop down over the image.
Enjoy!

Extent of items in flower: Java code XML files Help files Full repo

 

Source code visualization

CodeFlower visualizes source repositories using an interactive tree. Each disc represents a file, with a radius proportional to the number of lines of code (loc).
All rendering is done client-side, in JavaScript. Try hovering on nodes to see the loc number, clicking on directory nodes to fold them and dragging nodes to rearrange the layout.

Compare with the 2017 JMRI CodeFlower.

CodeFlower was built with d3.js, inspired by Code Swarm and Gource. It was published as open-source by François Zaninotto under the MIT license.

Also view our 2009 JMRI CodeSwarm.

Technical Details

This CodeFlower was created using:

• a local GitHub repository (4.9.2ish)
• a modified cloc Python script
• functions embedded in the CodeFlower page to convert the information into a json format

How To

Download the cloc script (Count Lines Of Code, cloc) from github.com/AlDanial/cloc and save it somewhere close to your local GitHub folder.
Make the following adjustment to the script, using a suitable editor:

• After line 5290 insert 'shtml' => 'HTML' , to include our flavor of html in the analysis.

Next, in Terminal, cd to the folder containing cloc and your JMRI repo and type for example:
perl cloc.pl JMRI/java --csv --by-file --report-file=java.cloc
to get the "cloc" for the JMRI/java folder. (JMRI/java is the path to start analysing; java.cloc is the file name)
See progress, resulting in:
[counting]
12546 text files.
11295 unique files.
3803 files ignored.
Wrote java.cloc

Repeat for the following paths: JMRI (all, too large for the script?), JMRI/java, JMRI/xml and JMRI/help

In a browser open http://www.redotheweb.com/CodeFlower/

Next, open the output file java.cloc and copy its contents into the field below [Origins: clog] on http://www.redotheweb.com/CodeFlower/.
Click the [Convert] button (and optionally, click [Update] to see the new data displayed on the page).
Copy the generated JSON data from the Input Data Format field into a separate file and save it to the codeflower_js folder, together with the d3 JavaScript files. Further instructions are on the CodeFlower web page.

I had to trick a bit on the relative size of each element, as 3 files overshadowed the others: decoderIndex.xml, RR-CirKits-TC-64-basic.xml and functionGenerator.xml all containing over 25k lines of code (loc) while other files contain just 200 loc.
Open CodeFlower.js and make the following changes to show the full current code set of JMRI inside a reasonable square:

• on line 19: .charge(function(d) { return d._children ? -d.size / 100 : -40; }) // change 100:-40 to 500:-15 // -15 slows down the action but keeps the elements away from the edge
• on line 20: .linkDistance(function(d) { return d.target._children ? 70 : 25; }) // change 80:25 to 70:25 // 70 keeps the items closer in the final state
• on line 40: .gravity(Math.atan(total / 60) / Math.PI * 0.4) // change total/50 to /60 makes it more compact in equilibrium
• on line 72: .attr("r", function(d) { return d.children ? 3.5 : Math.pow(d.size, 2/5) || 1; }) // change 2/5 to 1/5 (or use log for pow?) NB: keep it about the same as line 66

Source Data

Take a look at the data inside jmri.json.

---