HN Explorer

Show HN: GitHub Repo Visualizer Using D3 (see-my-repo.netlify.app)

76 points by Cerchie ↗ HN
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.

15 comments

[ 2.7 ms ] story [ 39.2 ms ] thread
fryuni
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 :)

Cerchie
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/

Cerchie
update: added a message-- again, thanks for the feedback
apwheele
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.

nealeg
Hi, nice project, I checked 3 repos before I figured you need to scroll to see results,
Cerchie
thanks for the feedback! based on it, I may add an arrow-- would that help?
hu3
pretty cool and works fine on Android too! Thanks for sharing and congrats on the newly acquired set of skills!
mnahkies
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

beanjuiceII
tried this in chrome and firefox and didnt work...nothing even when scrolling down
nmstoker
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.