At Productsup, we maintain a public Tech Radar to help our engineering teams align on technology choices. Is is based on the pioneering work by ThoughtWorks.
This version is a modified version from Yoyo Wallet.
This repository contains the code to generate the visualization:
radar.js (based on d3.js v4), and
was forked from work originally done by Zalando.
Feel free to use and adapt it for your own purposes.
- include
d3.jsandradar.js:
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="http://productsupcom.github.io/tech-radar/release/radar-0.5.js"></script>- insert an empty
svgtag:
<svg id="radar"></svg>- configure the radar visualization:
radar_visualization({
svg_id: "radar",
width: 1450,
height: 1000,
colors: {
background: "#fff",
grid: "#bbb",
inactive: "#ddd"
},
title: "My Radar",
quadrants: [
{ name: "Bottom Right" },
{ name: "Bottom Left" },
{ name: "Top Left" },
{ name: "Top Right" }
],
rings: [
{ name: "INNER", color: "#93c47d" },
{ name: "SECOND", color: "#b7e1cd" },
{ name: "THIRD", color: "#fce8b2" },
{ name: "OUTER", color: "#f4c7c3" }
],
print_layout: true,
entries: [
{
label: "Some Entry",
quadrant: 3, // 0,1,2,3 (counting clockwise, starting from bottom right)
ring: 2, // 0,1,2,3 (starting from inside)
moved: -1 // -1 = moved out (triangle pointing down)
// 0 = not moved (circle)
// 1 = moved in (triangle pointing up)
},
// ...
]
});Entries are positioned automatically so that they don't overlap.
As a working example, you can check out docs/index.html — the source of our public Tech
Radar.
- install dependencies with yarn (or npm):
yarn
- start local dev server:
yarn start
- your default browser should automatically open and show the url
http://localhost:3000/
- update entries from Google Docs:
yarn generate