try out D3.js for interactive map of qualities

[gernotstarke]

No description provided.

[yduman]

Hey Gernot,

I am planning to look into this. Happy to discuss details along the way. Overall I had Sigma.js in mind to use for graphing things out, if there is no strong attachment towards D3 of course.

[gernotstarke]

thanx - makes my day :-)

[yduman]

Quick update: I have a minimal version up and running on my fork. The homepage has a small section where the graph is displayed. You can interact with it and double click nodes to visit their page. I started with property nodes first in order to get to know the library a little and understand the layout system.

I also made some changes regarding the development itself which might affect slightly the deployment process. I currently don't know how GitHub Pages is set up here for deployment, but it would be good information, before I dive in further.

What I did was to introduce npm packages and esbuild as a bundler. I think this setup can be beneficial for future features, but I am open for discussion :)

If you want to play with the initial draft, I updated the docker-compose file. I will look into improving it further, because the jekyll service has for example no incremental builds.

Some explanation about some new files/folders:

• src is a folder for development purposes only. You can write usual JS code there and make use of any NPM dependency you might need
• Using files from src, esbuild automatically bundles and minifies it into an asset for deployment. E.g. assets/js/q-graph.js
• Right now, the build and watch scripts I added in package.json only consider the quality graph, but this can be easily configured to be more general

Next Steps for me:

• Add all remaining nodes and edges
• Provide different context views (ISO25010, Q42, Tiny)
• Add search capability
• Highlight connections when hovering over a node
• Add a new page for full screen display of graph
• Add a graph configuration component for tweaking things like force etc. (this will be interesting)
• Check on more interactivity options

Let me know what a "good enough" state would be in your opinion. I can open a PR for this state then. I can also open one now as a draft and continue working on it. Don't know what is more preferred in this case.

[gernotstarke]

whow, sounds great.

The build process currently is the standard GitHub pages build, and uses the custom domain (which is actually hosted by HostEurope under my personal account.) That's all pretty standard, imho.

We could / should create a GitHub action that triggers the JavaScript build stuff, testing and bundling.

After that action successfully completes, the generated artifacts will be deployed by the GitHub jekyll build.

If you like esbuild, let's stick to it - I leave that to you.

My first glimpse on your draft: Looks good. Thank you so much!