Spot on! It's a space I've been wanting to explore, and so have been tinkering with it this last week while we're in between larger projects. I definitely don't see it being a product in it's current gotten, but wanted to share the exploration! Although I will say that the more I've been visualizing different repos, the more convinced I am that it's more useful than is easy to convey.
oh no! My best guess would be that there are many element-heavy SVGs on the page. I was hoping for better performance, since the files will almost definitely be smaller than large raster images, but there are likely older browsers that have trouble with that. I'll look into it, thanks for the report!
There are definitely many trade-offs with using a circle pack layout - I snuck a bit of the reasoning into the collapsed section halfway through the write-up! Overall, this layout worked best for me, with the nesting feeling very natural and the circles feeling very "atomic".
But big picture, this write-up isn't tied to the current visualization! It's more focused on exploring _how_ a visual representation could help our understanding of codebases. There are tons of jumping off points, including different vizes!
We always look at our code in a file/folder list - I explored an alternative way to view codebases, showing a bird's-eye-view of its structure. This write-up walks through the motivations, ways to use the visualization, and potential future directions (there are many!).
There's also an interactive tool to check out your own repos and a GitHub Action if you want to integrate a diagram into a README.
I also added it after your first comment so might have snuck it by you ;)
I'm curious what it is that you're seeing, if you have the chance to leave an image!
interesting! I'm seeing them grouped in the middle. It's a tricky layout, using d3.js's circle packing algorithm, then recursively using a force layout to relax each folder's contents.
I probably need to add more context to the page, but I want to specify that my intention with this tool wasn't that long sentence == bad. I was inspired by this image:
It's really interesting how different authors play with the rhythm of their sentences - one of the best ones on here is The Raven, with very short sentences interspersed with longer ones.
I've done a lot of work that uses d3 within a JS framework (React, Vue, Svelte, & Angular), and the key is to understand 1. how to create shapes in plain SVG, and 2. how to use the parts of d3 that don't do DOM manipulation. I've found the least-hacky way is to handle DOM manipulation with the framework, and use d3 for things like data manipulation, creating SVG path strings, creating scales to map from the data domain to the visual properties, etc.
There are tons of different d3 modules (40+). As someone who uses d3 extensively, but rarely uses its selection and data binding functionality, I put together a birds-eye view of the different modules. There is tons of great functionality that is usually skipped over in favor of the DOM-manipulation methods, like managing colors, dates, data munging, etc.
I really love creating things with SVG + React! I usually will use that until things start to jank up, and then switch to Canvas, which is more annoying for interactions and debugging.
I added a 30ms debounce, just to help out a bit. I'm seeing some serious jank in Firefox, which smells like the beginning of a rabbit hole. Hopefully I'll find some time to dig in there.
Good question! I'm trying to find a good way to explain this bit in the guide.
This is due to the preserveAspectRatio property on the svg element. Its default value is `meet`, which scales the svg with three rules:
- aspect ratio is preserved
- the entire viewBox is visible within the viewport
- the viewBox is scaled up as much as possible, while still meeting the other criteria
If you fiddle with the attribute value in the Dev Tools, try setting it to `xMinYMid` or `none` to see if that gives you a good sense of how it works. I'm worried that it might just confuse if not explained well :)
I share your opinion! And that's actually partially why I wrote this post - it's really great to know the different utility methods of d3.js to help render a data viz (using React, etc).
it really depends on your use case! d3 is basically as close to the metal as you're going to get with visualizing data in a browser. It lets you build custom, interactive visualizations, and really is just a rocket booster. If you just want a simple chart and don't need much customization, there are tons of great higher level libraries that are easier to use.