This visualisation tool is meant to help development teams across your company to align on technology choices. Is is based on the pioneering work by ThoughtWorks.
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="radar.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.
- Install dependencies with npm:
npm install
- Start local dev server (using BrowserSync):
npm start
- Your default browser should automatically open and show the url
http://localhost:3000/