search

dotnet / nuget-trends

Check out NuGet packages adoption and what's trending on NuGet.
https://nugettrends.com
MIT License
146 stars 25 forks source link

Logarithmic scale #200

Open swharden opened 1 year ago

swharden commented 1 year ago

Download count for popular packages typically follows an exponential growth curve (e.g., screenshot in #189). By plotting exponential curves on a log-scaled Y axis they appear as straight lines, making it easier to compare multiple exponential curves to one another. It's hard to eyeball whether growth differs between curves that start at different time points (e.g., an old exponentially growing package vs. a newer one), and adding support for log-scaled vertical axes solves that problem.

Would you consider adding a checkbox to present data on a log-scaled axis? If there's interest in this I can try to figure out how to implement it properly and I'll open a PR. I'm not familiar with Angular, but I can try my best. If this feature isn't desired or you think the checkbox would be added UI clutter, no worries! I wanted to ask before I worked on this further.

Here's a quick mockup of what it could look like, although it looks like charts.js is struggling with missing data points (their log is being interpreted as zero).

Linear Y Axis Logarithmic Y Axis
image image

To create the mockup I modified this file according to the Chart.js 2.9 Log axis docs

https://github.com/dotnet/nuget-trends/blob/62a481bc7a7629a8fe805f77f4b47f93bad3de21/src/NuGetTrends.Web/Portal/src/app/packages/packages.component.ts#L157-L159

        yAxes: [{
          display: true,
          type: 'logarithmic',
          ticks: {
joaopgrassi commented 1 year ago

Hey @swharden!

I think this makes sense, and would be something cool to have!

Regarding the "checkbox" I don't really know where we could add it. I had some ideas to add some more "advanced" filters/options so I think this is another one for the bucket. I was leaning towards having either some sort of "expandable" component above the list of package/tags that one could expand to see all the "advanced" filters/options. Another alternative would be a dialog but.. not sure that's a good UI/UX.

You could just start with it, and add the new option on the side of the drop-down for the period and we can see how to go from there.

Another thing is we are using a prob old version of chart.js, I looked once to upgrade it and there were several breaking changes :( so.. not sure if that's going to impact on this change.

Here's a quick mockup of what it could look like, although it looks like charts.js is struggling with missing data points (their log is being interpreted as zero).

The code that returns the data returns 0 on purpose so we could handle situations where you compare two packages and one of them didn't exist at the same period.

For ex: Say you select a period of 2 years and 2 packages. The second package only started existing on the second year. In this case, the line for the second package was being plotted at the start of the chart, and not exactly where it should be (middle). I remember i tried several things and the end we went with this approach. Here's an example: https://nugt.net/s/iIXU1a8

swharden commented 1 year ago

To explore these concepts I made a little WinForms application using ScottPlot.net and some of the JSON files retrieved using the NuGetTrends.com API: https://github.com/swharden/NuGet-Stats-Analysis

This demonstrates what log scaling the data looks like, how it facilitates comparing download rates across multiple packages, and also what it looks like if you add a checkbox to align packages by the date of their first upload.

nuget-log2

I think this is sufficient to communicate what this type of functionality could look like if implemented in the web viewer.

good UI/UX

I agree it will be important to get this right. An expanding panel with additional graph options is a good idea. Upgrading chart.js at the same time makes sense.

You could just start with it

I'm not familiar enough with Angular (or talented enough with UI/UX) to feel like I'm the best person to implement this. I'm happy to leave this issue here as a reference for whoever wants to pick this up in the future, and it can be closed if it's not actionable.

Thanks again for your input and all the work you do for this project! I really value the information it provides, and am very happy this web app exists 🚀✨

joaopgrassi commented 1 year ago

Whoa great stuff, thanks for the sample!

No problem. Let's leave the issue open, I think this would be a good new feature.

I can tackle it when I have some free cycles or someone else can of course. Also, if you want to learn Angular and etc I could also help you get started 😊