When I was freelancing, one of the things I did regularly was read the ThoughtWorks Technology Radar. It’s a snapshot of the different technologies that ThoughtWorks is considering and using. As a freelancer, I found it a good read as it provided a glimpse of what was happening in the web development industry. Once I started working full-time again, I stopped reading it and didn’t revisit it for a few years.

My current role is senior software engineer, but I am working towards the next role up from this one. This involves expanding my role in several ways, including learning and adopting new technologies and processes. One way I thought I could do this was to set up my own technology radar. ThoughtWorks does offer a means to run your own technology radar, but I wanted my own technology radar to be more straightforward.

Armed with my new knowledge of using SVG over the last couple of years, I decided to start building a technology radar of my own.

My technology radar comprises two layers of quadrants, the smaller quadrants on top of the bigger ones, to achieve the effect of having an outer trial quadrant and an inner adopt quadrant. I used the path element to do this.

<path d="M 10 45 A 40 40 0 0 1 45 10 L 45 25 A 30 30 0 0 0 25 45 Z" fill="#e3f2fd" stroke="#2196f3" stroke-width="0.5"/>
<path d="M 20 45 A 25 25 0 0 1 45 20 L 45 45 Z" fill="#e8f5e9" stroke="#4caf50" stroke-width="0.5"/>

The tokens representing the different individual items are simply circles and text elements nested under a group tag so that I can group all the items together.

<g transform="translate(40, 35)">
  <title>TDD</title>
  <circle cx="0" cy="0" r="2" fill="#4caf50"/>
  <text font-weight="bold" x="0" y="0.5" font-size="1.5" text-anchor="middle" fill="#fff" font-family="Arial, sans-serif">2</text>
</g>

I added a title tag to each token to achieve a hover effect with a text description of the token.

Finally, I added labels to the middle of the quadrant to indicate the two sections and each corner to indicate the type of technologies grouped in that quadrant.

I haven’t figured out how to programmatically group tokens in each quadrant with code, so for the moment, I am using SVG Viewer to place tokens in each quadrant by hand.

I have published a GitHub Gist of the technology radar with blank tokens filled in for one of the quadrants. Feel free to fork this technology radar for your own needs.

You can find my own technology radar here. I’ll be updating it as the year progresses.