Add a Tüftlermatrix

[dialogik]

Users shall be able to set values (e.g. a value between 0 and 100) representing their skill level for any aribtrary skill. All users shall then be displayed on a 2-dimensional matrix according to their skill values.

To start, the API in the competences branch of dialogiktv-api already returns two skill values: competenceHardware and competenceSoftware and if those levels are already validated by dialogikTV (we currently plan to check each entry into the database and might request some kind of evidence for a given skill level).

[
    {
        "username": "dialogik",
        "twitchChannel": "dialogikTV",
        "competenceSoftware": 63,
        "competenceHardware": 14,
        "about": "Ich bin vor allem Web-Developer (PHP, auch JavaScript)"
    }
}

Matrix preview

The d3-matrix branch already contains a basic matrix grid, with a couple of blue entries (where competenceSoftware > competenceHardware) and some orange entries (where competenceHardware > competenceSoftware).

What now

• Opt-in and opt-out via Twitch auth
• Small tooltips with Twitch avatar
• More information on click (e.g. via modal)

[dialogik]

Resource: Using D3.js with React: A complete guide

Relevant here maybe: How to make a chart reusable in React and D3.js