Has someone successfully added more quadrants?

[the-guti]

I'am trying to make this radar composed of 6 quadrants, but i cannot make the blimps appear correctly when i divide the circle in 6 slices

[micheldrescher]

Yes - I am running a radar with 6 segments, 5 rings, all with fixed names and positions. Check out my fork for details.

Cheers,
Michel

[the-guti]

Yes - I am running a radar with 6 segments, 5 rings, all with fixed names and positions. Check out my fork for details.

Cheers,
Michel

Awesome man. I'll check it out

[micheldrescher]

I tried to put it all in orderly branches etc - but I am no Node.js guy at all, and without any documentation on the main repo (and, let's say, creative SW engineering principles) it was quite some work... For me anyway.

[the-guti]

So i should use a google sheets with the hardcoded names that you gave to the rings right? if not its going to ignore them

[micheldrescher]

Yes. The names in the Google sheet for the rings and/or segments need to match those configured in the radar in a fixed names scenario.

[gustavz]

nice work @micheldrescher,
What did you modify to have it work with various numbers of segments and rings?
I would like to modify the default radar to work with any number, so no restrictions to maximum 4 rings and exactly 4 quadrants. (But fixed names and positions are not interesting for me).

[micheldrescher]

Thanks. :)
But to achieve what you are describing, you need to change quite a lot of things. From the top of my head:

• Remove hardcoded limits on number of rings and number of sectors.
• Re-engineer hardcoded 90 degree angle based trigonometric calculations into strict parametrised polar-coordinate calculation of segment arcs and blip positioning
• Re-engineer the number-based ring "thickness" into a function that ensures all rings cover the same area in the radar, based on screen resolution and available screen "estate"
• Remove the hardcoding of colours assigned to buttons and blips in the radar
• Remove or re-engineer the hardcoding of drawing segment separating lines and ring labels from hardcoded vertical/horizontal assumption to scale with the number of segments

Quite honestly, if I were to take the decision to develop a fully parametric and generic technology radar, I would go for a complete rearchitecting and rewrite (only using code snippets where useful) since the current code is sprinkled with assumptions and hardcoding of a four-quadrant based technology radar (which is absolutely fine, because the radar was originally never conceived to be anything else)

[gustavz]

@micheldrescher Thanks for the quick reply. The steps soudn quite doable, I think having a max flexible radare could be worth the effort.
I'll keep you up2date if I realise it, currently I am working with less than 4 rings and 4quadrants, but I like to have the flexibility if I need it...

[micheldrescher]

Hi @gustavz

I'd be interested to see how you go about it and how you solve it. Feel free to fork my repo to take along changes I made that you may find useful.

In any case, if you succeed, I suggest to maintain a managed Google Spreadsheet where you impose some conditional validation according to the use case of the day. I do that for our radar, and it has proven very useful for us.

[gustavz]

Hi @micheldrescher
some visualization stuff I dont quite understand is the sequence inside RingCalculator:
var sequence = [0, 6, 5, 3, 2, 1, 1, 1]
what does it do?

[micheldrescher]

Hi @gustavz
This array is an easy approximation to ensure each ring has the same space to accommodate blips (see bullet point 3 from me above):
(0,6) determines the thickness of the innermost ring;
(6,5) determines the thickness of the second ring;
and so forth:
Consider rings indexed starting with ID 0 (innermost) and n-1 for the outermost ring.
The thickness of the ring is calculated as (sequence[id] + sequence[id+1]) / sum of all elements in sequence
A bit convoluted, but it works as an approximation for four quadrants.

[gustavz]

Hi @micheldrescher,
what I dont quite understand is that you say you are running the radar with 6 segments, although I dont see the necassary modifications in your code. For example the angular calculation is still hardcoded to quadrants:

  quadrants = [
    { order: 'first', startAngle: 90 },
    { order: 'second', startAngle: 0 },
    { order: 'third', startAngle: -90 },
    { order: 'fourth', startAngle: -180 }

[micheldrescher]

Hi @gustavz,

Yes, you are right - I embarrassingly did not push the branch I am working on for that to this repo facepalm

My local code has this for comparison:

quadrants = [ 
{ order: 'first' , startAngle: 0, label: 'Secure Systems'},
{ order: 'second', startAngle: 60, label: 'Verification & Assurance'},
{ order: 'third' , startAngle: 120, label: 'Operational Risk'},
{ order: 'fourth', startAngle: 180, label: 'Identity & Privacy'},
{ order: 'fifth',  startAngle: 240, label: 'Cybersecurity Governance'},
{ order: 'sixth',  startAngle: 300, label: 'Human Aspects'}

]

[micheldrescher]

Update: I pushed the branch to this repo, have a look here: https://github.com/micheldrescher/cyberwatching_radar/tree/six_quadrants

[gustavz]

@micheldrescher I want to modify the input feature isNew to something ling Technology/Product/project, so from boolean to three case sensitive.
Therefore I need to modify the Legend.
But something I don't understand (I am new to JS / CSS) is the first attribute line in those functions:

  function triangle (blip, x, y, order, group) {
    return group.append('path').attr('d', 'M412.201,311.406c0.021,0,0.042,0,0.063,0c0.067,0,0.135,0,0.201,0c4.052,0,6.106-0.051,8.168-0.102c2.053-0.051,4.115-0.102,8.176-0.102h0.103c6.976-0.183,10.227-5.306,6.306-11.53c-3.988-6.121-4.97-5.407-8.598-11.224c-1.631-3.008-3.872-4.577-6.179-4.577c-2.276,0-4.613,1.528-6.48,4.699c-3.578,6.077-3.26,6.014-7.306,11.723C402.598,306.067,405.426,311.406,412.201,311.406')
      .attr('transform', 'scale(' + (blip.width / 34) + ') translate(' + (-404 + x * (34 / blip.width) - 17) + ', ' + (-282 + y * (34 / blip.width) - 17) + ')')
      .attr('class', order)
  }

  function triangleLegend (x, y, group) {
    return group.append('path')
      .attr('d', 'M412.201,311.406c0.021,0,0.042,0,0.063,0c0.067,0,0.135,0,0.201,0c4.052,0,6.106-0.051,8.168-0.102c2.053-0.051,4.115-0.102,8.176-0.102h0.103c6.976-0.183,10.227-5.306,6.306-11.53c-3.988-6.121-4.97-5.407-8.598-11.224c-1.631-3.008-3.872-4.577-6.179-4.577c-2.276,0-4.613,1.528-6.48,4.699c-3.578,6.077-3.26,6.014-7.306,11.723C402.598,306.067,405.426,311.406,412.201,311.406')
      .attr('transform', 'scale(' + (22 / 64) + ') translate(' + (-404 + x * (64 / 22) - 17) + ', ' + (-282 + y * (64 / 22) - 17) + ')')
  }

  function circle (blip, x, y, order, group) {
    return (group || svg).append('path')
      .attr('d', 'M420.084,282.092c-1.073,0-2.16,0.103-3.243,0.313c-6.912,1.345-13.188,8.587-11.423,16.874c1.732,8.141,8.632,13.711,17.806,13.711c0.025,0,0.052,0,0.074-0.003c0.551-0.025,1.395-0.011,2.225-0.109c4.404-0.534,8.148-2.218,10.069-6.487c1.747-3.886,2.114-7.993,0.913-12.118C434.379,286.944,427.494,282.092,420.084,282.092')
      .attr('transform', 'scale(' + (blip.width / 34) + ') translate(' + (-404 + x * (34 / blip.width) - 17) + ', ' + (-282 + y * (34 / blip.width) - 17) + ')')
      .attr('class', order)
  }

  function circleLegend (x, y, group) {
    return (group || svg).append('path')
      .attr('d', 'M420.084,282.092c-1.073,0-2.16,0.103-3.243,0.313c-6.912,1.345-13.188,8.587-11.423,16.874c1.732,8.141,8.632,13.711,17.806,13.711c0.025,0,0.052,0,0.074-0.003c0.551-0.025,1.395-0.011,2.225-0.109c4.404-0.534,8.148-2.218,10.069-6.487c1.747-3.886,2.114-7.993,0.913-12.118C434.379,286.944,427.494,282.092,420.084,282.092')
      .attr('transform', 'scale(' + (22 / 64) + ') translate(' + (-404 + x * (64 / 22) - 17) + ', ' + (-282 + y * (64 / 22) - 17) + ')')
  }

I assume they define somehow the shape of the object, but how to get to them? are they generated somehow? Looks like some matrix svg format.... How would I define those values to become a rectangle, to finally have three different shapes: circle, triangle, rectangle?

Would be very happy if you give me some insights/hints!

[micheldrescher]

Hu @gustavz,

Yes, correct. These functions use the d3s library to create HTML/SVG code:
"path" and "d" are HTML SVG code to describe the shape (either triangle or circle).
"transform" is used to literally transform the nominal-sized blips (triangle or circe) in scale and position relative to radar size and position in the surrounding HTML canvas.
"class" is used to attach one of the order class values ranging from"first" to "fourth" for colours (check the colours.scss file).

The code in the "d" attribute is pure SVG code to define the shapes. They are, in essence, Bezier curve definitions.

[gustavz]

@micheldrescher alright I already thought so.
But where do I get these shape numbers from?

[micheldrescher]

@gustavz

Google is your friend ;-)

Check this for example: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

I am not an SVG guy, I yet have to master going through that code myself.

[gustavz]

yeah you are right.
But why on earth did they get to these complicated svg paths and scaling + transforming function?
It is so easy to get circles, triangles, what ever as svg. I dont get this, this is madness :D

[micheldrescher]

Don't ask me ;-)

[Godspeed-nick]

@micheldrescher
Good work. I have been looking for a techradar that contains more than 4 quadrants.
Can you please give me an simple example on how the source file/document should be structure to be able to plot the blips in the radar? I have tried to create an public Google sheet to upload in your modified radar but I won't get any radar o neither any errors.

I have used same amount of columns to match the headers: "id,name,ring,quadrant,title,type,TRL,MRL,Score,Median,Performance,Min,Max,teaser,cwurl", but with out any luck.

I appreciate if you can help me on how the source file/document should be created to be able to run the tech radar.

[micheldrescher]

Hi, Have a look at this Google spreadsheet: https://docs.google.com/spreadsheets/d/1Pa1O-_-qdG32tlIwZ-6aXysemr-KpzhHqlryUm3I-cM/edit#gid=604888024 It is the direct source of the radar in action: https://www.cyberwatching.eu/technology-radar I am in the process of learning JavaScript (that in my old age, hahaha) and Node.js, so I hope to be able to give it some more clean-up and make in more useful - for example searching not only for project names (in our case) but also for free-form tags that I yet have to add to the underpinning data. I also am thinking of substituting some libraries, as well as Googledoc with MongoDB or similar. Cheers, Michel On 12 Nov 2019, at 15:05, Godspeed-nick <notifications@github.com<mailto:notifications@github.com>> wrote: @micheldrescher<https://github.com/micheldrescher> Good work. I have been looking for a techradar that contains more than 4 quadrants. Can you please give me an simple example on how the source file/document should be structure to be able to plot the blips in the radar? I have tried to create an public Google sheet to upload in your modified radar but I won't get any radar o neither any errors. I have used same amount of columns to match the headers: "id,name,ring,quadrant,title,type,TRL,MRL,Score,Median,Performance,Min,Max,teaser,cwurl", but with out any luck. I appreciate if you can help me on how the source file/document should be created to be able to run the tech radar. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#85?email_source=notifications&email_token=AGFTXTXO5JRVALMAH5ZCJODQTLA2FA5CNFSM4HBHFWM2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOED2RIEY#issuecomment-552932371>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AGFTXTSMMTXJ6C2NSYBOIBLQTLA2FANCNFSM4HBHFWMQ>.

[salocinnurbel]

Hello @micheldrescher
I am a newbie, and trying to understand how I can integrate/customise the radar with multiple quadrant...Seems like you did it, but I only see it trhough the https://www.cyberwatching.eu/technology-radar platform that you created (from what I understand). Is there a way I can customise this sheet so I end up having all the steps you created (like website highlighting ex https://cyberwatching.eu/projects/1037/decode)
Thank you for helping me
nicolas

[salocinnurbel]

@micheldrescher
Good work. I have been looking for a techradar that contains more than 4 quadrants.
Can you please give me an simple example on how the source file/document should be structure to be able to plot the blips in the radar? I have tried to create an public Google sheet to upload in your modified radar but I won't get any radar o neither any errors.

I have used same amount of columns to match the headers: "id,name,ring,quadrant,title,type,TRL,MRL,Score,Median,Performance,Min,Max,teaser,cwurl", but with out any luck.

I appreciate if you can help me on how the source file/document should be created to be able to run the tech radar.

Hi @Godspeed-nick
Were you able to make your own radar with multiple quadrant from michel file...??
Thank you for helping
Nicolas

[micheldrescher]

Hello @micheldrescher
I am a newbie, and trying to understand how I can integrate/customise the radar with multiple quadrant...Seems like you did it, but I only see it trhough the https://www.cyberwatching.eu/technology-radar platform that you created (from what I understand). Is there a way I can customise this sheet so I end up having all the steps you created (like website highlighting ex https://cyberwatching.eu/projects/1037/decode)
Thank you for helping me
nicolas

Hi Nicolas,

I hardcoded the radar to 6 segments (they are not quadrants anymore), but it should be relatively straightforward to have it display any other number of segments (e.g. 5 or 3, anything beyond 6 seems to have limited usefulness to me).

Have a look at the code repository: https://github.com/micheldrescher/cyberwatching_radar/ where you can find all my modifications.

To play with the code and the Google doc, I suggest the following:

1. Clone my github repository into your own
2. Clone the Googledoc spreadsheet: https://docs.google.com/spreadsheets/d/1Pa1O-_-qdG32tlIwZ-6aXysemr-KpzhHqlryUm3I-cM/edit#gid=604888024 - it is set to that anyone with the link can view, that should make cloning possible.
3. Change the hardcoded link in your github repo (in src/models/globals.js) to the link to your own Google spreadsheet
4. In case you change column names, make sure that you also update src/model/globals.js accordingly

Have fun playing around :)

[salocinnurbel]

Hi Nicolas,

I hardcoded the radar to 6 segments (they are not quadrants anymore), but it should be relatively straightforward to have it display any other number of segments (e.g. 5 or 3, anything beyond 6 seems to have limited usefulness to me).

Have a look at the code repository: https://github.com/micheldrescher/cyberwatching_radar/ where you can find all my modifications.

To play with the code and the Google doc, I suggest the following:

1. Clone my github repository into your own
2. Clone the Googledoc spreadsheet: https://docs.google.com/spreadsheets/d/1Pa1O-_-qdG32tlIwZ-6aXysemr-KpzhHqlryUm3I-cM/edit#gid=604888024 - it is set to that anyone with the link can view, that should make cloning possible.
3. Change the hardcoded link in your github repo (in src/models/globals.js) to the link to your own Google spreadsheet
4. In case you change column names, make sure that you also update src/model/globals.js accordingly

Have fun playing around :)

WOW Thank you so much for your help
It's almost working...
Unable to succeed point 3 - I cannot find where to link my Github to Google sheet???
Thank you again for helping me...
Nicolas

[micheldrescher]

Hi Nicolas,
I hardcoded the radar to 6 segments (they are not quadrants anymore), but it should be relatively straightforward to have it display any other number of segments (e.g. 5 or 3, anything beyond 6 seems to have limited usefulness to me).
Have a look at the code repository: https://github.com/micheldrescher/cyberwatching_radar/ where you can find all my modifications.
To play with the code and the Google doc, I suggest the following:

1. Clone my github repository into your own
2. Clone the Googledoc spreadsheet: https://docs.google.com/spreadsheets/d/1Pa1O-_-qdG32tlIwZ-6aXysemr-KpzhHqlryUm3I-cM/edit#gid=604888024 - it is set to that anyone with the link can view, that should make cloning possible.
3. Change the hardcoded link in your github repo (in src/models/globals.js) to the link to your own Google spreadsheet
4. In case you change column names, make sure that you also update src/model/globals.js accordingly

Have fun playing around :)

WOW Thank you so much for your help
It's almost working...
Unable to succeed point 3 - I cannot find where to link my Github to Google sheet???
Thank you again for helping me...
Nicolas

Hi Nicolas,

Apologies, I wrote this based on my local repository, which is ahead of the public one.
Replace step 3 with the following:

3. Copy the Google spreadsheet URL
   3.1 Start the radar (best to do that in dev mode, i.e. "npm run dev")
   3.2 Open a new browser tab and go to "localhost:8080
   3.2 you should see the default input form where you can paste in the Googlesheet address - do that and hit the submit button
   3.3 You should see the radar after a few seconds.

You need to ensure that your Googlesheet is published as per description of the original Technology Radar, otherwise you won't be able to access it.

As a shortcut, you can also type "localhost:8080?sheetId=https://docs.google.com/spreadsheets/d/1Pa1O-_-qdG32tlIwZ-6aXysemr-KpzhHqlryUm3I-cM/edit#gid=0&sheetName=Autumn&sheetName=Spring%202019" to get the Cyberwatching radar data - it should work out of the box.

If you then replace the sheetId value in the querystring with your sheet URL, you should see your own radar data.

Enjoy!

[BenDave]

Hi @axgtz / @gustavz I am aware that this is an old thread but I am wondering whether you made any progress on this.

I have started to work on adding support for dynamic quadrants, I may be able to leverage some of your work. I intend to submit a pull request with this functionality - although it seems like the maintainers of this repo have not been responsive to new PRs, judging by the lack of activity on the existing pull requests.

[the-guti]

Sadly I cannot share my code as I no longer have access to it :( . But I ended up just using polar coordinates and it made things way easier