Zalando Tech Radar

Set up local development environment

master

To run the Tech Radar locally for development:

Install dependencies using yarn or npm:
```
yarn
```
Start the local development server:
```
yarn start
```
Access the application at http://localhost:3000/.

yarn 
yarn start

Integrate the Tech Radar visualization

master

To use the Tech Radar visualization in your project, follow these three steps:

Include dependencies: Load d3.js (v7) and radar.js via script tags.
Prepare the container: Insert an empty <svg> element into your HTML with a unique id.
Initialize the radar: Call the radar_visualization() function with a configuration object.

Note: The radar.js script is based on d3.js v7.

<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://zalando.github.io/tech-radar/release/radar-0.12.js"></script>

<svg id="radar"></svg>

<script>
radar_visualization({
  // configuration goes here
});
</script>

Configure the radar_visualization function

master

The radar_visualization() function accepts a configuration object to define the appearance and data of the radar.

Configuration Options

Key	Type	Description
`repo_url`	`string`	The URL of the repository containing the radar data.
`svg_id`	`string`	The `id` of the `<svg>` element where the radar will be rendered.
`width`	`number`	The width of the visualization.
`height`	`number`	The height of the visualization.
`scale`	`number`	Adjusts the overall size of the radar.
`colors`	`object`	Object containing `background`, `grid`, and `inactive` hex color strings.
`font_family`	`string`	Font stack (e.g., `"Arial, Helvetica"`).
`title`	`string`	The title of the radar.
`quadrants`	`array`	Array of objects defining quadrants, e.g., `[{ name: "Top Left" }]`.
`rings`	`array`	Array of objects defining rings, e.g., `[{ name: "INNER", color: "#5ba300" }]`.
`print_layout`	`boolean`	Whether to enable print-specific layout.
`links_in_new_tabs`	`boolean`	Whether links should open in new tabs.
`entries`	`array`	Array of data entries to plot.

Entry Object Structure

Each object in the entries array represents a technology on the radar:

label: The name of the entry.
quadrant: The quadrant index (0-3, counting clockwise starting from bottom right).
ring: The ring index (0-3, starting from the innermost ring).
moved: The movement status:
- -1: Moved out (represented by a downward-pointing triangle).
- 0: Not moved (represented by a circle).
- 1: Moved in (represented by an upward-pointing triangle).
- 2: New (represented by a star).

radar_visualization({
  repo_url: "https://github.com/zalando/tech-radar",
  svg_id: "radar",
  width: 1450,
  height: 1000,
  scale: 1.0,
  colors: {
    background: "#fff",
    grid: "#bbb",
    inactive: "#ddd"
  },
  font_family: "Arial, Helvetica",
  title: "My Radar",
  quadrants: [
    { name: "Bottom Right" },
    { name: "Bottom Left" },
    { name: "Top Left" },
    { name: "Top Right" }
  ],
  rings: [
    { name: "INNER",  color: "#5ba300" },
    { name: "SECOND", color: "#009eb0" },
    { name: "THIRD",  color: "#c7ba00" },
    { name: "OUTER",  color: "#e09b96" }
  ],
  print_layout: true,
  links_in_new_tabs: 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)
                            //  2 = new       (star)
   }
  ]
});

What's inside zalando-tech-radar

Configuration Options

Entry Object Structure