Show HN: GitHub Repo Visualizer Using D3 | Hacker News Reader

Show HN: GitHub Repo Visualizer Using D3

see-my-repo.netlify.app

76 pointsCerchie14 comments

I built this as part of my quest to properly learn data visualization. The code is the easy part!

Some lessons learned:

- personal verification of the the general truth that pie charts are tough! and the returns are not great for the effort due to people's difficulties perceiving angles - may not use "vanilla" d3 with no React. was difficult to adapt for mobile - the GitHub API provides fairly standardized responses so building dynamic charts wasn't too bad. But when working with streaming data (say Kafka) I can see this getting interesting... schema registry should help but creating a view into the data with a lookback would be interesting with d3, done it with altair before.

Open articleView on HN

First, congrats on the project. It is always great to learn with hands-on experience.

At first, I thought the page was broken because there was no indication that anything was happening. Once the content is generated, you could add a message to scroll down, especially on Macs, where browsers don't show the scrollbar by default.

> the GitHub API provides fairly standardized responses so building dynamic charts wasn't too bad.

Out of curiosity, which criteria did you use for the "Other" section in the language chart? Aggregating everything below a certain percentage? Your page shows only TS and Other for my repos. All 7 languages used in the repo are shown on GH.

---

If you make a demo visualizing real-time data from Kafka make sure to share it as well :)

yes! I'll either add a message or an arrow, thank you!

other was less than 5%. I'd like to do a demo with Kafka + d3 soon. I _have_ done one with Streamlit, which is a python component library+deployment service at a pretty higher level of abstraction (I'd say similar to nivo in the JS world). https://flink-st-kafka.streamlit.app/

update: added a message-- again, thanks for the feedback

So the message on my desktop is below where I can see, and ditto when I preview in phone (either orientation). So still a problem. IMO I would just make the input box smaller.

And maybe do a legend for the pie chart, so immediately clearer what I am looking at instead of making me hover.

Cool stuff. If anyone is interested in visualising additional dimensions, this bubble packing approach is also pretty snazzy.

[0]: https://githubnext.com/projects/repo-visualization/

This is great. My one suggestion would be to include some one click way to jump to visualisations of a handful of examples. Granted you've got placeholder text but a) users have to type that in both boxes to actually see it; b) it's just one example; c) often people will be curious to see a repo for their favoured tech, so a few would be handy and lastly d) people won't necessarily know the repo author name off by heart so a simple way to have people use it will get them trying this out much more effectively

Something like a short series of links that populates got a repo each would be ideal.

Beautiful commit history visualizer can be built using Gource: https://gource.io/.

e.g. https://github.com/SinghCoder/Compiler-Construction?tab=read...

You might want to adjust the input elements to include autocapitalize="none" for mobile visitors.

It also couldn't seem to load my repo - pretty sure I didn't typo it so wondering if you might've hit rate limits? The GitHub API has fairly low limits, particularly if you're using a PAT instead of an oauth app.

Edit: it's working for me now

Hi, nice project, I checked 3 repos before I figured you need to scroll to see results,

thanks for the feedback! based on it, I may add an arrow-- would that help?

update: added a message

tried this in chrome and firefox and didnt work...nothing even when scrolling down

pretty cool and works fine on Android too! Thanks for sharing and congrats on the newly acquired set of skills!

I didn't like your project.

Nicholas,

Thanks

Reply on news.ycombinator.com